Mobile Sites vs. Media Queries

Tweet

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:

Iced tea at Georgia's

You think you're so smart? Let's see you try to IM with gloves, while you're holding a cup of coffee, and trying to squint through these funny-looking glasses

Snow and Things 19

Mobiles on Monday Morning

Pavement Texting

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Felix

    I think that except for some blogs and personal pages, every website needs a dedicated mobile version.

    CSS media queries still have a place, desktop users have a wide range of monitor sizes, and that’s where they will shine.

  • Ralph

    Perhaps it’s appropriate to have a separate mobile version of large sites, but for smaller ones, I’m still looking at a combination of media queries and CSS. I’m still processing and experimenting with this challenging talk from Yiibu called Rethinking the Mobile Web, which is worth a look:

    http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

  • Lachlan

    But you also have to remember that if you’re just using CSS media queries to simply change the layout, the elements such as images, scripts and CSS that are shown only on the desktop version of the site are still being downloaded by your phone, even though they aren’t necessarily being displayed or used.

    So in essence, if you don’t address this, you’ll be making your site prettier for mobiles by adding MORE CSS for the phone to download. In that case it would be faster for the original unmodified desktop version to download and display, but it may be far less usable on a mobile platform.

    On a side note, why are line breaks not preserved when previewing comments?

  • Steve

    Great article! I like the insight about “it’s the context in which it is used.” In my opinion, this point is the most important factor which to often gets overlooked.
    I think as smart phones continue to mature (html 5, hardware advances) it’s going to be harder to create a single contextual site
    (one site fits all approach). It’s worth looking at MobileInDesign, http://www.mobileindesign.com, which does a good job showcasing mobile website trends.

  • Dianne B Volek, InterComm SA

    I keep getting told by clients to QUICKLY put together a mobile version of their website. It’s money for me of course, but because I’m an honest soul I show them their statistics. Despite the “fact” that mobile is huge in Africa because only a small percentage of people have internet access and computers at work or at home, the average number of visitors viewing the website on a mobile is is 4. Not 4%, just 4 people. In a month. Usually half are blackberries. Most visit several pages so they aren’t being “turned off” by the full site.

    Mobile at least in South Africa just isn’t nearly as big as the hype. But I guess it keeps web designers in work designing and maintaining two sites per client instead of one. If you’re a client, ask to see your mobile analytics first ~ if readers click away after page 1, that means you’re losing prospects because of content or design.

    I LOVE websites as marketing tools because we have all these great stats we can use, to do the right thing for our clients.

    BTW one of my clients is Harley Davidson – logically they SHOULD be huge for mobile and are in fact optimised for mobile, but they just aren’t. You just can’t assume, you have to use the stats!

  • http://twitter.com/FciscoG Francisco G.

    this article started well, but ended flat. you asked a question and never answered it. You basically wrote something just to get web traffic. It was a waste of my time.