Best Practices in Mobile Web Design

Copyright © 2008-2010 Perficient, Inc. All rights reserved. This material is or contains Proprietary Information, Confidential Information and/or Trade Secrets of Perficient, Inc. Disclosure to third parties and or anyperson not authorized by Perficient, Inc. is prohibited. Use may be subject to applicable non-disclosure agreements. Any distribution or use of this material in whole or in part without the prior written approval ofPerficient, Inc. is prohibited and will be subject to legal action.

Best Practices inMobile Web Design

A MOBILE SOLUTIONS WHITE PAPER

SUBSCRIBE TO PERFICIENT BLOGS ONLINEwww.Perficient.com/SocialMediaBECOME A FAN OF PERFICIENT ON FACEBOOKwww.Facebook.com/PerficientFOLLOW PERFICIENT ON TWITTERwww.Twitter.com/PerficientDOWNLOAD PERFICIENT WHITE PAPERSwww.Perficient.com/WhitePapers

AbstractBusinesses know their customers are using mobile devices, but many businesses don't realize how

many and just how extraordinary the usage trend is. Savvy businesses want to connect with

customers through new mobile channels and will take the time

to develop a mobile strategy before doing so. The best practices

and design patterns present in traditional web sites are mature

and often repeatable across industries, whereas the best practices

and design patterns for mobile experiences, web and otherwise,

are in their infancy and patterns are only beginning to emerge.

The mobile strategy will need to be executed by product

designers and developers that understand the business objectives, user goals and context of use.

This paper encourages discovering business and user needs, then applying common interaction

design principles when creating a mobile experience.

Mobile FactsThe number of web-enabled mobile phone owners in the United States has grown faster than

many mobile enterprises had anticipated. Some quick facts:

• More Smartphones than desktops will be sold in 2011.

• More people have web-enabled mobile phones than PC internet access

• People expect to access key services and content via their phones

• Lower socio-economic mobile phone owners are moving away from land lines

• Lower socio-economic mobile phone owners have SMS, MMS and web plans rather than

internet access at home

• People living in rural areas have easier access to mobile networks than traditional broadband

Going MobileEvery organization needs to develop a mobile strategy that defines the business goals of mobile-

enabled content and features. By analyzing the target market/audience and its need for mobile

Best Practices in Mobile Web Design t 2

service offerings, the mobile strategy can be crafted to ensure the most gratifying user experience

by supporting the customer’s needs for mobile content and tasks while respecting their

expectation of privacy and security.

Understand the business purposeMany companies make the mistake of trying to come up with new and novel mobile offerings

before they’ve fully explored these offerings as a business. Experience has shown that businesses

are more successful with a mobile offering that has already been web-tested, even if it’s not the

entire web experience that’s being offered on mobile. Tested offerings can be brought to market

quicker and with a service offering that better supports the organization’s return on investment.

Rather than building an entirely new stack, companies should take advantage of their existing

web platform investments and find ways to extend that platform into the mobile space. As the

mobile space matures, it will be easier to share, support and maintain security, content

management and web services.

Organizations should also take advantage of business process rules, rule engines, web services,

integrations and portal technologies to provide a new front-end design to mobile devices while

keeping in mind that privacy and security are crucial on devices used in public and that are easily

lost. Displaying information that may affect a person’s privacy or storing credentials may

compromise a user’s secure information.

IBM has developed a new product, the Mobile Portal Accelerator, which exposes the WebSphere

portal interface to mobile devices. If implemented successfully, or as other software manufac-

turers mature and become mobile ready, it could be the game changer that allows for more

companies to get up and running on mobile.

Understand the consumer purposeA mobile site should be designed to support the uniqueness of the mobile experience and only

provide features and content that makes sense to a person on the go. A mobile site has to deliver

worthwhile content and features, knowing that users are usually moving or otherwise distracted

by their environment.


Consumer TypesThere are three primary mobile consumer types

• Surfer: Not looking for anything in particular, spare time

• Repeat: Has used site in past and found it useful

• Urgent: Needs to get something now

Customer expectations for mobile sites are expanding at a breakneck pace and range from simple

content presentation to performing highly complex, secure data transactions.

Content and InformationBrowsing content is the most common user activity during a mobile

session. Sites like CNN.com and ESPN.com push, stream and provide

content through mobile-styled web sites. Mobile site standards are

being defined and adopted by content owners to create a specific look,

feel and experience while complying with design patterns that users

have learned to interact with based on other sites they visit.

Transactional SitesMany users expect to perform a specific task or complete a transaction

on their mobile device, such as depositing a check, buying movie

tickets or making a reservation. Such transactions often best take

place via a downloaded application to the phone or a web-based

application. Device, business goals and user goals will dictate which. Organizations should plan

for broad-based device adoption by being mindful that a “hot” device today could fall out of

favor in six months.

While most secure transactions are taking place via device-specific applications, as the software

packages, programming languages, devices and networks mature, there is a shift from mobile

application to mobile web. Financially, it makes sense for a company to begin creating device-

agnostic mobile sites, as they will be easier to maintain and enhance as the mobile device market

continues to rapidly change.


Hybrid SitesSome site are content-transactional hybrids with both an application and a mobile-styled site.

These include Facebook, Twitter, Reuter’s News Network, Gmail and Google.com (search). These

sites allow the user to control how they access a site, either by downloading a mobile application

or by opening their mobile browser and pointing it to a mobile site. Organizations need to be

aware that each application/device and site/device will need to be designed, developed, tested,

supported and maintained. A business must be returning an acceptable level of margin to warrant

such an investment.

Mobile ChannelsMobile channels include messaging, web and application. Typically, an organization will want to

tackle some combination of these mobile channels over the course of planning its mobile strategy.

The coordination of these offerings with one another, as well as with other physical or virtual

communication channels, is paramount to success.

Mobile Messaging (SMS, MMS and QR Codes)The most-used feature on mobile phones is text messaging. SMS and MMS are used more than

phone calls or web browsing. QR codes storing addresses or URLs are used in a variety of

mediums such as magazines, business cards and retail product specifications. Some even use QR

codes to connect to Wi-Fi networks. Many Android phones come with a QR reader pre installed.

• Nearly every mobile device in use today has SMS capabilities

• More and more users are texting, across all demographics

• Users are text-interacting with businesses to subscribe to account alerts, promotions,

prescription reminders and daily feeds

• Most people prefer to set up their mobile interaction via the PC, but keep track of alerts

via text, rather than email

• Messaging trumps email to device, as content is “light” – requires very little signal

• QR codes are being used in the retail sector to enable web, SMS or email


Mobile Web (XHTML, WML)There was a time when all desktop applications needed to be web browser enabled. Many years

on, enterprises need to provide their website to the mobile device. Deploying services, content

and transactions to a mobile device, if optimized for the most appropriate device, will preserve a

rich interaction even at the most basic level.

Best practices recommend developing a mobile site that

degrades from a rich iPhone-like experience to a simple text

site or, conversely, designing for the simplest Smartphone

and progressively enhancing the experience as the device

becomes more capable.

There are few storage issues to consider for a mobile site,

aside from basic cache and cookies. However, one area to

be mindful of is data transfer. A mobile site transfers data

while the transaction or information grab takes place.

Limiting image and character loading will greatly reduce

data transfer, resulting in a faster load time and a better user

experience. If designed and developed correctly, the mobile

site can render to almost any device, be it simple web or

rich-touch interfaces.

Mobile ApplicationsApplications have been and continue to be a powerful force in how people interact with a brand,

be it a consumer, employee, vendor or other. Many applications are targeted at a specific device,

generally within proprietary development kits or language, but that is changing.


When developing a mobile application, it’s important to be mindful of a few things that may limit

adoption.

• Do not create an application if only 3% of your market will use it and it will consume

85% of your budget. Always take the time to build a business case and define your ROI.

• Applications don’t make sense for most businesses. Devices do not have the memory, nor

do users. If it’s not an application warranting regular use, people will typically not

download it. If they do download it but rarely use it, they will quickly forget about it.

• As the mobile web community continues to transform user expectations with custom

applications on iPhone, iTouch, Blackberry, Palm, Android, Windows Mobile OS and

other smart devices, the success of those solutions will be dependent on their ability to

enhance and compliment the web browsing experience.

StorageStorage devices are small and continue to get smaller, thus storage capacity is increasing on

mobile devices. But when you begin to load music, movies, photos, documents and core

applications, the average device can quickly run short of storage and memory. Applications will

continue to struggle with inadequate storage space on a hand-sized mobile device. Apple

devices don’t currently come with external storage card; other devices such as Android,

Blackberry and Nokia come ready with mini-SD card slots. As device creators and suppliers

create faster phones with more storage, this should be less of an issue. But remember, the type

and volume of media that users expect to store and access on their phones will also change.


Cross-channel coordinationCompanies know that they need to keep their current physical (store and print) and electronic (TV,

radio and internet) offerings in sync. Now that the electronic channel is diversifying to include

mobile channels (SMS, mobile applications and mobile web), the coordination across all of these

touch points is even more important.

• Inventory your current communication and interaction channels. Make sure to map the

mobile channel into your other communication. You never want one channel unaware of

what another channel is doing.

• All media access interactions need to be explored, exploited and seamless

- A website, blog or other social media

- Radio advertising or radio talk show

- Print media, billboards, and in-store ads

- Television

• Allow people to use the web to get SMS text

• Allow people to access the web via a SMS text message

Mobile DevicesMobile devices on the market vary widely in form, feature and function. Organizations need to be

mindful of the mobile devices they choose to target for the mobile offering. An organization should

be hitting at least 50% of its target market based on current web metrics. Web analytics should be

used to determine which devices are coming to your current web site. Further analyzing to see

which pages/transactions each device type is accessing can be helpful. Successful mobile design is

achieved when the site is usable on the most number of devices.


The popular iPhone represents only a fraction of the number of handsets in use, but iPhone users

browse the web more regularly than other device users. If you only reach 3% of mobile devices,

but you get people who really use their phone to surf the web, maybe this is all you need to

justify an iPhone-optimized website.

Phone manufactures are confident that they can create more usable web experiences to challenge

the Apple iPhone. As more companies provide useful mobile web content and transactions,

mobile website use will increase as well.

Designers and developers need to focus on newly forming mobile standards, while making

decisions about which of the devices, operating systems and browsers to design, develop and test

against.

HandsetsThe handset type greatly affects the way the user will interact with your mobile site. How a user

will actuate features or traverse content will dependent on the user interface constructs you

provide for a touch screen vs. a trackball. On traditional desktop, everyone uses a mouse and

keyboard to access the web – not so for mobile.

• Touch

• Track ball

• Qwerty

• Keypad

• Combination of the above


Operating SystemThe OS can affect the ability of the application or site to multi-task, use geographic location or

accuator positional information, date and time, zooming and scrolling, etc. The designs should

try to optimize the built-in OS features by progressively enhancing a simple site to one that is

more ‘intelligent’.

• Blackberry RIM OS

• iPhone OS

• Smartphones (Nokia and all others not listed)

• Symbian OS

• Web OS

• Windows Mobile OS

• Android

• Palm OS

ScreensBecause mobile devices and screen sizes come in all shapes and sizes, designing sites that lay out

as expected can be problematic.

Most mobile devices still have a portrait screen orientation, but the iPhone made the landscape

orientation popular. Designing a site for both adds another layer of design complexity.

The screen resolution and quality is also unique to each handset. While monochrome devices are

becoming rare, especially among consumers who access mobile sites, designers do need to

remember that displays support a wide range of colors, from just 4096 to millions.


Interaction Design for Mobile WebsitesPlan to design, develop and test your site on at least three device types. Choose one that is

optimized for a device that best supports the truest conveyance of your brand and the desired user

experience (iPhone, Blackberry, Android or Palm). The other device types tested on should

include the simplest device as well as a device with a different interaction model than the first

one you chose.

For example, if your primary device is iPhone (touchscreen), then you should also design for a

trackball and small-screen device. The input mechanism and screen size greatly affect the design,

so developing device-dependent style sheets will probably be necessary.

An appropriate level of testing would include running test cases on at least those three device

types — small screen feature phone, Smartphone (track ball) and Smartphone (touchscreen). The

interaction design standards listed below are for device-agnostic, simple mobile sites. You can

take liberty with these standards if you are using device detectors which serve the appropriate site

when the page is requested.

Graphical elements to considerReduce the site’s footprint to gain speed and responsiveness.

• Each image in a page triggers a server request

• Many phones don’t support multi-threading

• Images should be 20 kilobytes or smaller whenever possible

• Interactive images are most appropriate for touch screens

• Non-interactive images should be used sparingly

• Larger images should be pre-loading in the background if the next image set can be

anticipated


Menus Provide consistent navigation that is appropriate to the device.

• Avoid repeating links, especially at the top of the page

• Use CSS for styling

• Use vertical rather than horizontal menus

GridsControl the layout and predictability of presentation.

• Text needs appropriate margins

• Single-column layout will meet the needs of all devices

• Larger screen devices can support up to three columns

• Make sure there is enough space or demarcation between columns to increase readability

Data input optionsHandset type will drive the need for device-specific interaction styles.

• Navigation and other clickable objects must be sized and

spaced appropriately depending on whether the user is touching

or button clicking

• Be careful when using selection tools (checkboxes, radio

buttons)

• Text entry can be difficult, so minimize when possible

• Pre-populate forms from cache or cookies whenever possible

• Take advantage of “remember this” (e-mail, phone, etc.)

• QWERTY keyboards are getting better on touchscreens, but

physical QWERTY keyboards still provide the most accurate and

efficient data entry

• No pop-ups


ScrollingScrolling is harder on a mobile device, no matter which handset.

• Limited vertically (keypad, trackball, flick)

• Up to 4-5 times the screen height

• Present essential content only

• Use all available space

• Never run long text horizontally

• Use relative values rather than absolutes

System response (command received, command accepted/failed)Mobile device networks are not as fast as broadband. Data transfer rates vary with network traffic

demands. Some devices don’t support multi-threaded calls, so each element needs to wait for the

previous element to load.

• Reduce requests from server

• Use a maximum of eight elements per page that are externally linked, such as CSS,

images, markup, and flash

• Reduce page size

• Due to limitations of Smartphone memory, each page should be no more than 50

kilobytes

• Break pages up as necessary

• Avoid or limit the use of JavaScript

• Avoid Flash video, and drop-down navigation


Emulate and Test DesignsIf you don’t physically possess all the devices you hope to design for, using emulators will give

you good approximations of what your site will look like on those devices.

• iBBDemo2: Adobe Air app will let you see content as it would appear on the iPad and on

the iPhone.

• Android SDK: Android SDK comes with its own device emulator so you can see how

websites will appear on Android handsets.

• Blackberry Web Development Page: BlackBerry simulators and includes tips for designing

for BlackBerry devices.

• Symbian S60 SDK: Nokia’s S60 platform and available emulators.

• Opera Mini Emulator: Opera desktop version of its mobile browser.

Stay Curious and Test IdeasCompanies need to challenge themselves to be where the customers expect. By doing so, they

can develop product and service offerings that delight their customers while producing another

lucrative revenue stream. The mobile web is an exciting place for technologists to explore and

experiment, to invent and to refine the mobile web.

You define user-proven best practices by:

• Continually exploring mobile spaces and gathering competitive intelligence

• Iteratively emulating designs in multiple mobile device platforms

- Sketches/Wireframes

- Prototypes

- Device installs

• Testing with real end users


Perficient’s Mobile ExperiencePerficient has researched, designed, built and tested mobile device software implementations in

industries including healthcare, financial services, insurance, retail, government, and energy. We

have experience creating websites that transpose gracefully on mobile devices, and as mobile

devices evolve with enhanced web-browsing capabilities, we ensure that websites progress to

extend the experience from basic to touch. Through established web standards and development

kits it is becoming increasingly possible to create experiences that easily grow along with user

demand and device support.

AuthorsDeeDee DeMulling is Director, User Experience and has more than 15 years of experience

researching, designing and testing products and systems using user experience techniques. Much

of her career has been spent designing web sites and web applications, and in recent years she

has evolved to help clients extend their web offerings to mobile devices. She has experience

researching, designing and testing mobile touch-screen interactions and has also found ways to

bring those insights to non-touch-screen mobile interactions. She is passionate about delivering

satisfying user experiences and strives to design connections between the physical and virtual

world in ways that make sense.

DeeDee DeMulling | [email protected]

Director, User Experience

Jonathan Distad is a Senior Business Consultant with more than 10 years of web and application

development experience. His recent efforts have supported client-driven efforts to mobilize

enterprise workforces through effective collaboration solutions that include mobile application

design, governance and security. He writes, blogs and speaks frequently on enterprise collabo-

ration and mobility and is a sought-after subject matter expert in the areas of collaboration and

workforce mobilization.

Jonathan Distad | [email protected]

Senior Business Consultant


References“Designing for the Mobile Web”, Site Point, Brian Suda, 12 March 2008,

http://articles.sitepoint.com/article/designing-for-mobile-web

“More Smartphones Than Desktop PCs by 2011”, PC World, Lexton Snoll, 09 Sept 2009,

http://www.pcworld.com/article/171380/

“HOW TO: Optimize Your Mobile Site Across Multiple Platforms”, Mashable Dev & Design, 13

July 2010, http://mashable.com/2010/07/13/mobile-web-optimization/

“HOW TO: Make Your Mobile Websites Act More Like Native Apps”, Mashable Dev and Design,

18 August 2010, http://mashable.com/2010/08/18/mobile-web-app-frameworks/

“Best Practices for IBM Mobile Portal Accelerator Design (WebSphere Everyplace Mobile Portal)”,

IBM Best Practices, 14 April 2010, http://www-10.lotus.com/ldd/portalwiki.nsf/dx/Best_Practices_

for_WebSphere_Everyplace_Mobile_Portal_Design

“Full Analysis of iPhone Economics - It is bad news. And then it gets worse”, Communities

Dominate Brand Blog, Tomi T Ahonen and Alan Moore, 22 June 2010, http://communities-

dominate.blogs.com/brands/2010/06/full-analysis-of-iphone-economics-its-bad-news-and-then-it-

gets-worse.html

Follow Industry StandardsMobile Web Best Practices 1.0, Basic Guidelines, W3C Working Draft, 29 July 2008,

http://www.w3.org/TR/mobile-bp/

Extended Guidelines for Mobile Web Best Practices 1.0, W3C Working Group Note, 20 October

2009, http://www.w3.org/TR/mwbp-guidelines/

Web Content Accessibility Guidelines 2.0; W3C Recommendation, 11 December 2008,

http://www.w3.org/TR/WCAG20/

iPhone Touch Standards, 3 June 2010, ttp://developer.apple.com/library/ios/documentation/

UserExperience/Conceptual/MobileHIG/MobileHIG.pdf


Technology

Best Practices in Mobile Web Design