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.
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!
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!
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.
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.
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.
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".
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).
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.
16 thoughts on “Don’t Leave Home Without It: 8 Steps for Making Your Site Mobile Friendly”
Good tips. It’s important to remember to not make your CSS fixed pixels unless you’re creating several version for several mobile device profiles.
Spectacular tips! I’ve been sitting on the fence wait too long to get some mobile applications running on my site.
I like that you mentioned m.twitter.com since it’s the site I visit most on my LG Voyager. Like you mentioned, it’s easy to type and it loads small and sweet.
I’d probably visit some of the other sites more frequently, but again for the reasons you mentioned, I just don’t bother. If it’s too tough to type I just go with the default news provided by Reuters or other on my phone.
This is a wonderful article on being Mobile Friendly. I’m surprised I didn’t see it faster.
Great work Pierre. Bookmarked and will be used as a future reference. Thanks a ton! 🙂
With the increasing demands for Iphones and Blackberry, the market of mobile technology has grown tremendously among the young consumers. People are using mobile phones to surf net daily and this lead us into thinking of having a mobile platform for our site too. Tap into mobile network while it is still growing, it helps. Thanks for sharing.
good points. i only started browsing the web via 3g on a mobile phone recently. and you’re right, a lot of sites just don’t make the transition very well. and the ones that do are the ones i keep going back to.
Well with full browsers like Safari on iPhone a lot of these aren’t issues anymore. But WOW I never thought of how hard to type the .mobi domain name is! I hate waiting between key presses to get 2 letters that are on the same button (i.e. ‘m’ and ‘o’ on 6)
I personally don’t use my mobile too much for internet access and so was unaware of the tips that would be necessary to make the website mobile friendly. However after reading this article I feel that a lot of potential damage control can be done if you just follow these tips.
I have to echo what everyone else said, excellent tips. And i so hate texting messages without the predictive text that I know exactly what you mean about ‘don’t make me type:)’
Wonderful tips, i have a small query, instead of making the CSS e.g width=250px; I think we need to define the attributes in %, so that we will have the site/page compatible in different versions or mobile devices. and the look and feel of the page will be consistent.
is this correct guys?? Please let me know..
This is extremely comprehensive and the right solution for many. But if someone has a blog that they want mobilized, a quick solution is to use Mippin Mobilizer.
It’s free, makes blogs look awesome, offers advertising, and opens up your blog to loads of new mobile traffic. This is because there are already large numbers of people using Mippin to access and connect around Mippin mobile content on their phones. And it all gets search indexed as you’d expect.
Check it out, tell us what you think – if you’re a blogger of course…
Some interesting thoughts; I haven’t even considered the idea of mobile traffic. It tells you in Google Analytics what browsers your views are coming from, are you getting any from mobiles?
Well i work for Mippin, so slightly biased of course. But we have one of the largest numberS of users checking out blogs on mobile phones in the USA and UK. The http://mippin.com site on mobile phone browsers is very busy!
Comments are closed.