Best practices for the Mobile Web

As I have occasionally mentioned (in The freedom of mobile Internet access, for instance), I frequently use my mobile phone to browse the Web. It works really well on modern sites that are accessible, use semantic markup, and separate semantic and presentational markup. It works reasonably well on many other sites, and is a real hassle on most sites.

There are differing opinions on what is the best way of catering to people using mobile phones and other handheld devices to access the Web. I believe the One Web principle is worth working towards, while others think handhelds and desktop computers should get different content. I personally much prefer getting the same content whether I am using my phone, my iBook, or my desktop Mac.

Anyway, for anybody interested in reading up on current best practices for building websites that will work well on mobile devices, the W3C document Mobile Web Best Practices 1.0 (currently in Candidate Recommendation status) contains plenty of good advice.

There is a free-standing Summary of Statements that outlines the advice given in the Best Practices document. If you take a look at that document you will notice that lots of the advice will also improve accessibility in other contexts. A few examples (there are many more):

  • Link target ID: Clearly identify the target of each link.
  • Pop ups: Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
  • Scrolling: Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
  • Use of color: Ensure that information conveyed with color is also available without color.
  • No frames: Do not use frames.
  • Tables layout: Do not use tables for layout.
  • Non-text alternatives: Provide a text equivalent for every non-text element.
  • Objects or script: Do not rely on embedded objects or script.
  • Valid markup: Create documents that validate to published formal grammars.
  • Control labelling: Label all form controls appropriately and explicitly associate labels with form controls.

I can testify that new windows are even more annoying in a handheld browser than in a desktop browser. I use Opera in my Nokia 6680 and it does display a menu of the “windows” that have been spawned, but it’s very difficult to notice that a new window has been opened to begin with. Just don’t do it, unless you really have to.

Since catering to mobile phone users may well be seen by some organisations as more important than making their website accessible to all, let’s hope they take the advice in this document to heart. In doing so they will improve accessibility for all, whether they like it or not.

Posted on October 26, 2006 in Accessibility

Comments

  1. I must say I’m more in the One Web camp than any other at the minute. That said, I personally can’t get on with mobile web browsing simply because it costs a fortune! I got a Nokia 6680 primarily to get up to speed with mobile web browsing, only to be floored by the astronomical cost of my next phone bill! Sadly, I’ve stayed firmly away from it evey since : (

  2. I fully agree that the “One Web” approach of serving identical content to all is a worthy goal, but in practice the range of capabilities of devices out there - and more importantly, the varying support for specifications across so many different platforms - makes it very difficult to achieve.

    As just one example, IE Mobile will read and apply styles specified for a media type of “screen”. As a result, to try to get any reasonably complex CSS-based design working on it, the stylesheet for media type “handheld” has to override a large amount of the other stylesheet’s rules. This increases the overall download size - and yet probably the single most important thing to do when serving to handheld devices is to minimise the amount of data, due to slow connections.

    As far as I have been able to determine from the IE Mobile team’s blog, they still seem to have the idea that CSS is used solely for typography and colours, and that their proprietary table-dismantling algorithm will sort out any layout issues. This is, of course, not the case.

    For the moment I find myself serving the same HTML, but having to actively select which CSS to use by sniffing at the server. (Luckily my client’s CMS was designed with this kind of thing in mind, so I’ve only got to add some logic to my XSLT.) This is far from ideal, but I think it will be at least a year, and probably two, before we can truly move towards the One Web approach.

  3. I definetely agree with you! The will of broaden the mobile web users may help increase accessibility for all.

    We should expect several unexpected ways to access the web on the near future, for every kind of possible audience, providing easy access to the contents is the only way to safely prepare for this future.

    And this will increase the accessibilty of people with already limited resources, being them technological or physical.

  4. “I personally much prefer getting the same content whether I am using my phone, my iBook, or my desktop Mac.”

    Do you feel any different about using functions, as opposed to getting content? E.g. looking up train times, searching Google.

    Transport For London does a stripped-down mobile version of their Journey Planner, and I’m glad, as I think the full one would be way too much for a mobile, despite being useful when I’m sat at my desk, perhaps planning a journey in more detail.

  5. As someone who is branching into making existing websites mobile web friendly, I value articles such as this a lot. Thank you Roger!

  6. Right on Roger! I think the W3C’s Mobile Web Best Practices Working Group has been doing a fantastic job. I really dig the “one web” idea. Who can ever remember the different addresses for the mobile versions of the different web sites?

    The Mobile Web also plays a big role in internationalization of our web sites. There are some countries that are more likely to access the web on their phones then on their computers.

    The BBC has a cool article about their high WAP usage in Nigeria. http://news.bbc.co.uk/1/hi/world/africa/4795255.stm

    PS - I should look through your archives, maybe you have already done this, but I would love to hear your thoughts on internationalization and localization techniques.

  7. Regarding the astronomical cost, there are some more enlightened companies out there. T-Mobile in the UK offer a 2gb/month service for £7.50. But you’re right in general. I moved from Orange because they were charging £1/mb!

  8. October 27, 2006 by Anders

    Here’s a pretty cool thing. A simulator for the Opera mini web browser: http://www.opera.com/products/mobile/operamini/demo.dml

    Have a look at your pages through this browser. If it looks good there, you can be pretty sure that you’re doing a good job

  9. About the astronomical prices of internet via mobile, let us not forget that WiFi enabled phones are becoming a reality.

    And that means that you will be able to surf the web for free on places that offer free WiFi connections, like airoports, central park [http://www.newyorkology.com/archives/2006/09/freewififor_c.php] or even your living room.

    In other cases, you’ll be able to WiFi surf the web for better prices than those offered by the carrier company.

  10. I can’t believe you found a spec I haven’t seen before! It looks really good at first glance and seems to have a lot of really good advice in there. Much of it is not only useful to mobile browsers, but to all browsers, including desktops.

  11. A very useful resource, that is.

    One thing I’m wondering is… Why don’t all the browsers implement numeric access keys? It would make sense, since the mobile User Experience is all about shortcuting to information, isn’t it?

    Also, while debugging a lil’ service of mine, I noticed some browsers reload the entire page when you follow anchors to the same page.. (sneeze)s60(sneeze) The KBs aren’t cheap, lads.

    I’ve mentioned this before (here, I believe) but I’m still waiting for the day Opera Mini comes with the option of rotating the screen. I’d much rather have longer but fewer lines displayed at once, wouldn’t you?

    @Guilherme, I’m hoping for the WiFi phones to get major acceptance, either forcing the operators to bring down the prices or by allowing us to freely browse the web without having to buy a PDA or morgage the house to pay the bills. ;)

  12. I agree that the “One Web” philosophy is a worthy ideal. In many circumstances having one source of content which is agnostic to the viewing device, typically transforming the presentation with the use stylesheets, works beautifully. But it isn’t that black and white.

    But there are fundamental problems to the one web approach. The first of which is that sites designed for desktop web browsers typically contain a variety of extraneous elements, like sidebars or inline photos. The usual technique of the one web approach would be to hide these elements using a mobile stylesheet or @media declaration defined with the handheld media type.

    While it is hidden from view, this does not prevent the mobile web browser from downloading the data. With average prices at $.01 a kilobyte, this isn’t exactly fair for the user to be expected to pay for content that they can’t see. Even if you didn’t choose to hide the content, pages can become impossibly long and difficult to use. The worst sin is loading any inline photo, which is not only time consuming but a costly request of the user.

    Though this problem will largely be addressed in time as more users transition to broadband mobile (3G) devices and data plans becomes more reasonable, it will continue to exist for the next couple of years.

    Still the second problem of the one web approach is that using the same content for desktop and mobile web browsers does not address the context of the user being mobile or to their physical location.

    Maybe the most appropriate content to publish to mobile users is not the same as as the web, maybe it is just a contact page, or a limited amount of content that is most relevant to mobile users. While I’m not arguing that this is always the case, it is very likely it could be the case. If we apply the methods of user-centered design to the one web debate, then we should look at the always look at the problem prior to agreeing to the solution.

    I’d also argue that not only the audience, but the medium is different than those of the web. The largest benefit of retrieving information on a mobile device is its relevance to our current location or task. Tools that enable the user to retrieve information based on their physical location like location-based services (LBS) mean, that as a website producer, you may be able to provide your content in an entirely different context then you do today.

    That being said, it is possible to truly embrace the one web approach and avoid some of the issues I’ve mentioned above. But it requires incredible diligence on the part of the designer/developer. It requires very strict separation of markup and presentation the likes that few if any find reasonable to do. Especially when you consider it takes less time to build a mobile specific site with Movable Type then it would to go to such lengths.

    I actually don’t consider myself to be in either the “one web” camp or the “mobile web” camp. I believe that mobile is a powerful medium and should be available to anyone regardless of the technical implementation. We should simply consider the means of publishing that makes the best sense for our users and for ourselves and decide on the solution that fits us best.

    -Brian

  13. October 29, 2006 by Roger Johansson (Author comment)

    Nick: Yeah, IE Mobile is doing what it can to ruin everybody’s experience of the mobile Web. I ignore it when I can. Microsoft has to play by the rules too.

    pauldwaite: Stripped down services like timetables and search are great as a compliment to the main site. The problem is that you don’t know if a site has one and where to find it.

    Justin: I don’t think I’ve written anything on internationalisation or localisation, except for Indicating language choice: flags, text, both, neither?.

    Anders: Ah, that’s a great application. Thanks!

    Lachlan: LOL!

    André: Yeah I noticed that reload problem before I installed Opera on my Nokia 6680 (an s60 phone). The built-in browser is complete rubbish.

    Brian: Your points are valid - serving the same content is not always the best thing to do. It depends on the type of site. However as a user I want to be able to use the fullblown site with my phone if I need to.

  14. I’m with Brian on the One Web. It is a blessing to be able to browse a normal website using your mobile, but at what cost? Like Brian said, paying for content you never get to see? No thank you. But like you said, it depends on the situation.

    I’m actually having a dilemma at the moment. I have a service aimed at mobile devices (rss->mobile) and at the moment I’m stripping images in order to lower the page size. But I keep seeing people adding, for example, comic strips feeds, which shows me people might actually want to download images, sometimes. As a developer/provider of a service, should I give the user the ability to turn images off in their browsers and feed them images all the time, or should I build some feature into my service to allow showing pictures, at their request?

  15. I think that as these best practices come more into the mainstream you will see the Mobile Web being used for more things. I have a feeling people predominantly use their mobile phones for location based services because those are some of the most mobile-friendly sites out there.

    If i could sit in a cafe and reasonably look through my blog read, i probably would.

    I wonder what the mobile web usage is like outside of the US. Is it more general web surfing or location-based services?

  16. October 30, 2006 by Roger Johansson (Author comment)

    André: It depends on how much you pay and how fast your connection is if paying for hidden content is a problem. About the images in the feeds, allowing mobile users to download the images if they want to seems like a good idea.

    Justin: I don’t have any data to back it up, but my gut feeling is that more and more people use their phones for general web surfing here in Sweden.

  17. I totally agree with you - one web it should be. But some changes may be needed - it’s still considered to be a one web if one uses different css for different media-types - right? Silly question propably…

    What have angered me the most with mobile phones like my Nokia 3120 is that they requests special treatment and if I remember correct ignores some of my css while accepting other. This resulted in a white background with white text for me. It’s a bit annoying having make a site working correctly and nicely even when the webbrowser ignores a bit here and there and makes it’s own rules.

  18. November 7, 2006 by Stevie D

    Definitely One Web.

    If surfers are on a slow/expensive connection, the sensible thing to do is to disable images. If there are any that they really want to look at, they can choose to view those pictures.

  19. November 7, 2006 by Roger Johansson (Author comment)

    Pelle: Yes, using different CSS for different media types is part of the One Web principle. CSS support in mobile devices is quite lacking, with the biggest problem being that many ignore the media type and try to act like they are desktop browsers.

  20. Roger, do you have much experience with XHTML Basic and how/whether I incorporate that into my “one web” world view? It is part of the W3C’s Mobile Web Best Practices Default Delivery Context.

  21. November 8, 2006 by Roger Johansson (Author comment)

    Justin: The only experience I have with XHTML basic is skimming the spec.

  22. Really interesting and valuable post and comments here.

    I just wondered about this… if I make a page using the “one web” (as I understand it) ideal, where all the content is available despite the platform, will Google include it in the mobile search?

    If you look at it with a PC you get the full version, my mobile gives the stripped down mobile version (no adverts, reduced navigation and so on). But it’s not on a /mobile or mobile dot subdomain… it’s the same XHTML page.

    Just wondered if and how it would get indexed? Would it make any difference at all? I hope this is relevant to the discussion at hand. Doing some searches on terms I’d use, everything has a ‘wml’, ‘wap’ or ‘mobile’ in the URL somewhere.

  23. December 7, 2006 by Jennifer Segovia

    Does anyone know what are the dimensions when designing for mobile web, for height above the fold and the width?

  24. June 16, 2007 by Jo Rabin

    I’ve belatedly come across this thread - and it’s great to hear that the Best Practices Document has been received well.

    A couple of points to add - it’s really important to understand that “One Web” quite specifically does not mean that exactly the same representation of the content is served to every device. In fact the Best Practices encourage authors to exploit the capabilites of the device to enhance the user experience.

    That means that a page accessed from a desktop may have sidebars, more and richer images and so on - when compared with the same page accessed from a mobile device.

    Authors should have regard to the context of their users and organise their pages accordingly.

    It’s important to respect “Thematic Consistency” which says that even though the content may not be identically presented, a URI should yield content that is essentially about the same thing no matter what the device.

    On another point, the W3C Mobile Web Best Practices working group has released a further “Last Call” draft of mobileOK Basic 1.0 Tests - this is a specification of a number of tests to check pages for consistency with Best Practice. We’re also producing a reference implementation of those tests, current completion date is mid-September.

    Meanwhile there is a pretty complete checker at http://ready.mobi

  25. I suspect that in the future, as technology continues to develop, mobile devices will have such huge bandwidths (far greater than any desktop device has today) that all web users (office based/mobile devices etc etc.) will use the same web format.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.