iPhone, iPad, Droid, BlackBerry…Mobile web browsing is growing at a rapid pace. Is your website ready to serve the mobile audience, the attention-starved, nimble-thumbed visitors making the best use of a few minutes waiting in line at the post office? If your website serves business executives, college students or young professionals, it is time to get serious about designing for mobile users. Here’s how:

Mobile Web Design

There are two main limitations in designing for mobile browsers. One is the screen width, which can be as small as 300 pixels, compared to the typical width of a website, which is 700 to 1,200 pixels. Viewing a typical website with a mobile browser requires a great deal of horizontal scrolling or zooming. The narrow mobile browser width allows for only one column of content, and no side menu bar or sidebar content. Frequently the menus are changed to text links and appear above or below the main page content.

The second mobile web design limitation is specific to Apple’s iPhone and iPad. They don’t support Adobe Flash content, so sites that depend on Flash for navigation or all-Flash sites don’t fare well on those devices.

With the above limitations, you could choose to design for the lowest common denominator, but desktop browser users would suffer from a less-than-optimal experience…a very narrow and non-animated design. A better choice is to design an alternative design for your site to accommodate the mobile browser.

The first aspect of designing a mobile version is a script that detects if a mobile browser is being used. Every site page should run such a script, since you never know which page will serve as an entry point to your site. Many web programming languages have the ability to determine which browser is being used and react accordingly.

Once your site has determined that the visitor is using a mobile browser, it can direct the visitor to a different set of web pages. You have probably seen sites at m.domain.com, where m indicates the mobile version. See the single column of content right now at http://m.yahoo.com/.

An alternative approach is to change the page structure for mobile browsers, but to keep the URL the same. That design change can be accomplished in site programming by swapping the usual site stylesheet (CSS) for one that dictates a narrower and simpler layout. This approach requires the layout be dictated by the stylesheet, which takes some programming sophistication.  See our own mobile site design on a series of 100+ websites provided to local estate planning councils, such as http://www.epccleveland.org/. View this site using a desktop browser or a mobile browser to see that it detects and optimizes its own page structure to fill the available screen real estate:

We would be glad to review your website for the opportunity to better accommodate mobile browsers and better prepare for the change in the web experience.