Mobile Web: Responsive Design or Separate Pages?

In the past few months, we've seen a dramatic increase in interest among designers and their clients in mobile and tablet websites. There's also been a surge in books on related topics, such as Ethan Marcotte's excellent Responsive Web Design.

In investigating our customer's needs and looking at a variety of design approaches, we've found that responsive design is the answer for some situations, but that a separate set of pages is more appropriate in many cases.

Responsive design: sometimes the best approach

Responsive design takes the approach of using a single HTML page for all devices, but delivering different CSS for different devices, typically using media queries to differentiate based on browser dimensions. It also involves letting the browser scale images for different layouts. For something like a blog, this is a great approach.

While these techniques work well when the changes for the mobile site are modest, in many cases the mobile site should be more drastically different than responsive design readily supports. Mobile sites have such dramatically reduced screen real estate that they require ruthless trimming of everything that is non-essential.

Crafting an optimized mobile design

To choose what is most important and what is non-essential, you must understand the top tasks for your visitors. The top tasks for a visitor using a phone often often will be different than for a desktop visitor. For example, for a restaurant site, a desktop visitor may want to see a slideshow of photos, or a video tour, to get a feel for the restaurant. A mobile visitor is more likely to be looking for directions, a phone number, a way to make a reservation, and a look at the menu.

Thus, we have found that it is often better to create an entirely different set of pages for mobile users. This may seem like more work, and duplicate sets of content to display. In fact, it is often easier that making a responsive design work well, and if the content is primarily coming from a database, it may not require any duplicate content entry.

Automatically providing mobile pages to mobile devices

To facilitate this approach, we've added to the Webvanta system automatic detection of mobile devices, using server-side code that looks at request headers. The system then delivers a different set of pages, within the same site, to mobile devices.

For some examples of sites using this approach, take a look at:

• MI EnergyCore, discussed in a recent blog post
• Our own site
• A prototype restaurant site

With a phone-optimized site taken care of, the next question is what to do about tablets, which I'll discuss in my next post.