Mobile Web Development: When One Size Doesn't Fit All

You already have some conception of who you're trying to reach—on which devices—and what your mobile content strategy looks like. You also know you need some kind of device adaptation to offer something compelling and desirable to customers regardless of what device they've used to get to you. Now, what's the best way to make this happen?

Handling and managing visits from many device types isn't new and there are some proven approaches and techniques. 'The year of the mobile' has been on replay a few years running, and finally we're now seeing significant volume of traffic—25% and upward—coming from mobile devices for mainstream services. Along with this comes increased attention to the subject and some great new thinking and ideas on how to best handle device adaptation.

Let's take a look at the major strategies and get you started with the right information to make some informed decisions about what might work best for you.

It all started with server-side (vs. client-side)

Back in the good ol' WAP days (Wireless Access Protocol) server-side really was the only choice.

Most commonly, this meant matching a device identifier (user-agent string) against an open source database of device meta-data (usually WURFL) to help make decisions based on defined device categories at the web-server layer, and then re-directing the request to the most appropriate site optimised for that device type. That's a full server-side approach.

As browser technology improved, and JavaScript support became more ubiquitous, it became possible to adapt the rendered page with basic interface tweaks based on detected attributes/features or alternatively perform simplistic device detection and re-direction without tricky and expensive server-side kit.

Along came CSS3 & Responsive Web Design (RWD)

Fast forward a little and—some—browser technology improves with CSS3 becoming better supported. With this comes a new 'Responsive web design' approach heralded by many to be mobile web development's messiah. In essence, this takes the client-side JavaScript approach described above and augments it with all the possibilities that CSS3 offers. This idea was popularised by Ethan Marcotte in his A List Apart article.

It's a good technique, and often well liked among visual designers and front-end developers because it relies on a familiar toolkit and doesn't require server-side jiggery pokery. It's impressive, suitable and appropriate under certain circumstances, but a saviour for all it ain't.

That is the basics covered

Each of those approaches has merit, but alone, they may not offer a broad enough solution. A big problem with RWD is that it's still not supported on a lot of devices (notably older devices or anything running Windows Phone OS) and there can be significant performance issues caused by often heavy page-weight and additional web resource requests (usually CSS) required for this approach.

Full server-side won't get you out of the woods either. There's usually significant cost and ongoing maintenance required if this is deployed for large-scale sites and it's not necessarily foolproof or 100% accurate. For it to work well, you'll need a robust device categorisation strategy and stand-alone optimised versions of your website to point devices at. This often implies yet more operational cost in publishing and maintaining separate sites.

That's to say nothing of how quickly the landscape is changing as mobile devices are becoming increasingly more ubiquitous and divergent. Just as we were all breathing a communal sigh of relief at recent improvements to browser technology (from WAP/WML to HTML5) the popularity of new form factors like tablets, tethered mobile clients, IPTV etc. begin to emerge into the mainstream. We are now challenged with defining appropriate content strategy for new contexts of use and figuring out how to serve up meaningful content to end-users in this brave new world. Along with this, the margin for error is ever decreasing as customer expectation increases in-line with mobile usage trends.

Newer thinking—Mobile First

Progressive enhancement isn't a new idea and at its core it says: 'make a baseline product or experience as compelling as possible, then improve upon this conditionally or selectively as appropriate'.

This idea is at the heart of 'Mobile First', a design ethos that suggests we should design first for mobile then adapt for other devices like desktop PC and so on. Mobile first is great. It's also a fairly radical approach, especially for large organisations with mature and established web properties.

Hybrid approaches offer the best of both worlds

We've established earlier that putting all your eggs in a single basket may not cut it, as there are various benefits and limitations for each approach. Exploring a hybrid solution—taking the best bits of several approaches—may serve you better now and into the future.

One such approach is to use server-side detection to make the first decision—separating feature phones (pointing to a basic XHTML MP website) from smart-phones and anything else that is not a desktop PC (pointing to a HTML5 mobile site).

From here, progressive enhancement techniques can be employed to the HTML5 version only, making it possible to support standard smart-phones while also conditionally adapting—progressively enhancing—to something more meaningful for devices that are more powerful or have a different form factor. Now you've got the best of both worlds: fast server-side detection and redirection; a safe and reliable code-base for any device; and adaptive interface rendering to support high-end devices and new form factors.

Pushing the envelope

There are some incredibly smart folk who are working on some very slick advanced hybrid solutions. What's great about these approaches is that user needs and behavioural trends (i.e. we all use mobile a lot more, and want more from it) informed the technology, and not the other way around. It's always good to see genuine work toward making things better for humans first.

Helpful people on this topic

Note: This article was written in the early days of responsive web design. Some of these resources no longer exist, but the people remain influential in web development.

• Jason Grigsby (Cloud Four)
• Bryan and Stephanie Rieger (Yiibu)
• Luke Wroblewski
• James Pearce
• Peter Paul Koch (PPK)