Project Planning for Mobile Web Design

With an estimated 245 million subscribers worldwide, the mobile Internet is rapidly becoming one of the best channels for retail sales.

With mobile commerce (mcommerce), merchants can reach potential customers as they commute, wait in the lobby at a doctor’s office, or eat lunch in the company cafeteria. But the mobile Internet can pose something of a challenge for web designers and developers, requiring an additional level of project planning and aforethought.

When we design websites for desktop or laptop computers, there is actually a tremendous amount of continuity. Sure, we might complain that Internet Explorer 6 is quirky; or wonder why Google Chrome and Apple Safari, which run on the webkit engine, manage some margins differently. But, for the most part, we can depend on a very consist user experience across web browsers, monitors, and operating systems. This is not true of the mobile Internet.

The iPhone, as an example, has a 3.5-inch diagonal, widescreen multi-touch display that is 480-by-320 pixels in resolution when held horizontally, and 320 pixels wide when flipped vertically. So for which resolution do you design?

If everyone was using an iPhone or a comparable smart phone, it would not be too bad. In fact, it would not be too different than designing for desktops and laptops. But what about a mobile Internet user in Africa, where the average screen width is only 120 pixels? You can bet a fixed width layout won’t work well on both of these platforms.

And it gets worse. The iPhone uses a mobile version of the Safari web browser which manages XHTML, CSS, and JavaScript like a champ. While an older handset’s browser, which probably cannot be upgraded, might not offer HTML support at all.

With such differing mobile browsers and platforms, a mobile web designer and developer should do more planning and approach site development with graceful degradation in mind. While mobile projects can and do vary greatly, I believe there are some basic project planning techniques that will help a project succeed, and in this post I will describe these techniques in general terms. Remember, the goal is to provide some basic mobile project planning steps, each of these steps will require refining specific to your organization and project.

Device Targeting

In his book, Mobile Design and Development, author and mobile design expert, Brian Fling, describes the concept of device planning. The idea is to identify which particular mobile handsets you want to target with your design and then identify each handset’s weaknesses.

“If you know the weakness of each of the devices you plan to support, along with what you will be able to safely accomplish, then you can have many successful mobile projects,” Fling wrote.

Sure, your client or company may want to reach “every” mobile Internet user, but certainly you will have some priorities.

For example, are you really targeting so-called emerging markets like Africa or India? If you are, you’ll need to consider the sorts of mobile devices that users in these regions favor. If not, you may not need to focus a significant portion of your design efforts on these devices. Likewise, if you are selling a downloadable product that only works on smartphones or on a specific mobile platform like Google Android, then you only need to aim for some mobile handsets, not all of them.

At its heart, device argeting is a business decision that should be made before developing a mobile-friendly ecommerce site.

Device Evaluation

With a list of target handsets assembled, you can categorize these devices based on what markup and programming languages they will support. Again using Fling as a reference, here is how he classifies mobile handsets for design purposes.

Table 1: The Mobile Device Matrix. Source Brian Fling, Mobile Design and Development

Class A Mobile DevicesXHTML, XHTML-MP, HTML 5CSS2, CSS3JavaScript, DHTML, AJAX
Class B Mobile DevicesXHTML, XHTML-MPCSS2Limited JavaScript, DHTML
Class C Mobile DevicesXHTML, XHTML-MPLimited CSS2Very limited JavaScript
Class D Mobile DevicesXHTML-MPBasic CSS2No JavaScript
Class F Mobile DevicesXHTML-MP, WMLNo CSSNo JavaScript

If you need to design for Class D mobile devices, you have a very different task than if your only targets are Class A phones.

Furthermore, some devices can and will support more than one mobile browser, so it is important to be familiar with some of the more popular mobile browsers. A list of some of these browsers follows. It is arranged in no particular order.

Site Aim and Scope

After considering your target audience and the mobile devices that they are likely to be using, it is time to turn your attention to what your mobile site should offer. In a step analogous to other forms of site design, you should define site aim and scope.

Is your site a product catalog? Will it need to support demonstrations? What features are needed to meet your merchandising requirements? How will you accept payments?

Before you can really do a good job of designing a mobile Internet site, you need to understand what your site must accomplish. Put another way, you need to define your site project goals, and work out a design that helps your client or company achieve those goals.

WML, XHTML-MP, Or XHTML

Target devices selected and site goals in place, you will need to select a markup language. Fortunately, many modern mobile devices support XHTML, one of the most common markup languages and a markup language you have no doubt used when developing other sites. But depending on your target devices, you may need to support other, earlier markup languages or you may want to push the edge of mobile design and choose something like HTML 5.

–          HTML 5 — The fifth major revision of the Internet’s core language is a powerful update aimed at making web pages act more like applications. The recommendation is still not completely supported in desktop web browsers, and can only really be trusted at all in mobile devices running Firefox for Mobile, Opera, or Apple Safari.

–          XHTML —The extensible hypertext markup language is nearly ten-year-old web recommendation from the World Wide Web Consortium (W3C) that represents a reformulation of HTML 4 and XML 1.0. This markup language has been, perhaps, the most popular markup language for all web design for past several years. Class A, B, and C mobile devices support it, and Class A devices, which would include the iPhone, support it very well. For an even safer choice, use XHTML Basic, which is a subset XHTML that will almost certainly work on modern Internet-capable devices.

–          XHTML-MP — XHTML Mobile Profile (MP) is a modularization of XHTML Basic, which the Open Mobile Alliance, an industry association, named the preferred markup language for the wireless application protocol (WAP) 2.0 in 2002. According to Fling, if you can write XHTML, you can probably write XHTML-MP with little or no trouble.

–          WML — The wireless markup language (WML) is based on XML and was specifically developed for mobile devices running on WAP. Used mobile devices in some emerging markets, particularly those manufactured before 2001, may require a site to offer a WML version.

Basic Site Structure

In mobile website design, it is important to remember that not only is the platform different but the user is different too, or at least how the user acts is different. What’s more, whenever possible you want to build a single website that works across platforms, i.e.; mobile and desktop.

To achieve these ends, take a minimalist approach to XHTML site structure, and arrange the site in such a way that it would make sense to read it top to bottom. You can change the structure with CSS or JavaScript in the presentation or behavior layer, but in XHTML, you want simplicity.

Progressive Enhancement

This minimalistic structure is also a tenant of progressive enhancement. Progressive enhancement focuses on content, and generally encourages developing content first and gradually adding presentation and behavior layers to your content as you go. It has two important effects for mobile design.

First, by focusing on content, progressive enhancement helps the mobile design identify the site’s essentials.

Second, by adding presentation (CSS) and behavior (JavaScript or Flash) layers on after the content layer is developed, we also get a site that degrades gracefully. If we build content that is readable on a Class D mobile handset, adding CSS so that a Class A phone renders that content differently has no effect on the Class D user, but improves the experience for the Class A user.

Summing Up

In this article, I have tried to generally introduce you to the mobile site development process. Certainly, I have not provided an exhaustive list of everything that you will need to do, but I believe I have given you enough information to get your mobile project started properly.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.


Related Articles

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS
The opinions expressed here are of the individuals and do not necessarily reflect the views of Elastic Path.