Responsibly Responsive Design

Responsibly Responsive Design


Monday, March 12th, 2012 at 9:00 am

Zachary Pike

Zack Pike is an Art Director at Piehead

Since ancient times, when users were ‘surfers’ and Netscape still roamed the Information Superhighway, screen resolution has been a concern for web developers.  It was difficult enough in bygone eras to determine how much content could fit onto a screen before the user was treated to an unseemly scroll bar along the bottom of their browser.  A developer had to carefully plan the dimensions of their website to accommodate the four or five monitor resolutions used by the broadest possible audience.

But times have changed.   Technology has advanced.  And, I believe we can all agree, things are a heck of a lot more complicated now.  It seems like everything can connect to the Internet these days (including refrigerators and washing machines), and users are accessing websites from tiny phones, giant televisions, and everything in between.  This device diversity creates a broad spectrum of screens and resolutions that have to be considered.

Enter responsive design.

Responsive design is, in and of itself, a response; by the web development community to the wide gamut of screens arrayed before us.  The concept, first presented by Ethan Marcotte on A List Apart, is fairly straightforward: using CSS media queries, a website can detect a browser’s resolution (among other things) and adjust how the website gets displayed accordingly.  Fonts grow, icons shrink, secondary panels gets hidden, etc., until the same HTML file that produced a desktop website has transformed into a mobile-friendly experience.  Rather than having separate experiences for mobile, tablet, and desktop browsers, one design adapts to the screen it’s displayed on.  You can see a ton of great examples at mediaqueri.es.

It sounds great, because it is great.  There are a number of key benefits to responsive design.

  • It provides better access to your content. By scaling to a wide variety of screens, responsive design makes it possible to create a design that’s accessible from any device.
  • It can save money. Up front, a responsive design is more expensive than a standard, one-resolution website, because IA, design, and development all need to take more platforms into account.  But it can be much less expensive than developing completely separate experiences for mobile, tablets, etc.  If you’re paying attention to mobile users (and you really should be), responsive design could represent a savings for your organization.
  • It’s slick. Being intuitive and cool matters in a tech-savvy market.  A single design that adapts to a user’s device, or even the orientation of that device, provides the kind of seamless experience that modern users expect.

However, responsive design isn’t the be-all, end-all solution for every company.  There are several reasons why responsive design may not be right for your website.

  • Looks aren’t everything. People on different devices have different needs, and changing the way your site displays may not be enough to address those discrepancies.  For example, a PC user looking at a retailer’s website is more likely looking for products and prices, while a mobile user is more likely looking for a nearby store.  Different experiences organized by user priorities would make for a stronger experience.
  • One sitemap doesn’t always fit all. Sitemaps that go ‘deeper’ tend not to do so well as responsive designs.  The navigation takes more precious screen space, and can require more clicks, URL loads, and bandwidth for users on mobile devices (and that’s a real pain when you’ve got one bar of reception.)  For deeper, more complex websites, a mobile-specific experience can employ information architecture structured specifically for mobile devices.
  • A ‘Jack-of-all-Devices’ is a master of none. Some features of tablets and mobile devices aren’t available on desktops, and vice versa.  Responsive design has to bridge the gap, and therefore may deny users features they’re used to.  For example, some responsive designs may not display properly on mobile phones without locking the browser zoom, disabling the user’s ability to pinch and zoom.  Arguably, it’s still a better experience than forcing them to pinch and zoom, but the lost capability may irk some users.

Responsive design may not be for every site, but it could benefit a lot of sites out there, and it’s an important step towards pushing the same content to a broad, diverse audience.  Ultimately, it represents a cost-effective way to reach a wide array of devices.  And since technology isn’t slowing down, that’s more important than ever.  After all, it’s only a matter of time before people start asking whether your website is toaster-compatible.