Navigation

Common misconceptions about responsive design

By Daniel Kling | Web Design | May 28, 2013

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.

 

What other myths about responsive design would you like to debunk? Are there any downsides to responsive design? Let us know in the comments.

Featured image/thumbnail, responsive web image via Shutterstock.

Share this post
Comments (no login required)
  • https://plus.google.com/100326307084686532550 Christa Joe

    The key concern behind the idea of responsive web design is to assist a visitor or user of the website for similar experience on any platform; be it a mobile device, varied screen size laptops and high resolution smart TVs. Everywhere the look and feel of the website should remain same.

    Learn about different parameters and process of developing a responsive website design here:http://blogs.q3tech.com/2013/02/22/introduction-to-responsive-web-design/

  • ADinks

    “I use my Macbook Pro, iMac, PC, iPad, iPhone and yes even my television.”

    How hard was it to hold back from saying “Apple TV”?

    As for responsive design, I embrace it and apply it to mobile sites. Call me a dinosaur. Call me a throwback. Whatever. I make separate mobile sites so I can give the mobile context its own full consideration and approach. The key is to make sure all of the important stuff is equal on both versions. I know a lot of people think “if it’s important, it should be on both, so mobile-first is the way to go. The extra stuff on desktop sites shouldn’t even be there.” Well, the extra stuff isn’t always just content.

    • http://twitter.com/danklingjr Daniel E Kling Jr

      There is no right or wrong approach, whether you choose dedicated, responsive or adaptive the only thing that matters is your user and the consumption of your content. Also, I do own an Apple TV, but I don’t use it for the web. I do use my XBox 360 browser from time to time.

  • jaystrab

    The #1 misconception about responsive design is that it is a necessity and every site needs it. They don’t. The main problem I’ve seen with responsive sites is that there is no option to view the full site version. It forces the user to view mobile or whatever size you’re viewing at rather than offering the user a choice.

    • http://twitter.com/danklingjr Daniel E Kling Jr

      I’d opt for responsive over non, my biggest concern is allowing a sites content to be readable, accessible and to fit the appropriate context. How do you read a 2500 word article that spans 900px on a mobile device? Having to swipe left and right for every line would get monotonous after a while.

    • Cristian Gorrino

      I think the not hiding things part of the article covers this…

    • http://twitter.com/zoe_rooney Zoe Rooney

      In theory, viewing the mobile size shouldn’t be a handicap that you’d want to get out of by viewing a “full site.” That sort of implies that at smaller screen sizes you’re only viewing a partial site, which goes against the way I think of responsive design (and also connects to the misconception in the post about hiding content).

      That said, I agree that it isn’t a necessity or priority for every site. I think many sites are sufficiently accessible without being responsive and that accessible is not the same as optimized or scaled differently or whatever. Blogs are a great example of a use case where responsive is typically a good choice. But I’d argue (and have argued) that there are a lot of other factors that go into the decision and that it’s a bit of an exaggeration to imply that a site that is not responsive is not accessible.

  • leighjeffery

    Great article! Responsive and agile design go hand in hand these days, giving heart palpitations to designers everywhere, articles like this one do a great job sorting out the mess and calming our nerves. (Information is for smugness in the office;) Thanks for that! :D

  • http://www.testshoot.com/ TestShoot

    Responsive design is like playing Tetris with content. After a few blocks, it gets crowded and you lose.

  • http://www.zell-weekeat.com/ Zell Liew

    Some clients don’t really differentiate between mobile and desktop and they really want to throw everything in. The challenge is to educate people on the real purpose behind responsive design.

    I’m guilty of making responsive designs mainly catered towards mobile and not so much on bigger screens. It’s great to have a reminder.

  • Reegan Crazyguy

    I agree with your “Responsive design harms typography” but not with “Responsive design means hiding content”

  • fusion01

    Well written article and highly interesting. Thank you.

  • Henrik Petersson

    I think one advantage of the “mobile-first” responsive approach is that it forces you to simplify your page which can result in a better experience on the desktop as well. However, it can also do the exact opposite and not take advantage of the desktop platform.

    I think that an adaptive design approach makes much more sense. To make sure that every visitor get the best possible user experience on the specific device they are using. This can mean a simple responsive layout in some cases, in other cases two seperate sites are needed, and everything in between.
    Responsive design is not a cure-all, it’s a tool to be applied where it fits best.