A Smaller Picture - Introducing the Mobile Web

Early 2005, Tim Berners-Lee, Director of the World Wide Web Consortium (W3C) claimed that, “…mobile access to the web has been a second class experience for far too long”.

In May 2005, the W3C launched the Mobile Web Initiative (MWI). This initiative, in the words of the W3C, “…will produce materials to help developers make the mobile web experience worthwhile”.

What is the mobile web though and why has it been, so far, a “second-class experience”?

The Mobile Web for Developers

The mobile web, in its simplest form, is the Internet on your mobile phone. To develop for the mobile web, designers must consider -

  • a variety of screen sizes,
  • a variety of devices,
  • user agents, and
  • operating platforms

Another consideration is the microbrowser. The microbrowser is a web browser designed for use on handheld devices like the mobile phone.

Presently XHTML-MP and CSS, the mark-up languages of the mobile web are not fully supported by all microbrowsers. As Josh Williams of Firewheel Design claims, “…the current state of mobile browser support for XHTML/CSS make the web standards battle (for desktop browsing) that raged fiercely a couple of years ago look like a cakewalk”.

When mobile carriers and device manufacturers begin to develop with standards in mind, the mobile web will become much less of a “second class experience”.

Why Develop for the Mobile Web?

Why then should designers consider the mobile web -

There is a huge mobile web audience and it is obviously time to cater for them. As Robert Jones, in his article Creating Web Content for Mobile Phone Browser, points out, however, if a developer wishes to reach a broad audience, then pages need to work on the monochrome screen of a two-year old phone as well as the high-resolution, colour screen of the latest models.

A Quick Overview of Development Methods

Jones suggests two methods -

  • Using basic mark up so that a page is viewable on any phone, or
  • Identifying the capabilities of each phone accessing your site and delivering rich content specific to that device.

Opera describes a set of tips for designing for a smaller screen -

Coding Tips

  • Use terse, efficient mark up
  • Avoid frames
  • Avoid pop-ups
  • Avoid using proprietary features, or use fallbacks
  • Specify image height and width
  • Use alternative text on images
  • Have fallbacks for JavaScript and dynamic effects

Small-screen Design Tips

  • Design with document order in mind
  • Design the small-screen version for maximum readability
  • Only use images suited for a small screen - hide the rest
  • Be careful with the use of colours, font sizes and alignment

Conclusion

Designing for the mobile web will not be easy. Standards are almost non-existent.

In the words of Fling and Moll, co-authors of Mobile Web Design: State of the Mobile Web, however, “…the more of us who develop for mobile and push the limits of design…the sooner device manufactures, carriers and mobile browser developers may increase support for mobile web standards”.

Designers and developers along with the MWI can then make the mobile web experience a first-class one.

Tags: , ,

Comments are closed.