Three Steps Toward a Mobile Web Site

In our recent post, Going Mobile: What it Means for Your Web Site, we discussed the reasons for needing a mobile Web site. If you’re thinking about mobilizing your Web site, you may wonder what goes into making its content readily available on mobile devices.  In all likelihood, the user experience that someone has sitting in front of a flatscreen monitor will differ greatly from that of a BlackBerry or iPhone user.  The following are three simple steps involved in serving your mobile audience.

1. Understand the needs of your mobile visitors

Mobile browsers have fewer capabilities than desktop computer browsers.  As such, it’s a good idea to create a slimmer version of your site specifically for the less-capable browser (see example below).  Before you build this mobile version,  be sure to identify specific objectives for your mobile users and how they differ from users sitting at their computers. This will most often involve making telephone numbers, driving directions, and hours of operation more readily available.  In turn, your mobile Web site probably does not need to include the more content-heavy portions of your site.  Naturally, this will vary by industry; mobile users looking for restaurants and hotels, for example, will require very different information than those who focus on business-to-business interaction.

2.  Design a mobile-ready layout for mobile browsers

Once you have decided on how to best serve your mobile audience, it’s time to contemplate a layout. You’ll want to be sure to keep the use of images to a minimum.  To eliminate the need for images, you can also take advantage of some of the newer features in CSS3 and HTML5, available on most smart phones. Be sure that links and buttons are big enough to be touched; users with touch screen devices need larger and well-spaced buttons to avoid touching the wrong button. Touch target sizes will vary depending upon the platform(s) you are targeting.  Other than those considerations, the process of creating mobile Web pages is very similar to “standard” Web pages.

iPhone and Desktop Browsers

Two versions of the Orlando Sentinel Web site captured at the same moment in time.

3. Configure a special script to direct browsers to the appropriate location

Once the design is finalized and loaded on a server, the final step is to install and configure a script to properly direct user traffic.  This piece of code simply detects a user’s browser type (determining whether they are sitting at a computer or using a Blackberry) and re-directs them to the right page.

After the site has launched you will want to make sure you continue to listen to any feedback so you can keep improving and meeting your users mobile needs.