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.
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
- 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.
- 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.
- 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.
- 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.
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“.