Responsive Web Design – The Wild West of the Web

Welcome to the first in a series of posts on Responsive Web Design from Usability Matters!

Responsive web design is becoming a popular practice for creating websites, and we are certainly seeing a rise in clients who come to us with the word responsive on their lips! Google recommends responsive web design as an industry best practice, and while lots of progress has been made since Ethan Marcotte’s seminal article in May 2010, the world of responsive design can feel like the Wild West of the Web! At Usability Matters we have been diving head first into this exciting approach. This post is an introduction to some of the key concepts around Responsive Web Design as well as a summary of ideas shared by thought leaders from around the web.

What is Responsive Web Design?

Responsive web design (RWD) is about making your content a pleasure to interact with on any screen. It is achieved through front-end development techniques, which use media-queries to adapt your site’s content, layout and navigation to best fit the user’s screen. This means that the same HTML is served for all devices, using only CSS media queries (and potentially some javascript) to specify how the site appears. In short, “one site fits all”. A defining characteristic of RWD is the move away from pixel-based dimensions towards proportional units of measure. Benefits of a well-executed RWD project include device independence, improved usability, and long-term savings. Approaching your website through a RWD process means that your content is ready to go anywhere a browser can go!

Is Responsive Web Design (RWD) Right for My Project?

While there are many potential benefits to the RWD approach, there are also some considerations. A responsive project usually takes longer and costs more upfront than building a non-responsive website. Maintenance can also be more costly due to development updates being more involved. If the experience you are trying to build relies on accessing the device’s hardware, a platform native approach may be optimal. HTML5 brings some exciting developments in this regard (for example geo-location), however the technology is still evolving. Finally, e-commerce experiences may be better served by mobile specific browsing and shopping cart platforms.

A Word About Breakpoints

One key shift in thinking that we’re exploring at Usability Matters is the move away from device specific breakpoints. Device fragmentation means that it really is not productive to think about breakpoints in terms of device sizes – rather, breakpoints can be determined based on what works best for the content layout. When you resize the browser and something starts to look off in your prototype – Voila! Breakpoint! Another concept is that of tweakpoints – the places where you implement minor changes such as padding between elements, without the need for an entire layout change.

Embracing RWD and Acknowledging Limits

What an exciting time to work on a RWD project! We are figuring out new ways of approaching design for the web across multiple devices. There are many things yet to be solved, and many unknowns. Developers are exploring new ways to implement flexible media like videos and imagery. Smashing Magazine recently did a round up of the current state of RWD that provides a great snapshot of where we’re at.

Acknowledging the Awesome RWD Community

This blog post would not have been possible without the amazing work by some brilliant minds on the web. Notably Brad Frost has done invaluable work with This is Responsive – a go to resource for all things RWD. His SXSW talk on RWD is available here and is a really informative and entertaining hour long session, highly recommended. Below you will find a condensed bibliography of some of our favourite links and resources.

Resources

Next Time…

We will be taking a look at RWD process and workflow. Stay tuned!