The 3 'C's in Mobile Website Design

One of the key movements in ensuring a consistent, meaningful, and overall enjoyable mobile website user experience is subscribing to the principles developed by the W3C - The World Wide Web Consortium - for mobile application development. The W3C is founded on the principles that the web should be accessible to all and on as many devices as possible. To realize this, the W3C body of knowledge has developed technical standards and best practices for the development, design, and content authoring. These standards are in the spirit of creating a "One Web" environment that is available on any device.

Creating mobile-friendly user experience can be challenging . The hardware and network capabilities of the end-user create constraints that should be considered when creating mobile content. The "One Web" principle attempts to level the playing field for all. Remember the 3 "C"s for mobile web development:

• Content - the page layout and information architecture
  
• Context - the reason a visitor is coming to the mobile site and their environment at the time of visit
  
• Capabilities - the functionality native to the device for viewing the mobile website

Here are a few best practices to consider before building your next mobile website:

The type of content relevant to the desktop user may not be as applicable to the user on-the-go. Visitors on a mobile device aren't interested in browsing. Forget the notion of the "web browser" and think "web finder". Page layout, information architecture, and content syntax are the pillars of keeping a mobile website relevant and accessible for the mobile user.

Minimal navigation (preferably a top nav bar) is a best practice, so is keeping content as accessible with as few clicks as possible. Don't bury content too deep in the site. Keeping in mind that the mobile visitor has a very specific goal (i.e. an address, account information,traffic reports) put that content up front and make it easy to navigate. Less really is more when navigating a mobile website.

What is the mobile site visitor's goal? Understanding who the visitor is, why they are coming to the site, and the context in which they are arriving at the site is critical. Even the best mobile user experience fails if the content and context aren't spot on. For example, a bank cusomter accessing their bank account from a mobile device are probably not interested in learning about new product offerings. But rather, quickly locating a balance, performing a funds transfer, or paying a bill on-line. Keeping the content layout goal oriented and specific to the goals of a mobile user will create a useful web property for your customers.

Keep the site entry point URIs (Universal Resource Identifier) short. Typing a long string can be cumbersome on a mobile device. And it's important to consider that entry points may be from an email or text received on the mobile device.

Device capabilities are a huge consideration in mobile web development. While the W3C guidelines are based on device-neutral practices they also recognize the importance of checking for device capabilities (whenever possible) and fully exploiting them to enhance the end-user experience. Just as in the desktop world where all sites don't function the same in all browsers, the device a mobile site is accessed on can have a huge impact on the quality of the end-user experience if not handled programmatically. A few things to consider:

• Not all devices support style sheets. Organize content so that it can be rendered in a an easy to navigate way without style sheets


• Graphics and scripting capabilities- create text based alternatives for all embedded images and plug-ins


• Color contrasting capabilities- information should be able to be conveyed with or without color.


• Bandwidth is another consideration. The more graphically rich and content intense the longer it may take to render the site (and quite possibly,the more it will cost the end-user).

Limit user input requirements as input mechanisms on mobile devices can be small and cumbersome to use. Tabbing and creating pre-selected values are best. Where possible avoid free-text fields.

I've been in web development for most of my career and though the mobile outlet creates new challenges and opportunities, the basic planning and due dilligence required to make a site successful are the same no matter the outlet. Would love to hear about the challenges you've overcome launching your mobile website. Please add your comments below.