Best practices for making a mobile-optimized website

Why is this important?

With more and more people using the Internet with their mobile phones, more and more sites are launching mobile-optimized versions of their service. The importance and numbers of people using mobiles to browse the web has recently been debated by Tomi Ahonen on his Communities Dominate blog and Dean Bubley who disagrees with Tomi on the numbers (continued here and here).

Best practices checklist

This is all very good, but whatever the numbers are, it’s clear the mobile web is increasing in importance. Personally, after some years of skepticism, already a couple of years ago I found myself using the mobile browser daily. Unfortunately, there are some quite annoying and seriously debilitating trends in that space. If you’re planning on making a mobile-optimized version of your site, consider the following list, which from my point of view captures some of the most important best practices when doing so:

  • Make a light-version of your site – light in terms of size, that is. Make images smaller, optimize the page structure, skip some videos, cut some ads etc. Websites exceeding one megabyte per page are not a joy to download over any wireless connections. Yet, don’t make the pages too small either – few things are more annoying than having to read a short article that’s split to something like seven pages to keep things “light”; the RTT delays over wireless networks are way higher than over fixed and page transitions are slow.

  • Don’t skimp on the content. Having a “light” site doesn’t mean you should leave out content from it. Some service providers apparently think that mobile users don’t need all that content – wrong! It’s a sure way to annoy people if you put one tenth of your content or shortened versions of articles on the mobile site.

  • Take it easy with the ads! I’m all too well aware that mobile advertising is one of the big things in both advertising and mobile operators’ future business. Small, relevant advertisements are acceptable and might even be welcome, but simply porting the current web-situation to the mobile side is unacceptable. I’ve seen some non-intrusive, well-placed and relevant ads on NY Times and some downright horrible ones on other sites. Also, remember that even a relatively small ad takes up a huge portion of the small mobile screen, so keep things small.

  • Don’t use Java. I thought Java applets were dying anyway, but it seems at least some braindead banks (ahoy, Sampo!) plan on requiring Java as a “security” feature. Having Java applets perform any critical function will effectively block out all mobile users.

  • Consider a client if your service would significantly benefit from it. A case in point is GMail – it works tolerably via the browser, but it works wonderfully with its own downloadable client. Not everything is ready to be run on browser on the mobile side quite yet.

  • Make the redirection to the mobile site automatic.. This is one of the most important things and if done right, does not conflict with the point below on being able to access the full site. On the way to making mobile web work well, there understandably have been – and will continue to be – some wrong turns. One of these is the launch of .mobi TLDs (top-level domain), meant for mobile-optimized websites. This is, in my opinion, entirely unnecessary – users shouldn’t be forced to enter a different address when using a phone to access some site. Those running a website shouldn’t be forced to run the same content in two different domains. If you must have the mobile site at a different address without automatic redirection, use simple and short addresses – things like m.site.com are light years faster to type on your phone than, say, http://www.kirjasto.oulu.fi/tekstiversio/plain.html.

  • Allow access to the full site. Some people may not want to visit only the mobile-optimized site from their device but would rather have access to the full one; it’s wrong to force a user to only access the mobile version. This is even more so if you break the other rules. It should, therefore, be possible to easily access the full, standard site via a link from the mobile site. Google does this well by putting a link in their mobile version that allows you to access the regular version. Many others have still not gotten there, even though it’s an exceedingly simple thing to do.

Examples

Let’s take a couple of examples of mobile-optimized news sites and see how they rank according to the above criteria. To start with, consider one of the most popular news sites, CNN.com. When you access http://www.CNN.com from a mobile browser, you’re directed to http://cnnmobile.com/. So far so good, considering the basic CNN main page is quite heavy. But afterwards there’s nothing but disappointments to be found here: there is very limited amount of content available, it’s spread over too many pages and way too much of the space is taken up by ads. CNN is a prime example of how NOT to create mobile site. Also, there’s no way to access the full version of the site from the redirected site – to do that, you have to manually enter http://edition.cnn.com/ – not very intuitive. Anyway, take a look at the crowded screenshots below – there is very little useful information on any one screen as the page is filled with other crap:

BBC News has a few versions optimized for different devices, maybe even too many. There’s the full-blown version at http://news.bbc.co.uk/ and a low-graphics version at http://news.bbc.co.uk/text_only.stm . Then there’s a PDA-version at http://www.bbc.co.uk/mobile/pda/, a mobile optimized version with images at http://news.bbc.co.uk/nolpda/ukfs_news/hi/default.stm and without images at http://news.bbc.co.uk/low/english/pda/default.htm – which one of those is one supposed to access?! It’s a trial and error process and not a very convenient one at that. If you access the main website, http://news.bbc.co.uk with an S60 mobile browser, you get to http://bbc.co.uk/mobile, which is a crappy WAP version of the news site with few and tiny images and no way to get to the real version. Not good. See below for screenshots:

A better example is NY Times; when accessing http://www.nytimes.com/ with a mobile device, you’re taken to http://mobile.nytimes.com/ which is a pretty usable mobile version. The advertising (when there – there are very few ads) is not intrusive and the pages contain plenty of text and stories – I’m not sure if it has all the textual content that is on the regular version, but it certainly has enough. The stories are split to pages, but the pages are reasonable in their length so that’s okay. Moreover, “paging” is just the default setting that you can change, another plus. There are also some images which is nice. Something I’m not, however, able to do is access the full version with the mobile browser.

Overall, many sites do some things right – like directing automatically to a mobile-optimized version without having to memorize a mobile site URL, but also some things wrong – like not (easily) allowing access to the full version of the site. Of the news sites, the CNN mobile version is quite useless while the NY Times one is already pretty good; BBC News falls somewhere between the two, but only if you access the right mobile version which you have to choose yourself – for S60 browsers, the one at http://news.bbc.co.uk/nolpda/ukfs_news/hi/default.stm works best IMO.

One more potentially lethal misstep that should be mentioned is content adaptation / mobile browsing gateways by the operators. They might work to some limited extent for very simple browsers, but some operators are planning on using these gateways to e.g. inject advertisements. A very bad idea. If you find a website that doesn’t “mobilize” well for your device, you can always use operator-independent mobile optimizers; Opera does that, Mowser used to do it and Google does it also. With increasing number of websites mobilizing reasonably well and as you can use operator-independent services for others, why should you tolerate an intrusive operator-run content adaptation gateway?

Btw, Google also does some decent site “mobilization” if you need such a feature – and finally, it might be worth to check out their other mobile services from http://mobile.google.com/ also.

This entry was posted in ICT-stuff, mobile. Bookmark the permalink.

14 Responses to Best practices for making a mobile-optimized website

  1. Valentina says:

    Hi Sami,
    Thanks for posting this — just the type of info I was looking for. I am in the midst of trying to make a mobile version of our academic library’s website — very simple, mind you, since I am a total newbie to this part of web development. So out of all my research, I surmise I ought to have a version that is in WML to please some phones, and a minimalistic XHTML version to please the newer phones. can I have both sitting in the same place and hope a redirection script will know to filter users to the most appropriate version (.wml or .xhmtl) based on the device info? To complicate things, our site runs on a central institutional server that does not allow us to run scripting, so even using the detect/redirect script is probably undoable.
    If you want to see what I have so far, please email me.I hope you don’t mind me asking you for suggestions, since there are definitely pieces of this puzzle missing [:-0

    Thank you!!

  2. Rial says:

    Overall, this information that people should to know…. But i don’t understand why you suggest to not use java… I think all the OS use this one… thank you

    Anyway, for another information about PDA, please visit http://www.pda-is-smartphone.com

  3. sim says:

    Rial, on the back-end Java is fine. And even mobile applications written in Java are fine. What I meant is not to use Java applets embedded in the web page as some still do. Not only do they not work on the phones, they are also a real pain on “regular” browsers.

  4. Hey! great blog- there are more and more mobile sites popping up every day- and i’m compiling them all at seego.com – let me know if you see anymore or if you’d like to be included.

  5. Wes says:

    I’ve got a mobile version of my site, but not a separate URL (as suggested); however, I just discovered that this may be necessary to better use Google Analytics for the mobile. I’d rather not have a separate URL – any suggestions?

  6. super blog – thx

  7. christina says:

    nice post, you should also take a look to http://www.mobilova.com ,it’s one of the best solutions on the market to create and monetize mobile versions of websites.

  8. Hi! I just started working on a mobile site for my company. How does one set up an automatic redirect for mobile users? I’m trying to make this as user friendly as possible. Thanks for the blog post, it was very informative and well written (not to mention easy to scan)!

  9. Wes says:

    @Katlin: what platform is your site on? asp.net, php, etc?

  10. @Wes: You know, I’m not sure. Would you reconmend a link I could sent my web developer to learn how to automatically redirect mobile users to a mobile specific version of our website?

  11. Wes says:

    This explanation is not bad: http://www.stepforth.com/resources/web-marketing-knowledgebase/redirect-mobile-iphone-visitors-mobile-content/

    Hopefully, you use php – seems to be the easier solution.

  12. Thanks @Wes for the info!

  13. Pingback: More Resources about Developing Smartphone Ready Sites | Blog CodeMyImage

  14. You’ve created it crystal clear also as simple to follow together with

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>