Don’t Leave Home Without It: 8 Steps for Making Your Site Mobile Friendly

I've been thinking about making websites mobile-friendly lately. It's been brewing for a year and it registered as a major issue back in March when I got a new mobile phone and actually started using the web while mobile. Let me tell you this: most sites, mine included, suck when viewed on a mobile phone. It's a horrible experience, and given the astonishing rise in mobile use, you and I, the people who build websites, better get our act together.

So what are we to do? Lots actually. In this post I'll review some things to think about and start testing. It's not comprehensive and I want to learn from you in the comments and trackback as much as I want to share with you what I know so far.

1. Don't Make Me Type! If Don't Make Me Think is the Holy Grail of usability, the big prize in mobile computing is not making users type too much. The text/data entry interfaces for mobile are rubbish. Sure you can tell us about the stupid weather in 140 characters and less or send me an SMS message that says "b there in 5. c u soon.", but it's still not fun to input text using a phone's keypad or a tiny keyboard.

   So what can you do to make users type less? The biggest kicker is URLs. Try typing "washingtonpost.com" without the T9 predictive text. Typing "nytimes" is better, and "news.bbc.co.uk" is not fun either. Key Tip no. 1: avoid character sequences that are inputed using the same key. So no repetitions like BBC and no different-letters-from-the-same key like mom (6-wait-6-wait-6; probably the slowest 3-letter word to type). Keep the URLs easy to type with single taps!

2. Build Sensible URLs. And don't Use .mobi. Seriously, which moron decided that for mobile phones with difficult text entry, it's good to have the longest TLD? Why not create a 2-letter or, better yet, a 1-letter TLD instead of the 4-letter monstrosity that is mobi? Regardles, you must think about how to structure your URLs.

   Some examples: mobile.nytimes.com (bad, same reason as .mobi), plurk.com/m/ (better), m.twitter.com (also good), politico.com (best), twitter.com (yes, that works too), and google.com/xhtml (why do I need to know what XHTML is and how is that related to a mobile phone?). Why are twitter.com and politico.com the best? Because the same site is both the standard site and the mobile site - the server does the work of deciding which page to send. A good mobile phone UA sniffer will do wonders here and there are plenty of them around. Downside is that politico.com doesn't work on all mobile browsers, so use it as a URL illustration example.

   So definitely keep the URLs short. Example, if you can get away with using example.com/contact instead of /contact.php or /contact-us/, then do that.

   SEO-wise, how would handle the URLs? Going to nytimes.com forwards to mobile.nytimes.com. What kind of forwarding should you do? What about about mobile-specific crawlers - how would handle them? Will it create indexing issues? I don't know but definitely something to test!

3. Keep it Short and Sweet. These days with increasing 3G market penetration means that mobile users can download a good chunk of data reasonably quickly; HSDPA for example can hit an awesome 14.4 Mbit/s. Don't abuse that though because the mobile devices are still weaklings. Sure they can download 90kb of Sphinn HTML, plus the images and CSS quicly, but that tends to hang the browser and the phone for a few seconds while the browser lays out the page. For those old enough to remember, a great analogy is a 486 connected to an ISDN line. So Key Tip no. 2: Keep your pages small.

   Also, don't use Javascript simply because mobile browsers don't support it, and if they do, not well. Sure Minimo and Opera can deal with JS but it's just a slow down and will eliminate most of your other mobile users. If you still decide to use JS and you are using server-based browser detection (like politico.com), make sure your page degrades gracefully if JS is not active. This is particularly true for AJAX applications.

   Flash? Nooooooo.

4. Use CSS. Pocket Internet Explorer, Minimo, Safari, and Opera all support at least a decent subset of CSS. Use a separate stylesheet as it gets cached and saves bandwidth. Speaking of caching: mobile browsers are aggressive cachers so if you have an application that breaks with too much caching, know you have to work around that a bit.

5. Screen Resolution Independence. Mobile phones come in a range of resolutions and aspect ratios. How do you deal with that? Key Tip no. 3: Lay out your page linearly. For a standard browser, you can think in two dimensions (e.g. float thing left and right) but for mobile phones think simply above and below in a straight line. Keep the most important things at the top because browsers routinely hang half-way through the download so make sure whatever is downloaded first is useful for the user.

6. The Big Easy: big targets on small screens. Let me introduce to you, again hopefully, Fitts' law, which we can loosely interpret as bigger targets are easier to click. On a small screen, if you have a link or a button or any other important page element you want your users to be able to interact with, make it big. A good example: the GMail (gmail.com) mobile phone login form.

   Here is a secret: mobile phone users don't want to be caught dead using a stylus if we have a touch screen. What do we do instead? Why use our big grubby fingers instead. HTC (a great mobile phone manufacturer) recognized this fact and created the TouchFlo interface tailored for finger use. The iPhone, for all its hype, truely enables stylus-free usage - have you noticed how the iPhone adverts always feature a single finger interacting effortless with the phone?

   So Key Tip no. 4: Big means "Click Here".

7. Use Thorough Navigational Links. If you accept the Don't Make Me Type mantra, then users will navigate your site mostly via clicking on links. Searching is a distant second alternative. So make sure each page has clear and extensive navigational links, both at the top and the bottom of the page to save on scrolling (and on mobile phones, you do scroll a lot).

8. No Hover, No New Windows. See all your wonderful onmouseover effects? No you can't actually. What about all those little helpful tips that open in a new windows? They'll open in a new window. I hope they don't have anything important in them! Yes I know I can do tabbed browsing using Minimo and others, but it doesn't work well: there is too little memory and too little space to cram tabs.

So what now? My aim was to show you just how many different ways your site can break, yes, as if you needed more stress. The thing is though: it is fairly easy to make a decent site that's mobile friendly. The key here is to get a bunch of phones or emulators and start testing. If you're designing a new web application from scratch, design mobile access from the get go.

And start using some mobile sites and see how they work. See what you like and what you think needs work. Nothing beats first-hand experience and it's easy to get the required experience. You don't need to pay through the nose for it: buy a phone that has a WiFi chip and use it on your home wireless network, but remember your users won't typically see this kind of download speed.

That's it from me, and tThe floor is now open for you! Share your tips and thoughts in the comments below.

Pierre Far recently launched Social Alerter. He writes a science blog, maintains a set of SEO tools and moderates at Cre8asite Forums. He's about to launch the beta version of a new web application that's mobile friendly and would love some testers.