Mobile Web Site Design Part 2

Posted by Mary Gammel on January 3, 2009 under Website Quality | Be the First to Comment

Design for your Target Audience

Think like a mobile user when designing a mobile web site:

• They are on the go looking for quick answers and information.
• They may also pay for internet services based on how much they download each month.
• They use devices that have limited input capabilities and small screens with slow data transfer rates.

For example, suppose you own a tea shop that sells tea as well as related gifts and accessories. Customers can also enjoy a cup of tea in your store or buy a cup to go. Your main web site is a full-blown e-commerce site with search capabilities and customer reviews. What features could your tea shops mobile web site include?

• Home page with phone number and an invitation to place an order over the phone for pick-up
• A page listing monthly specials or events as well as coupon codes for mobile users only.
• A page listing the store hours and contact information.
• A page containing directions to the store and an external link to a map of the store’s location on an interactive site such as mapquest.com.
• A page with a brief overview of products with an external link to the tea shop’s main site.

Note that the mobile site only has 5 pages and 2 external links with specific content for mobile users. In contrast, the main site may have hundreds of pages and links.

Mobile Web Site Design Considerations

Keep in mind that all mobile browsers and devices are not created equal. So, follow mobile design guidelines to get the best results on the most devices.

• Keep the design simple. Ditch the fancy CSS layouts and use an approach which displays the site elements in the order they appear in the code. A common approach is to design pages with the following sections from top to bottom: header, navigation links, page content, navigation links, and footer.
• Remember that formatting of fonts, colors and spacing may be ignored by mobile browsers. CSS may also be ignored.
• Don’t use frames, tables, popups, JavaScript, Flash, or other 3rd party plug-ins in mobile web sites.
• Limit use of graphics and keep them small, generally 120 pixels or less in width.
• Try to keep total page size including text, graphics, and code to less than 20kb.
• Decide if you want to automatically redirect mobile devices to a mobile web site when they access the main URL. One drawback to this approach is that users with high-end mobile devices, such as an iPhone, won’t be able to access the main web site.

For more details, see the Related Links below. I recommend using the W3C Mobile Web Best Practices 1.0: Basic Guidelines as a starting point.

Related Links

W3C Mobile Web Best Practices 1.0: Basic Guidelines

W3C Mobile Web Initiative

“Designing for the Mobile Web”

“A Beginner’s Guide to Mobile Web Development”

Quick Tip:

Market your mobile web site address along with your main web site address. And don’t forget to put a link on your main site to your mobile site and vice-versa.

Did you Know?

At Quality Web Site Testing, all projects are tailored to meet your specific needs and goals. Our services cover a broad range of web site evaluation and testing. So, when you’re ready to start a web site project, please contact us to find out how we can help you make your project a success.