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.
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.
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.
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
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.
- Apple Safari
- Firefox for Mobile
- Minimo .2 from Mozilla
- Opera Mini 4.2
- BlackBerry Browser
- Bolt Browser
- WinWAP Brower
- TeaShark Browser
- Obigo Q7 Browser
- Steel Browser
- S60 Browser
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.
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.
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.
Tags: Web Design