In issue 324 of the Tech Times, Louis talked about responsive web design, a technique that lets you serve up different layouts for various devices, using CSS3 media queries. The responsive layout technique has garnered a lot of attention from web developers because it promises to deliver what we’ve been hoping to achieve for some time—building just one version of our content, and having it work beautifully on any device that encounters it. Lots of us have clients who can’t wait to jump on board the Mobile Web bandwagon.
Can we just serve up our entire website with a new mobile-friendly wrapper? Of course we can. Should we? Well … there’s quite a bit more to it than a simple yes or no.
How Do Mobile Users Browse the Web?
As geeks, we like to stay abreast of all the juicy nerd-tacular details of the different mobile and handheld platforms—browsers’ rendering engines, native resolution, support for plugins, whether it allows geolocation, and so on. Mobile devices just keep getting better and better—instead of tiny, slow flip-phones, we’re now enjoying big, colorful screens and fun, intuitive touchscreen interfaces. The iPhone and iPad get the lion’s share of the press and attention, especially among web developers, but there’s a huge range of mobile devices out there, and they all need to be considered.
Yet there’s one thing that every mobile device has in common. Take a look at these people, and see if you can figure out what I’m thinking of:
That’s right—it’s the context in which it is used. None of these people are sitting at a desk; they’re all out and about. It sounds obvious (and of course it is obvious), but it’s still sometimes lost among all the discussions about nifty CSS3 tricks or whether Apple will ever get over its anti-Flash thing.
People viewing your site on a desktop have the luxury of a big screen, a real keyboard, and a mouse, sure—but they also have the benefit of more time and attention. They’re often at home or in a nice, quiet office; they usually have a stable Internet connection; they are less likely to be distracted by stuff going on around them.
By comparison, people using a mobile device are often in a hurry. They’re on their way someplace and they want to know which bus stop is nearest; they’re waiting for a friend at a cafe, and want to quickly check the news headlines; they’re at the pub, and they want to settle a debate over which year Diane Keaton won that Oscar.
What’s more, people on the move are generally still subjected to slower Internet connections. Mobile broadband availability is always improving, but network congestion and signal strength can still affect speed, even in the most well-covered areas. Popular public WiFi networks can suffer from the same issues. And even when these networks are on their best behavior, consuming more mobile data than your phone plan allows can severely punish your hip pocket.
So, while adding responsive design can help the appearance of your site on some mobile devices, it’s still only one part of the puzzle. In some cases, the best way to serve your mobile visitors might be to create a separate mobile-friendly site—one that eliminates unnecessary distractions, puts mobile-friendly content at the forefront, and avoids fat bandwidth costs. To achieve that, you’ll need more than just a few media queries.
How Do Mobile Users Browse Your Site?
If you’re working on an existing site, chances are that mobile users are already visiting in droves—and that number will only get larger as time goes on. Use your favorite statistics package to see which pages and features of your site are popular among mobile users. Chances are that you’ll see that the issue of context is reflected in their usage patterns—for example, if you’re working on a venue’s site, contact details, opening hours and directions will be most popular among this group.
Look also to similar sites to yours—do they have a mobile version of their site? What features do they include or exclude from their mobile sites? Are these sites successful? Do you find it easy to navigate these sites on a mobile device? Try to imagine using these sites on a train, in the street, or at your favorite watering hole; better yet, visit them while you’re actually doing these activities. Does it seem easy or challenging to use this site in that context?
Think also about your own favorite mobile sites—step back and take a critical look at them. What is is about these sites that you find most useful? How does navigation work on this site? How does it differ from the desktop version? What’s been excluded or included? Do you miss anything that was omitted? You’re likely to find that there’s a big difference between the two versions of these sites—everything from the number of items on the homepage, to the arrangement of the navigation, to the use of images and styles. You might also pick up some neat ideas for the mobile version of your own site—be sure to take copious notes!
Can Media Queries Cut the Mustard?
Once you have an idea of what belongs on your mobile site, look again at your desktop one. What would you need to add or remove? Does it still make sense to provide a desktop-like experience for your site? Are there cool techniques you’ve seen around the Web that you’d love to include in your site? Most importantly—can you achieve all this simply with clever use of stylesheets?
The answers to these sorts of questions, and more, will help you decide whether to rely only on mobile-friendly styles, or whether to take it a step further. We’ll bet you, though, that you’ll come up on the side of building a new mobile experience more often than not.
Photos: Creative Commons-licensed photos by Ed Yourdon, Morgan Everett, Adam Tinworth, and kamshots, from Flickr.
Raena Jackson ArmitageRaena Jackson Armitage is an Australian web developer with a background in content management, public speaking, and training. When she is not thinking about the Web, she loves knitting, gaming, all-day breakfasts, and cycling.
