Common misconceptions about responsive design

I browse the internet everyday, on multiple devices. I use my Macbook Pro, iMac, PC, iPad, iPhone and yes even my television. So it really bothers me when I see websites that aren't optimized for larger screen resolutions, or that take two minutes to load on my mobile device.

We've all embraced the concept of responsive design. Very few people argue against it. In fact, the only convincing repost I've heard recently is that a client is unwilling to pay for the extra time involved. But as with any new practice, myths have grown up to counterpoint it.

Let's see if we can bust a few of those misconceptions...

Responsive design is all about mobile

Yes the mobile web is exploding and yes it is the driving force behind responsive design, but when we think of responsive design we need to consider more than just mobile. With the introduction of retina displays and video game browsers, internet users are now viewing websites on larger screen resolutions and in many different contexts.

Try to take into account different user contexts when designing and developing responsive websites. You need to think about what device a user is using: is the user on a mobile device or at home in front of the television? You need to think about where the user is located: is the user in line at the grocery store or camping out in the wilderness? Having good content means nothing if your site takes ten minutes to load while your users are sitting on the beach having a margarita.

Content is everything but context is everywhere and it is something that you have absolutely no control over. Which is why, realistically, your content should scale to any resolution, big or small. We have a set of tools at our disposal that will allow us to manipulate layouts, optimize text sizes, and increase performance for any context so remember to use them.

Remember context is shifting all of the time, which is why it's so important to balance the visual layout, user's needs, and performance when approaching a responsive design. It's not just about mobile.

Responsive design doesn't work for every use case

I used to argue that responsive web design will not work for every project and that it depends on the use case. Well, I've recently amended my view and I firmly believe that if we are going to be user focused designers and developers we need to approach every project with responsive design in mind.

Fixed width websites can be limiting on larger and smaller screen resolutions. The bottom line is that our web sites should be accessible to everyone no matter what device or screen resolution they are using, without restrictions.

Responsive design is about device breakpoints

I have noticed a trend emerging in the industry where designers and developers are building responsive websites that scale to certain device resolutions only, and I'm guilty of this as well. The three most common devices are of course laptops/desktops, iPads and iPhones (or other mobile devices). As designers we need to realize that responsive design is about design breakpoints and making content readable and accessible to everyone, not just the users of certain devices.

That being said, if you are designing websites in a software program, it is important to have some sort of framework with breakpoints to work off of. I suggest creating your own. Optimize your layout according to the content. The best way to find out what breakpoints work best is to sketch a few wireframes first to get an idea, then you can start laying down pixels in your software of choice. Make sure that you work off the same grid when wireframing and designing.

If you are like me then you code your wireframes and create a live prototype. This has helped me alot with my responsive workflow because I can create a fluid mockup and add breakpoints to the design as the design breaks instead of trying to cram pixels in Photoshop.

Responsive design harms typography

One of the biggest problems I've noticed on a lot of responsive websites is that typography is thrown to the wolves when designers and developers choose to use device breakpoints over design breakpoints. In my opinion choosing device over design shows a complete disregard for the content being published and the user consuming that content. The content should maintain its readability until it has to adjust to maintain that readability. Content will always be king and the accessibility and readability of your content should always be the highest priority.

One of the ways that I like to handle maintaining the readability of content in a responsive design is to use relative units such as ems for font-size, padding, margins and layout. Responsive design is all about proportionate layouts and, in my opinion, ems are a perfect fit.

Ems are relative units that are scalable to the font-size of parent elements, they can save you a lot of time and hassle, and they help to maintain the structure of your entire layout. What does this mean you ask? Well it means that as the base font-size increases or decreases, the layout adjusts evenly without fudging anything up.

Here's an example, lets say we've found two design breakpoints, one for a very large desktop monitor at a super resolution and one for a small tablet. Let's also say our base font-size is 16px which equals 1.0em and we bump the base font-size up to 22px when the site is viewed at a resolution of 3840 x 2160(super resolution) and we lower that base font-size to 14px at a resolution of 800 x 600(small laptop/tablet). We've just dramatically altered the size of the type and the layout of our website at two designated breakpoints, one large and one small. A headline at 1.4em with a 22px base font-size for larger resolutions means that 1.4em equals 30.8px and at the smaller base font-size of 14px, 1.4em would equal 19.6px. Even though our font-size got dramatically bigger at 3840 x 2160 we don't have to worry about the layout breaking because it has also adjusted. Let's say our containing element had a width of 50em. At a resolution of 800 x 600 that would be 700px but at the resolution of 3840 x 2160 it would be 1100px. Our padding and margins would adjust as well. At the larger resolution having font-sizes and layout set in ems has allowed our design to scale proportionally which makes our content more accessible and more readable.

Responsive design means hiding content

The purpose of responsive design is to make your content accessible to everyone, even the disabled, across all screen resolutions and devices. Hiding content is never a good idea and, chances are, if you have to hide it you didn't need it to begin with. Hiding content makes it unreadable to screen readers and you are now making your content inaccessible to those with visual or cognitive disabilities. Keep this in mind, content should be universal across all devices, don't punish your users by limiting what they can view on a separate device.

That being said, I still find a few use cases where display: none; comes in handy. Mostly all of the use cases deal with some sort of navigation, and I use display: none; on navigation elements that change form on different devices. It's never a good idea to limit or hide content on different devices because you've most likely based that decision on an assumption and some user, somewhere, will have a very bad experience.

Responsive design sacrifices performance

There have been a number of websites that I have seen lately that have shown a lack of empathy towards users with low bandwidth. The majority of these sites have the same things in common, large images and large JavaScript libraries and a lot of these websites could have been optimized if they were designed with a mobile first approach.

Because there is still a lot of discussion about responsive images, it is hard for anyone to commit to any one solution. I understand the dilemma, but waiting around for a perfect solution that is standard across all browsers and devices is not making your current website any easier to use on devices with limited bandwidth. Find a solution that best fixes your problem and run with it. Not finding a solution means performance issues for everyone, and that completely defeats the purpose of responsive design.

Large JavaScript libraries can also cause problems on smaller devices. Try finding a way to call them conditionally based on screen resolution or type of device. Performance shouldn't be an afterthought when it comes to responsive design.

Conclusion

The web has exploded, and with the advent of mobile and smartphone technology we can access content anywhere and in any context. It's important to make sure we can reach all of our users and give them what they want, when they want it. Responsive design is a very new technique and in my opinion it's the perfect technique to unify our content across the web.

(courtesy: www.webdesignerdepot.com)