The Mobile Web & Beyond

Is your website device independent - accessible from any Web-enabled device?

In a nutshell, device independence is the idea that your website should display correctly regardless of the device rendering the content. Developing or updating sites with a device independent mindset requires the least overhead, builds on the value of the existing site and accounts for technological innovations (including the rapid deployment of new mobile devices) and the imminent growth of the mobile Web. Creating sites that are device independent also avoids many technical pitfalls of other options, while providing a unified marketing message to your site patrons.

Many companies have jumped on the mobile bandwagon and ignored the idea of device independence by creating separate mobile versions of their site on separate mobile domains, mobile subdomains or in mobile subfolders. But this alternative is expensive, overcomplicated and short-sighted.

Device independence is a challenging task. The myriad of Webaccessible devices include traditional computers, game consoles, smart phones, pocket PCs, PDAs, BlackBerries, Web-enabled navigation systems and any other, new Web-enabled technology yet to be developed. Strategic decisions must be made and updates to existing sites are needed to truly be prepared for the mobile Web.

What is Different about the Mobile Web?

In reality, mobile devices share the same Web as traditional computers - the term "mobile Web" is an indication of the current technological shortcomings of mobile Web access, whereby various limitations influence the design of mobile-accessible sites. In all likelihood, the term "mobile Web" will be temporary. That is, until our technology has improved such that websites will reliably render the same on mobile devices as they do on traditional devices.

While today, U.S. mobile traffic is lower than predicted, there is a presence and traffic is expected to grow dramatically over the next couple of years. The release of the iPhone and similar Web-enabled phones, coupled with the development of higher bandwidth infrastructure and the increased availability of free WiFi should jump-start the growth and acceptance of mobile Web technologies.

The mobile Web provides an immeasurable opportunity for those willing to get in early and grow with the industry but it also presents a situation where webmasters will have to stay on their toes to keep their edge. There are a number of hurdles reminiscent to the infancy of the Internet itself, like non-standard browser rendering, un-reliable connections, slow download speeds and carrier limitations.

Device Independent Design Best Practices

There are a number of tips and techniques regarding development, usability, navigation and promotion that can help ensure success when creating a device independent site or adapting an existing site for proper display on a mobile device.

Development:

One of the largest hurdles when developing or adapting an existing site for the mobile Web is the hundreds of different browser, useragent and screen setting combinations that make it near impossible to predict how a site will render for any given viewer. Rather than concerning yourself with the multitude of possibilities, develop your site in XHTML to provide the best opportunity for your site to render correctly. XHTML has rigid accessibility standards that make it ideal for mobile devices where images may be pulled out by proxies and colors or formatting may be distorted or lost on the smaller screen sizes.

Bandwidth and download speed issues also make it important to minimize the file size of your pages. A good way to reduce file size is by separating the design from the content using cascading style sheets (CSS). Design style sheets with percentages rather than absolute positioning to ensure that the website will display correctly, regardless of the screen size where the site is being displayed. Once content is separated from the design, you can use multiple style sheets to serve different content, based on the type of device that is rendering the page.

For example, if your traditional site has large images or animations you can use the style sheet to replace the images with smaller files or alternative text.

Navigation:

With limited bandwidth and slow download speed, clear navigation is crucial for a good mobile user experience. Be sure to name buttons clearly and use good calls to action throughout your site. Have a site map, provide crumb trails and keep nothing more than three clicks away from the homepage to prevent people from getting lost on your site.

In most cases, all menu and sub-menus on JavaScript navigation will display, so use style sheets to replace complicated JavaScript navigation with text links to the top level navigation. Another option is to use display characteristics in the style sheet to make the navigation appear at the bottom of the page rather than the top, and then use jump links or bookmarks at the top of the page to direct people to the main elements on the page. Be sure to avoid using embedded objects or scripts as part of your mobile navigational scheme, as they might not come through on all mobile devices.

Usability:

When people make it to your site on a mobile device, they already have a task in mind and are ready to interact with your brand. That makes usability especially important, where users may already be having trouble with device controls or struggling with an unreliable Internet connection. For the best results, avoid using frames, flash and any script language that might require a plug-in to render correctly.

The best way to improve the usability of your site is to make it as intuitive as possible. Don't forget to provide information that would be important to a person on a mobile device like addresses, maps, hours of operation and phone numbers. For best results, link your address to a mapping resource that has the option to send driving directions to a mobile phone. It's also a good idea to make phone numbers clickable, so users don't have to re-enter the number on their key pad. You can also provide links that "Bookmark this Page" or "E-mail a link" to help encourage users to return to your site.

Promotion:

When your site is mobile ready and you are ready to drive traffic there are a number of promotional options available on mobile devices. Mobile ad serving and pay-per-click programs are both good places to start. You should also create press releases announcing your "mobile site" (even though it is really your normal site being displayed on a mobile phone). Advertising for mobile sites is especially effective when placed in public transportation venues, where commuters have down time away from their computer. If it makes sense, you can also mention your mobile site in other advertising efforts, or initiate a text messaging campaign.

What is the Future of Mobile?

Device independent websites are the way of the future. While the mobile Web is still in its infancy, the good news is that we have learned valuable lessons from early days of the traditional Web; so growth in the mobile channel should be faster and less painful. Until there are more uniform display standards for mobile browsers or the browsers themselves advance to render websites exactly as they would on traditional computers, we should build sites to the highest common standard, in this case XHTML, and address rendering inconsistencies on an ad-hoc basis.

As technology and bandwidth improve, the acceptance of the mobile Web will become as widespread as the acceptance of the Internet. Mobile video is already a reality for some and promises to grow with YouTube's expansion into the mobile sector. Game consoles are giving users the ability to access the Web on their TVs, surf the Internet and compete with friends through an online connection. Many banks are beginning to offer mobile banking and restaurants are beginning to participate in programs that allow users to pay for meals with text message codes. Major metropolitan areas are beginning to provide free public WiFi and all of the major search engines have secured agreements with auto or GPS manufacturers. The potential for growth of the mobile Web is monumental. Many experts predict mobile advertising spend to reach into the billions within the next couple of years.

Fueling this explosion of growth in the mobile marketplace is, in part, the variety of devices capable of Internet browsing. As outlined above, that is a big part of the mobile challenge. Therefore, device independence plays a key role and your site must be prepared.