Twitter recently announced that 80% of UK users were active on mobile.
The means every time you tweet a link to your website, the chances are that it will be a mobile device which tries to open your site.
This is a quick guide to what I consider to be the "best practices" for mobile redirection. It's pretty simple.
- Have a mobile friendly site.
- Redirect users who have a mobile.
- Allow users to access the non-mobile version.
- Use "One Web" so people can share URLs.
Have a mobile friendly site
You have a super-duper iPhone 4S and are on WiFi connected to a 100Mpbs fibre-optic Internet connection. Good for you - but you're not typical.
In the UK, we're at 50% penetration of smartphones. That doesn't mean 50% of people have a new iPhone; just some form of smartphone. Many of which have web browsers which are not as powerful as yours.
Even if they do - they're not all on WiFi. Switch your phone to "2G only" and see how long it takes for a page of your non-mobile website to load. If it's more that 12 seconds, people are going to get bored and go away.
Finally, your iPhone doesn't work with Flash content. If you've got Flash as an integral part of your site, you're cutting off a huge swathe of users.
Redirect users who have a mobile.
Users don't get a choice when they click a link. When they see
they have no idea if that's going to your main website or mobile website. They don't get a chance to edit the URL (assuming they know how) to point to an m. site.
It's up to you. You're the webmaster. You serve up a different style-sheet to IE and Firefox, you should be serving up optimised content to mobile users.
Allow users to access the non-mobile version.
Some people - for whatever reasons - don't want the mobile version. While I think you should offer them the mobile version first, you should always provide a simple, persistent, and reversible way to see the non-mobile version.
Here are a few examples:
If your stats show that lots of mobile users are opting to view the desktop version of the site, consider what you are doing wrong? Is your mobile site missing essential functionality that users want?
You should always default to sending new users to your mobile version or, at a pinch, offer them a choice. Not only will it be quicker to load, but it's easier to go from mobile to desktop than from desktop to mobile.
Use "One Web" so people can share URLs.
You need to understand the idea behind The One Web. At its simplest, a URL should always relate to a specific piece of content - but the presentation of that content can be different.
So, example.com/news/latest should work whether its being accessed by a tablet, phone, desktop, or TV - even if it looks and behaves radically differently on each.
Here's why The One Web is important.
- Alice is reading the Guardian on her desktop.
- Alice emails Barbara an article - http://www.guardian.co.uk/....
- Barb picks the email up on her phone and clicks the link.
- The Guardian redirects Barb to http://m.guardian.co.uk/...
- Barb emails the article URL to Carly.
- Carly opens the email on her laptop, and sees this
I have to say, one of the best examples of this is the UK's Telegraph website. The same URL is used for mobile and desktop web. You can share a URL and know that it will work on whichever device uses it.
I've taken a look at some of the most popular UK news sites and ranked them according to how mobile friendly they are:
- The Metro - has no mobile friendly version. It used to - at http://metro.mobi/ - but that now redirects to the full site.
- BBC News - the Beeb have a great mobile news site at http://m.bbc.co.uk/news - but because they don't redirect users from their desktop site, users are unlikely to discover it.
- The Guardian - they have a mobile site, and redirect mobile users. But they use an m. subdomain which doesn't redirect desktop users. They're also missing functionality like commenting
- The Telegraph - beautiful mobile website, auto-detected redirection, One Web URLs, links back to desktop version. Sadly their CMS doesn't convert all video content, leading to nasty surprises like this:
And the coveted number one spot goes to...
- No one. No one does it correctly. We've tried with the WordPress Mobile Pack (which this site uses) to address all the points - but invariably there are things which don't quite work.
In truth, separate mobile versions are necessary while we're waiting for Responsive Web Design to get itself in shape.
Your users are on mobile. If you're trying to squeeze your full site down a 2G connection to render on a 3 inch screen - you're seriously out of date.