A hybrid approach

Responsive web design is great — right now it is the best technique available for making layouts look as good as possible in a variety of circumstances. If your mobile and desktop use cases are similar enough, this is definitely the preferred option for layout changes. However, it can be a pain to use client-side techniques to alter site content to fit the user's context.

Luckily, we aren't technically constrained to using client-side techniques here: another option is to use server-side user-agent detection to show the user the proper content. This keeps the complexity of altering content on the server side, but still allows our layouts to benefit from the flexibility and future-readiness of responsive design.

Using user-agent detection specifically for content and not layout also allows you to have a single URL for each piece of content, so that the content can adapt its layout to the user's browser. This is generally thought to be a good thing. Instead of maintaining two completely different sites, we redirect users to pages for the content they care about. And since the design is responsive, you know that each page looks as good as possible on the user's screen.

We can also address some of the performance problems with responsive design by incorporating server-side techniques. For example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway. One such technique for dealing with this issue uses server-side user-agent detection along with the WURFL device capability library to send a properly sized image for the user's device. A range of products are also emerging which provide this as a service. Of course, this technique suffers from all the downsides associated with user-agent detection. But even if it does not work, it is no worse with respect to performance than only using fluid images.

By combining the techniques listed above, we can get a mobile web development strategy that is both more flexible than pure separate sites and has better performance than pure responsive design.

One downside of mixing approaches is that it can lead to an increase in the number of code paths, both on the client and server side. This can make it more time-consuming to develop than other approaches. With proper planning, though, the code can still be organized in a maintainable way. Another downside is that because this approach relies on responsive design, it typically works best on a new project or one that has an existing flexible layout, not as a retrofit. Similarly, because it uses user-agent detection, you will have to update your detection rules as time goes on.

Combining server-side and client-side techniques is something that is always worth considering; there are so many options that one must just weigh the pros and cons of each individual technique employed.

In many cases, the added complexity of the hybrid approach is not even necessary. For example, you may not even need to adjust your content based on what actual device a user is using — just knowing whether a feature is present on their browser is often good enough. This is something you can discern on the client-side using JavaScript feature detection. It can't hurt to dig down and ask yourself which axis you are actually looking to adjust your content around.

We've talked about incorporating server-side techniques into a responsive design, but there are even ways to use the hybrid approach if your use cases for mobile and desktop are very different. You could, for example, increase the flexibility of your separate site designs by incorporating media queries and a flexible layout. You may even be able to make your mobile site design adaptable enough to extend comfortably to tablets as well.

For Mozilla's Web O' Wonder demo site, we tried out a basic version of the hybrid approach, with positive results. We used some elements of responsive web design to give the site a mobile layout, along with user-agent detection to provide mobile-friendly videos and to re-order the demos if the user is on a phone. Feel free to check out the source code on GitHub.

We could also be doing more development involving this approach very soon! In fact, one potential path for the main Mozilla site is roughly outlined in the "The Good" section above:

• Using user-agent detection, route visitors to a landing page for the Firefox version for their device.
• Every page on the site should look great at a wide variety of resolutions, being built with responsive design in mind.
• Future plans include exploring serving images based on user-agent.

So far there is not much to see for mobile, since things are still in the formative stages of development, but you can always watch the new mozilla.org grow up on GitHub. Subscribe to the Mozilla Webdev blog for updates about our progress.

No approach is a one-size-fits-all solution. Web applications that want to heavily modify the content or user flow for mobile users should probably go for a separate mobile site. Content-oriented pages that don't need to modify their content for mobile users will be satisfied with responsive design. If you need to slightly alter the site's message for mobile users, but want to reap the benefits of a responsive design, a hybrid approach may be your best bet. Decisions like these are at the heart of mobile web development: be specific about what you would like to accomplish, and pick a practical approach while being aware of the tradeoffs. Good luck!

See the following articles for background and other approaches to developing for mobile platforms.

• What is mobile-friendliness?
• Responsive design

This article was originally published on 27 June 2011, on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 4 – A Hybrid Approach", by Jason Grlicky.