In a previous post, we stressed the importance of developing for different screen resolutions; you may have noticed that we conveniently dodged any meaningful discussion of the true screen resolution demon, namely, the mobile device (it even sounds slightly sinister, come to think of it). In this post, we’re back for revenge.
Why Most Sites Don’t Work Well on Mobile Devices
Developing a site that works well on both desktops and mobile devices is particularly tricky. Not only are mobile screens dramatically smaller, but mobile internet speeds are invariably much slower than they are for PC users. This means that big images, videos, or flash content that would normally work fine could take ages to load on a mobile device, sending impatient visitors away (especially if, as is often the case, their service provider is charging by the kilobyte). Add to this the fact that mobile users are usually looking for different parts of your site than they would at their desks – just a map or a phone number, for instance – and it begins to be apparent just how sup-optimal the average website is for mobile viewing.
Just How Necessary is a Mobile Site?
Of course, like having another kid, a separate mobile site will require yet more time and money. Before you make any rash decisions, we’d advise taking a minute to decide if it’s really worth your while. Specifically, consider these two questions:
Question 1: How many visitors are (or will be) viewing your site from their iPhone/Android/BlackBerry?
If you already have a website, start by opening up Google Analytics. Using the left-hand navigation, head to ‘Visitors,’ then ‘Browser Capabilities’, and finally ‘Screen Resolutions’. In addition to being a great tool for seeing what kind of monitors your normal visitors have, this will also let you spot the mobile users; they’re any entry that has a resolution under 500 by 400 pixels.
Keep in mind that this method will likely understate the true demand for a mobile version of your website for two reasons.
- A Chicken and Egg Issue: If your site is painful to view on a mobile device, it follows that few people are going to be viewing it on one. If it were better, who knows, they might be coming in droves.
- Analytics Shortcomings: Some mobile devices don’t support JavaScript very well (if at all). Since the code for Google Analytics is in Java, it might not detect their visit.
One whole mobile visitor!
What if you don’t already have a website (or shamefully neglected to set up analytics)? You can probably do pretty well by making some educated guesses.
- Think about who your users are. Is your target audience full of businessmen and computer geeks (likely to use mobile devices) or all under 20 or over 55 (not so likely, according to this data)?
- Think about what people do on your site. If it’s something that changes constantly – sports scores, news stories, a frequently-updated blog, or photos friends are posting – they’re more likely to do it on a mobile. If it’s something they might do while on the run – finding a phone number or checking directions, for example – that could be mobile too. On the other hand, if you have something like a portfolio or e-commerce site, you’ll probably have fewer mobile visitors.
Question 2. Exactly how bad does your site look on an iPhone/Android/BlackBerry?
Don’t have an iPhone yourself? A quick and dirty way to see what your site looks like on one is to head to the handy testiphone.com and type in your URL. If your site was built using best practices – a div-based layout, in particular – it should at least render reasonably well (if not, maybe you should look into getting a different developer to do your mobile site…). Try doing some basic tasks to see how much scrolling is necessary and whether or not it’s reasonably easy to find the things people will be looking for.
Of course, there’s no substitute for the real thing. If you can get your hands on an actual mobile device, load your site and pay attention to things besides the screen size – how long your homepage takes to load, for instance, or whether your flash navigation behaves as it should. Once you’ve looked at the site yourself, hand the thing to a friend (most likely the one you borrowed it from) and have her look at your site. Ask her to do the tasks you imagine a mobile user doing – say, finding the phone number – and take note of how smoothly it goes. If she starts cursing or pounding the BlackBerry against her forehead, we recommend reading the last part of this article.
Solutions
Option 1: Tweak what you have:
If your site is generally standards compliant, it probably won’t look half bad on most mobile devices. As it stands, manufacturers are in a mad scramble to make their devices display normal web pages better than one another; those devices that don’t do so well will probably head the way of the dinosaurs in the next few years.
That said, here are a few practices that will make your site work better for mobile users:
- Keep things light: This is, of course, something you should be doing anyway – there are still plenty of people out there browsing at 56k, and even users with broadband are incredibly impatient. It’s all the more important in consideration of your mobile users given that their speeds are still significantly slower.
- Make tasks ridiculously easy: If people have a little trouble your phone number at their desks, it’s going to be a nightmare on a mobile phone. Make important tasks glaringly obvious, cut unnecessary text, and follow the other advice in this article that will be just as useful for standard users.
Option 2: Bite the Bullet and Build a Mobile Site
Despite the lengths we’ve just gone to just deciding whether or not take this step, actually building a separate mobile site doesn’t have to be all that hard. If you’ve decided it makes sense for your users, delay no longer: happy mobile users are worth a little extra effort.
In an upcoming article, we’ll be looking at several options for Drupal sites that make this step relatively quick and easy. Stay tuned!