Choose a Mobile Web Design Strategy - dummies

Choose a Mobile Web Design Strategy

By Janine Warner, David LaFontaine

Part of Mobile Web Design For Dummies Cheat Sheet

Your approach to designing a mobile Web site depends on your site content, your resources, and your audience. The following tips can help you understand the possible mobile Web design strategies and pick one that works for you:

  • Create one simple version of your site: This strategy ensures that the largest number of visitors to your site can at least get the most important information on your site (such as your phone number when they’re on their way to your office). Make sure the design works on even low-end mobile devices and link to it from your desktop site. The Web site, shown in the figure, is designed to work on a variety of mobile devices and provides an organized collection of links to other sites designed for the mobile Web.

    Preview of a website on a BlackBerry phone.

  • Design multiple versions: Many designers create different versions of a Web site and then automatically direct visitors to the version that is best optimized for their screen size and the features supported by their phone or devices.

    If you have the time, expertise, or budget, designing different versions of your Web site, each optimized for the different sizes and capabilities of different devices, is the best strategy.

  • Use content adaptation: Basically, you create one Web site design and then adapt it to each device. Thus the basic structure of the site will be the same across all devices, but specific elements, such as image sizes or the appearance of videos will change based on what the device can support.

    When you develop a site using the content adaption approach, it’s good practice to start by creating a wireframe, a kind of blueprint to your site design, as shown in the figure

    Using content adaptation for a website.

  • Design one high-end version: This works if you know your visitors primarily use a high-end iPhone or Droid, the name used for phones that run on Google’s Android operating system. Jasper Johal’s Photography Web site, shown in the figure, looks good on an iPhone and a desktop computer.

    Preview of a photography web page on an iPhone.