Posted on February 14, 2010 - by David Etheredge

Website Design for Smartphones – Part 3

Website Design for Mobile Devices

So how do you build a good mobile website? In part this will depend on your market and your consumer, but there are general principles that can help guide you along the way;

1. Navigation on a mobile website should be as simple and intuitive as possible. You cannot ask mobile users to “figure out” how to find content on your site, it must be obvious. Mobile Users know exactly how to exit your mobile site and if they can’t figure out how to get what they want immediatly, that’s exactly what they will do.
2. Where possible, use pictures, not text to communicate with mobile users. Text should be used to supplement information on your site, but the more graphically rich your mobile site is, the more effective it will be at quickly and easily driving user behavior. This advice runs counter to generally accepted best practices for traditional website design because search engines rely almost entirely on textual, not graphical, content for determining search rankings.
3. Optimize mobile sites for real users first, not search engines. Many of the worst practices in traditional website design orginated from the need to optimize websites so that they would rank well on search engines. Google and other search engines have spent years attempting to retrain the web design industry to build website for people and not search engine spiders. Although search optimization will still be an important part of mobile website design, it is essential that it take a back seat to human usability factors.
4. Understand the specific  goals of mobile users and design your site to accomplish those goals as quickly and efficiently as possible. When a person on a smartphone visits your website, it is likley that they are looking for something very specific (contact information, driving directions, pricing or other specific informaton on products or services you offer, customer support, etc.). Where traditional websites may focus on “selling” customers on a company, product or service, a mobile site needs to help customers go directly to the information or content that they require.
5. Insure mobile content is “light weight” so that it loads as quickly as possible. With near universal access to broadband in the U.S., traditional websites have increased in size and complexity as the use of Flash, streaming audio and video and other interactive media has become commonplace. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.
6. When in doubt, follow the “FEVR” principle of mobile design. Make your mobile site fast and easy to use, communicate visually using graphics as much as possible and drive user behavior towards very specific results. Fast, Easy, Visual, Results.

Now that the general recommendations are out of the way, let’s get into some specifics. The following methodology is certainly not the only way of designing a mobile website, but we believe it is an effective way to do so.

Mobile Website Structure

The vast majority of mobile websites can be built around the same core structure:

1. A home page
2. A contact us / locate us page or section
3. A products or services page or section
4. A “who we are / what we do” page or section
5. A “why us?” page or section

Home Page: The home page should display the company logo, a short descriptive tagline, a graphic that visually underscores the organization’s products, services or area of interest, and navigation to the other core pages or sections of the site.

Contact / Locate Page or Section: The contact us page should allow the user to directly contact the company by phone, text message, email and/or live chat (the more options the bettter). For brick and mortar companies, a “locate us” function should be included that allows the user to generate driving directions in real time from their current location to the nearest store or office. In cases where the user is encouraged to connect directly with a specific individual at the company (Real Estate, Insurance Brokers, Lawyers) a personal bio with pictures and contact info for each member of your “team” should be included.

Product / Services Page or Section: Structure of the Product / Services section of a mobile website will vary greatly from business to business. In some cases, a list with short descriptions may be sufficient to drive users to an event that generates a lead or sale for your company. In other cases a full online store may be appropritate. Whatever the case, product and service listings must be easy to search or filter on according to the user’s need and they must be presented in such a manner that the user can quickly guage their interest and move on to the next item.

Unlike web stores, where users can potentially view a larger number of products or services all together on a single page, mobile users will probably be required to flip through a series of items one after another. As a result it is essentail that mobile product and serivce offerings be segmented in very precise categories so that users can quickly drill down to the exact items they are looking for by selecting the appropriate category.

“Who We Are / What We Do” Page or Section: One of the worst mistakes that companys make on traditional websites is failing to clearly and simply state who they are, what they do and where they conduct business. A mobile website should include a page that quickly and clearly provides this information to potential customers. The more specific information a user has about a company, the more likely a transaction is to occur. Websites that omit this information, either intentionally or by design, come across as potentially being undependable or “shady” (and they often are!)

“Why Us?” Page or Section: Another big mistake in website design is failure to provide sufficient reasons why a user should choose your company over your competitors. A “Why Us?” section may provide customer testimonials or references, links to your profile on organizations such as the BBB or Dun & Bradsteet, promotional offers and coupons, or it could include a portfolio or your work, a list of clients or a summary of recent projects. In any event, giving potential clients some reason other than just price or product selection to pick you over your competitors is almost always an excellent idea.

Obviously you don’t need to actually call your Why Us section, “Why Us”! For SavvyDog Design’s iPhone website, our “Portfolio” section is used to provide visitor’s with a compelling reason why they should choose us over another design company.

There are other types of content you may need beyond those mentioned above (for example Publishing sites will require sections for various types of content they distribute), but in general these five elements will form the core of almost every good mobile website.

 Mobile Webpage Structure – Introducing Mobile Cards and Decks

So far throughout this series of articles we’ve struggled to differentiate traditional web design from mobile web design while using the same terminology for both processes. This can certainly be confusing, so internally we’ve decided to change the way that we refer to structural elements on mobile websites.

The terms “page” and “section” are derived from books and other literary formats and their use stresses the textual nature of traditional website design. If, as we’ve proposed previously, we are to think of web design for mobile devices in a more graphical way, then it makes sense to refer to ”pages” and “sections” in a way that accentuates the principles of effective design for the mobile medium. To this end, we refer to mobile pages as “cards” and to sections on a mobile site as “decks”.

Whether you look at playing cards, postcards, greeting cards or collectible card games like Magic the Gathering or Yugio, its evident that printed cards often feature a “graphic heavy” design principle where information is communicated through pictures first with text used in a supporting role or not at all. Such cards also tend to be restrictred to a small size that can easily be taken in and understood in a glance. Finally, all cards of a similar type tend to follow a very formalized structure designed to pack a lot of information into a small, but well organized area.

Sounds a lot like an iPhone screen doesn’t it?

And when you have a large number of cards of the same size and type, you typically organize them into a “deck”, which, assuming you are dealing with a liminted number of cards, is an excellent structure for viewing a series of cards one after the other until you find the one you want.

Now you might be saying to yourself, “who cares what terminology you use to describe pages and sections in a website?” The answer is that in the design world, the name we give to something we wish to create often informs our perception of how that element should be designed.

The term “page” suggests to a designer that they should follow literary principles; a lot of text with some or no graphics in support and a variable document length depending on the amount of text involved.

The term “card” suggests a medium where graphics are more important than text, where there is a very limited amount of space in which to work and where a rigid format should be enforced to ensure quick, easy assimilation of information depicted in the design.

The use of the term “deck” instead of “section” enforces the idea that all similar cards on a mobile website (such as products, items in a portfolio, or team bios) should follow the same layout and be organized in a such a way as to allow the user to easily “flip” between them in order to quickly locate and “pull out” the one they are looking for.

So now that we’ve explored the structure for mobile websites, we can get down to the last and most important bit – the actual development process.

Mobile Website Development

1. Project Specification – work with a Marketing professional to define the primary goals of your mobile website, outlining the specific user activities that the site should drive, such as lead generation, calls to action or product sales. Define the simplest possible path(s) for users to achieve the desired activities and avoid building unecessary or frivolous content into the specification. Also include a detailed list of the types of mobile devices you wish to specifically support with your mobile website (you will probably need to discuss this with your mobile developer in advance as device support is a complex issue).
2. Development Specification - working from the Project Specification, have a User Interface Designer or Website Architect create and provide you with a site map that lists every card or deck to be included in your mobile website and a navigational structure that clearly shows how users will navigate between various elements of the site. In addition, the Development Specification should discuss any user activity that can take place on any card in the site which will require additional coding or development (such as e-commerce, database integration or interactive media). Revise the site and navigational maps until they accurately represent the entire mobile site you wish to build.
3. Graphic Design – work with a Graphic Designer to develop the artwork and layouts for the home page, each deck template (a consistent graphical structure within which all cards of similar content will be built) and all individual cards in the site that are not part of a deck. Where necessary, use placeholder artwork and text until the general elements of the design are completed and approved.
4. Working Shell (optional) – work with an HTML coder to create a working shell of the site that allows users to navigate between all of the decks in the site. For small sites, this step may be unecessary, but for large, complicated sites, testing navigation and site structure in this manner prior to building out all final content can save time and money in the event the navigational design has some unforseen flaw.
5. Content Placement – work with a Graphic Designer and a Marketing communications specialist to author / edit and layout final content for every card in the site. Final layouts for cards can be viewed and approved in static form (.jpg or .pdf for example) before they are handed off to the coder to create the BETA version of the mobile website.
6. BETA Website – work with a mobile applications / website developer to build the final version of your mobile website. Make certain the developer provides you with a fully functional version of the website (a BETA version) which you can test through a web browser on a personal computer, before the site is published for mobile use. Also, make sure the developer will test to find and fix any “bugs” with the site so that it performs as intended on the mobile devices / smartphones you intend to target.
7. Go Live and QA Test – have your developer take the website live and then immediately allocate the time and resources necessary to self test your mobile website on all target devices possible. In many cases developers will warranty their work from defects which arise from development issues for a period of 30 – 60 days but after that, the client will be responsible for the cost of fixing any issues which are not identified during the warranty period. It is almost always in the client’s best interest to perform (or hire a third party to perform) thorough Quality Assurance testing even if the developer provides testing as a part of their service.
8. Show Off Your Mobile Site – Congratulations, you’ve got an awesome new sales tool with which to taunt your competitors and woo new customers! Whip out your iPhone and impress some random person in a bar with your new site.

If you haven’t already done so, you may find it useful to read the first part in this series - ‘Website Design for Smartphones – Part 1‘.