Here is our take on news, art, ideas, technology, the web, and things we like - join the discussion and don't forget to subscribe to the RSS feed.

ResponsiveDesign

   Jamie Appleseed

Responsive Design

Mobile and tablet browsing is going through the roof. Yet, most websites look and work poorly on these new devices because they were designed to be experienced on a desktop computer with a mouse. The solution is responsive design.

Gartner predicts that “By 2013, mobile phones will overtake PCs as the most common Web access device worldwide”. While I personally think it will be a slower process, there’s no denying that mobile browsing has already reached critical mass. Any serious website can’t afford to ignore the mobile experience any longer.

So how do we design websites that work well on desktop computers, tablets and smartphones? Do we create parallel mobile sites? In some cases, yes. E.g. if we need the mobile experience to be fundamentally different from the desktop experience (mostly relevant to web applications, and not so much the traditional “content sites”). But in all those other cases – all those sites that serve up content that should be more or less identical on a mobile device and a desktop computer, only formatted differently? Well, this is where responsive design comes into the picture.

What is this “Responsive Design”?

Responsive design is a way to make your website look and work perfectly across all the new devices out there without creating and maintaining parallel mobile websites. Instead, you serve up the same website but use media queries (CSS3 technique that enables responsive design) to adapt the page’s layout to the device it’s being displayed on.

If you’re reading this blog post (on our site, not in a feed-reader) on a smartphone or tablet, you’re seeing responsive design in action. Here’s a video of how that works (link to Vimeo):

By adding some clever styling rules to your website, you can make every single page on your website look and work great on all those new smartphones (iPhone, Android phones, etc.) and tablets (iPad, Slate, Eee, etc.). Instead of offering up a limited mobile version, you give mobile users access to your full website but in a layout optimized for their particular device.

Design challenges

When you start implementing responsive design, there are many new design challenges to overcome. You have to approach your site’s design and content in a more holistic way.

If the device is small, you’ll most likely have to collapse that two-column layout you’re using on the desktop version. This one action will dramatically change the flow of your information since the sidebar content is no longer displayed alongside the main content.

If the device uses touch instead of a good old mouse, then you’ll likely need to rethink your navigation. Touching a small link with big, fat, greasy human fingers isn’t as accurate as clicking it with a mouse. You’ll probably want to increase hit areas, but then again, how does this affect the design of your navigation?

Big headers are acceptable on desktops because we have a lot of screen real estate, but on smaller devices these big headers can easily take up the entire screen. If the user can’t see anything unique about the page he just landed on without scrolling because your header is taking up the entire first part of a smartphone’s screen, then you have a serious design problem. Time to rethink your header…

Implementing responsive design

At first, responsive design may sound like a lot of work, and in some cases it is. However, in our experience, if you have a clean (front-end) codebase, implementing responsive design can be done in just a couple of days.

Making spoiledmilk.dk responsive only took 2 days, with an extra day’s worth of additional optimizations that made it scale even better on tablets. Another example is baymard.com, which again took only 2 days.

As mobile browsing keeps surging, ignoring the experience of this user base is going to hurt brand and business more and more. The future of the web is clearly one of fluidity, where websites adapt to the devices that are accessing them. That future that may already be here.

So the question then becomes: How can we afford not to spend those couple of extra days making sure the mobile experience of our website is a good one?

Update: Examples and Resources (added June 9, 2011)

Resources:

Examples:

  1. I’m interested in how you switch the layout of the main navigation as the window size changes. It looks like you’re using jQuery to do this – are you just adding and removing a CSS class? How does it work?

    Comment by Philip Morton

  2. Dear Philip,

    The main navigation layout switch actually happens in CSS. I use media queries to target the size and then collapse / expand the navigation accordingly.

    For smaller screens I do use a custom jQuery plugin for the open / closed state of the menu, but that is essentially just a class being added / removed to toggle the state.

    But the actual layout-switch of the navigation is 100% CSS. Feel free to use the WebKit Inspector or Firebug to see the details.

    Comment by Jamie Appleseed

  3. Pingback: Does your organization have a mobile website? | Spoiled Milk

Leave a Reply

Your email address will not be published. Required fields are marked *