W3C Releases Mobile Web Best Practices

By Josh Catone
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

The World Wide Web Consortium (W3C) today released the 1.0 version of their Mobile Web Best Practices document. The guidelines offer mobile web developers a consistent set of best practices to apply when creating content for consumption on mobile devices. “The principal objective is to improve the user experience of the Web when accessed from [mobile web] devices,” according to the W3C.

In Japan, there are already more mobile web users than PC users, and the rest of the world is catching up. Jupiter Research expects that mobile Web 2.0 revenues will hit $22.4 billion by 2014, with the biggest growth areas in mobile social networking and user generated content.

Developing content across such a wide array of mobile devices and creating a consistent and enjoyable user experience is not an easy task. The W3C hopes that its new mobile best practices guidelines will make it easier for developers to create content and applications for cell phones and other mobile devices.

“Mobile Web content developers now have stable guidelines and maturing tools to help them create a better mobile Web experience,” said Dominique Hazaël-Massieux, W3C Mobile Web Activity Lead in a press release. “In support of the W3C mission of building One Web, we want to support the developer community by providing tools to enable a great mobile Web user experience.”

The W3C also announced the release of the XHTML Basic 1.1 Recommendation today as the preferred markup language for the best practices document. “Until today, content developers faced an additional challenge: a variety of mobile markup languages to choose from,” said the W3C. “With the publication of the XHTML Basic 1.1 Recommendation today, the preferred format specification of the Best Practices, there is now a full convergence in mobile markup languages, including those developed by the Open Mobile Alliance (OMA).”

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • Buzz

    Doesn’t XHTML 1.0 Strict essentially serve this purpose (by using mobile-specific CSS)? How is XHTML Basic better?

  • Stevie D

    What strikes me here is that it is going to be impossible for the average web designer to achieve everything in the Mobile Web guidelines as well as the normal accessibility guidelines.

    The frequent use of “if the device supports it” is a big sticking point for me. This means we are going to have to have an exhaustive list of devices and their capabilities, and serve different content to each. This is an absolute killer for small companies and small websites. There is no way that I am going to learn how to distinguish between device clients that support external stylesheets, those that support internal stylesheets only, those that don’t support any stylesheets, and then send each of them a different version of the page.

    At 36KB, this page (before any comments are added) is several times larger than should be served to mobile users – that means we are not going to get away with hiding content in handheld.css, we are going to have to serve different content. Yes, that may work for big sites, but for most sites it just isn’t realistic.

  • ntcBos

    Having been in mobile site development, I can tell you there is no standard way of displaying content (images, text, etc.) on mobile devices. They all vary and they all handle html (or xhtml or CSS) in different ways. (Think back to the days of the Netscape and IE display wars.)

    Some phones won’t display a page with more than 10KB of data on a page (the outputted html – minus images and externally linked files like CSS files). Others don’t understand CSS padding/margins no matter what you do (cough… Blackberrys… cough). While others display everything perfectly.

    The key to mobile site development is testing, testing, testing. Get the top mobile devices that are used to visit your site and build the code around those to start. (And yes, the carrier does make a difference as well as the specific model numbers.) Then refine things for other popular handsets.

    Another key to mobile site development is you can’t just shrink down your site to show everything on the mobile web page. It’s all about tailoring what content (images, text, etc.) that your mobile audience will see. An editorial eye is needed.

    As far as mobile site design, make sure the logo/images/layout of the site take into consideration the standard phone display sizes (which can be found in Sitepoint’s “Designing for the Mobile Web” article).

  • Bob Nalts

    Tera-wurfl is your friend, use it to detect all kinds of device capabilities whilst keeping overhead low: http://www.tera-wurfl.com/