An Intro to Responsive Web Design

Responsive Web Design (RWD) is a design approach aimed at crafting sites to provide an optimal viewing experience. That means: easy reading and navigation with a minimum of resizing, panning, and scrolling across a gradient of different devices. At Usersnap we think a great deal of Responsive Design, and letting screen capture tools lead the way. Simply re-size your browser window, or open this blog on your smartphone, and you’ll know what we’re talking about.

Ethan Marcotte coined the term responsive web design in a May 2010 article in A List Apart. He then described the theory and practice of responsive web design in his 2011 book Responsive Web Design. Subsequently, Responsive Web Design was listed second in Top Web Design Trends for 2012 by .net magazine. Mashable called 2013 the Year of Responsive Web Design, as they see a ‘major shift in the consumption habits of their audience:

2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year. So which devices are consumers buying? Tablets, for one thing. (…) Smartphones, of course, are also a hot commodity.

Pete Cashmore on Mashable.com

The Challenge

Mobile-only users aren’t some strange new breed of customer, signaling their desire for different messages, content, and services through their choice of screen size and form factor. They’re just your customer. You can and should speak to them in same way you address all your other customers. They just want to engage with you on the device that’s most useful and convenient for them.

Karen McGrane in The Rise of the Mobile-Only User (via bokardo.com)

According to Google Mobile Research (Our Mobile Planet) only about 15% of the Internet users are completely satisfied with the user experience of the mobile web. Few companies design for mobile use specifically, whether they expect usage of native apps or mobile traffic. And even if they do, that in itself – optimizing for mobile browsing or creating an app – is a discussion on its own.

If it was up to Luke Wroblewski, a thought leader when it comes to web design, he’d offer the same content on every device, tailored to fit the screen, not the usage specifics of the device. Even though there is something to say for the notion that customers use a service for different purposes on different devices – mobile typically serving more present or last-minute matters – Luke means:

I personally think the benefits of that fluidity and flexibility outweigh some of the benefits of a separate m-dot experience today.

Luke Wroblewski on uie.com

He goes on to state: “The counterargument to this (serving the exact same website and content on different devices, red) often is, “Well, don’t people use desktops and laptops differently? Aren’t smartphones and tablets used in different ways?” The answer is yeah, absolutely. They are used in different ways, but the fundamentals of what makes your site or application valuable to people doesn’t change because the screen size changes.”

Bottom line here is that underneath the surface, the value you’re providing people across all those screens is the same. This is where an adaptive design helps. What you can do in the smaller screen experience is rearrange some of the elements to take into account different use cases. It doesn’t mean you have a totally different website. All you’re doing is taking this core use case and adjusting it to what makes the most sense on each device.

Forbes claim that ‘having a mobile version of your website isn’t good enough’, fits this line of thinking.

While there’s something to be said for tailoring your content to different devices, you do want to offer your customers the same (search) experience. Customers continuing interaction with your product or service on a different device shouldn’t feel alienated.

One Web – the principle established by the W3C in 2008’s foundational Mobile Web Best Practices 1.0 – recommends making, “as far as is reasonable, the same information and services available to users irrespective of the device they are using.”

How Responsive Web Design deals with this Challenge

Though building apps may seem like the obvious solution, Pete Cashmore (the Mashable guy mentioned earlier) claims it’s better to make a website that works equally well on every device. In short, a responsive web design uses ‘media queries’ to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen.

Resizing a website on a desktop browser, means that the images and content column will shrink, and at one point the sidebar will disappear altogether. You could take things a step further and detect the type of device and change the site’s behavior accordingly, like enabling swiping between columns for touch devices.

Technically, a responsive site adapts its layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule (the @media construct allows style sheet rules for various media in the same style sheet). A fluid grid uses page element sizing in relative units like percentages, rather than pixels or points. Flexible images won’t display outside their containing element. And media queries allow the page to use different CSS style rules based on (in most cases) the width of the browser.

Reading up on Responsive Design, you undoubtedly came across the term ‘media query breakpoints’. Media query breakpoints are adjustments based on the dimensions of popular devices like the iPhone and the iPad. With the huge number of different screen sizes coming out however, that isn’t really a sustainable model. Instead of looking at the breakpoints of popular devices, Luke Wroblewski and other web design evangelists recommends to look at where your design actually breaks, regardless of what screen size it’s on.

Now you know what Responsive Design entails, you might want to test your own website. In a second post, we’ll lay out some great (free to use) tools to get your responsiveness up to date.

In the meantime, you can try Usersnap for free for 15 days. Enjoy!