Cheesetoast

Brain Food for Web Developers

responsive

Is Responsive Web Design Important?

There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

2 Comments

  1. This is pretty much “googleize” the designing paradigm. The most elegant, laconic and fast loading layout is already defined and taken by Google.

    For instance, what would u, as a movie theater manager(?) plant into 4″ screen real estate? Deeply discounted popcorn&soda ad, new release title (which one?), search field for a movie titles, or what? Address/location, phone number, stupid tweet icon to start needles and pointless blurbs about some “out of blue” shows after watching that Grand BS with surround sound?

  2. That’s a good point Kolyan. Web designers have to put a lot more thought into how they use the screen space on mobile devices and this if often a challenge.

    I think one of the advantages of responsive design is that it allows the designer to tailor the way the information is presented to better suit the device. For instance, a mobile user walking down the street or standing on a crowded bus is likely to use the site differently than someone sitting comfortably by their desktop.

    To continue the example of the movie theater manager, the web tracking might show that mobile users are more likely than desktop users to view movie times over movie reviews. Responsive design allows the manager to present the information accordingly.