The 5 Commandments of Mobile Web Design

Ryan Unger
  • Ryan Unger
  • September 20, 2008
The 5 Commandments of Mobile Web Design

A one-size-fits-all approach to solving problems rarely seems to work in the real world, and the mobile Web is no different.

Up to this point, most mobile sites have been developed by re-hashing traditional Web content and squeezing it onto the small screen—an unfortunate “Mini-Me” approach to mobile Web design. The result? While the traditional Web becomes more useful and creative every day, the significance of the mobile Web has largely stalled. The mobile Web has yet to realize its awesome potential, and the problem isn’t a technology issue like you may be already thinking. The problem is design, or rather, a lack thereof, within the mobile medium.

1. The Mobile Web is Not the Little Sister of the Traditional Web.

What makes a mobile site so different?

It’s not the screen size—it’s the intent of the user. Very often, traditional Web users browse the Web for entertainment or to kill time. Even when traditional users need to perform work-related tasks, they are easily sidetracked by Twitter, YouTube, or any of the thousands of social networking sites.

Mobile users, on the other hand, typically browse the mobile Web when they are in need of specific information. These experiences tend to be much shorter than they are on the traditional Web, and users rarely browse for entertainment purposes. Let’s just be honest with ourselves—if a user could be in front of a computer, that’s where he or she would be.

Suppose that you were offered a chance to view a new Red Hot Chili Peppers music video on your phone. Would you actually navigate to the video and watch it, when you could just as easily view it on a speedy home computer? Re-purposing traditional Web content and stuffing it into a mobile browser is a recipe for disaster. Instead, it’s time to look at the mobile Web as a uniquely distinctive medium.

2. Give People What They Want, When They Want It.

All mobile Web users across the globe want the same thing: the ability, at any time, to easily access any information.

What this means for mobile Web designers and developers, is that first and foremost, we need to approach mobile Web sites as an information-architecture problem, and NOT as a technology problem. Mobile Web sites should be formatted in a way that allows users to easily navigate and make decisions. Users don’t want to dig through the clutter of a traditional Web site to find the tiny link they were looking for.

Companies that merely ensure their existing Web site is viewable on mobile phones, have, for the most part, wasted their time and money. This is primarily because this type of mobile Web site will likely be hard to navigate through, or be terrible looking. All too often, users get frustrated when they can’t find the content they are looking for. This fact is exactly why wireless carrier “decks” exist.

3. Build Unique Mobile Content, or Don’t Bother Building Anything at All.

Mobile is a unique medium and it should be designed with this idea in mind. If you are not willing to rewrite, modify, or create custom mobile content, then don’t bother creating a mobile site in the first place.

This point is best illustrated by an example:

A university could easily mobilize its existing Web content to create a mobile Web site, but do freshman really need to be able to schedule classes from their phone when they are lost in the Quad? The answer should be, obviously, no.

Wouldn’t the university mobile site be more effective if it was limited to custom information that is relevant for on-the-go students—such as mobile maps, a one-click phone number directory and faculty office hours? The answer is yes.

4. Make It Useable. Make It Useable. Make It Useable.

Mobile Web sites MUST always work on every phone. Period.

What this means is that mobile Web designers need to consider multiple screen sizes, as well as multiple technologies. A mobile Web site should dynamically transcode content such as forms, images, videos, ringtones and layouts, so that any user, with any phone, can enjoy a seamless browsing experience. Users should never have to tell a mobile site what kind of phone they have—it should already know.

Consider that for the traditional Web, designers and developers need to account for differences between Internet Explorer, Safari, Firefox, Opera, screen sizes, color depth, Flash versions, and more. Why would mobile be any different?

5. Don’t Forget About Design. Seriously.

Mobile Web surfers are still consumers, and consumers are deeply impacted by design. Don’t believe this? Allow us to introduce you to a fine company called Apple.

Because the concern at the forefront of people’s minds has been technology, brands and agencies often neglect the importance of design in the mobile space. It is almost assumed that because the mobile Web has to work on every mobile device, it can’t also look great. We couldn’t disagree with this mindset more.

When a mobile marketing firm approaches a mobile Web design project, it should design a series of visual layouts for a client that illustrate how the mobile site will look on a variety of different devices. For example, our firm refines a selected visual design concept into a WML layout (old school WAP 1.0), an XHTML-MP (WAP 2.0) layout at several different screen sizes, and (when possible) an iPhone-specific layout. The goal here is to ensure that no matter what phone is viewing the content, it will look its absolute best.

In Summary:

1. Think about the mobile Web in a new way. Get creative.
2. Clear and concise information-architecture specific to mobile is an absolute must.
3. Create compelling mobile content or don’t bother at all.
4. Mobile sites have to work—always. No ifs, ands, or buts.
5. It’s called mobile Web DESIGN. Not mobile Web cram-it-on-the-screen.


Let’s Build Together

Thanks for reaching out!

We will be in touch shortly.