When I first started working in the web design field (longer ago than I care to admit), designers planned their designs for the "lowest common denominator" screen size. At the time, that was generally 640x480 pixels. If you were targeting larger monitors, you would be designing for 800x600, or even 1024x768 in really rare cases. But no matter what, you were designing to a specific size.
If the user happened to have a smaller screen than the size you had designed for... well, that was what scroll bars were for. Most of the time, having to scroll to see a full web page was just an accepted inconvenience.
Technology to detect a user's viewport size was unreliable at best, and trying to accommodate two different layout sizes generally meant creating separate page templates and often a completely separate set of images to support the larger size of the page.
But when media queries came along, designers were given an easier way to modify their designs dynamically to support different viewport sizes. Responsive Design was born!
Admittedly, there are a few drawbacks. Creating a good responsive design means that the designer has to plan around the fact that the presentation of the page content is going to shift dramatically on different viewport sizes.
The CSS that controls the display is far more complicated, and takes longer to create. Testing and troubleshooting takes much longer as well, since you have many more browsers, devices, and even screen orientations to contend with. All of this leads to a higher cost.
So, is it worth it? Absolutely!
Here are 5 great reasons Responsive Design is taking over:
- Mobile traffic is growing. Mobile platforms continue to claim an ever-higher percentage of the traffic on the web. As more and more people work, play, and shop with their tablets and smartphones, your website visitors come to your site with the expectation that it will work well on their mobile devices.
- It helps future-proof your website. Since responsive design is built to respond to viewport sizes instead of specific devices, when a new viewport size comes along, you'll be ready for it!
- It can save you money in the long run. The same aspects of responsive design that help make it more future-proof also mean that you don't have to pay for constant redesigns to accommodate new devices.
- Responsive frameworks come with extra goodies. Often, designers use readily-available CSS frameworks to help create bulletproof responsive layouts (we often use Foundation 5, for example). These libraries often contain other great features that you can use when you create your content, like button groups, tabs, accordions, responsive columns, and more.
- It's much easier for the user. If you've ever played the “pinch and swipe” game with a non-responsive site on your mobile device, you know what I'm talking about. Trouble using a website can ruin the experience for a potential customer and leave them feeling frustrated. Why not make it easy for them to work with you?
I hope this helps if you're on the fence about whether or not to invest in responsive design. It really is so much better in so many ways.