Table of Contents
Few days ago I listened to Web Ahead podcast (http://5by5.tv/webahead/) episode with Mark Boulton. This episode is a bit older, from November 2011, however with good stuff time does not matter. Mark mentioned interesting thing when it comes to responsive design. The idea was to design for specific breakpoints instead of resolutions and I think that he was right. Since many Web Designers design primarily for specific resolutions I want to talk about this subject little bit more today.
Case of responsiveness
Responsive is a well used buzzword today, but how many people really know what does it mean? In essence, it is approach aimed at crafting websites to provide viewing experience across all the devices out there. The web site respond to these gadgets and it is not necessary to adjust or modify the code every month because this or that gadget has different resolution. RWD philosophy includes fluid grids, flexible images and use of media queries.
Responsive Illusion
Sad but true. It is illusion some people live. You think that because your page changes its layout, while you are playing with the size of your browser, your website is responsive. In a fact it’s not. To test your page in hardcore style, view it in older device and then wait until a new gadget appear on market and try this. Do not change the code. If your page will adapt without any issues or glitches, then it is really RESPONSIVE. This is the philosophy of responsiveness in action, page responding and adapting to any device without the need to touch the code.
With resolution-oriented approach, when new device comes and has different resolution, your page will probably break. The reason for this is that you cannot predict what next resolution or width / height ratio will be, so you created layout only for existing ones. In case of new resolution you have no pre-crafted layout and your page will not suit that particular device properly. The only thing you will be able to do is to add another media querie with dozens of lines of code to create new layout. This new layout might will probably work, but how long? Until new device come?
The world of devices
We cannot afford to target any specific resolutions like to create different layouts. The market of devices is too big and growing too fast to keep track of it. It is every month when some new gadget appear and, of course, it is bigger or smaller than its predecessor. Don’t take me wrong here. I love technology, it is my second passion (with design). This makes Web Design something like center of gravity. back to subject … Problem is with some Web Designers. They clutter their stylesheets with hundreds of lines of code to catch every possible resolution and to suit page to this broad group of devices. This approach is insane!
I suggest you to throw this approach to the trash can and focus on breakpoints instead. With this approach you will modify your layout for couple of few breakpoints. The amount depends more on the structure of your page and the content than some “default” number.
However, I think that three breakpoints are enough and will get job done pretty well on most of your projects. These will cover mobiles, tablets and desktop. See, when you switch your attention from resolutions to breakpoints, only three main groups of device will left. Now it will be much easier to create responsive page. These media queries will be very simple. Something like max-width: 480px for mobiles, max-width: 768px for tablets and min-width: 769px for bigger screens. Sure, you will need to modify these values to suit the content, but they will be enough to craft great experience.
If you want some proof, take a look at mediaqueri.es. This website shows about ten pages in four shots for different resolutions – mobile, smaller tablet, tablet and desktop. Another great example of breakpoint-oriented approach is colly.com page. They use only two(!!) media queries and the website looks great! Now, tell me what more do you need to give this approach a try?
Summary
Forget about designing for particular resolutions. Resolutions are not suitable for your Design to be based upon them. That will only get you into madhouse. World and technology is changing very fast to keep track of it. Focus on few breakpoints instead and make sure the page looks great in these points. This way your page will be really responsive in its purest sense and it will resist the hardest test of all … Time.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
