Businesses 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.

1. A M O B I L E S O L U T I O N S W H I T E PA P E R
Best Practices in
Mobile Web Design
SUBSCRIBE TO PERFICIENT BLOGS ONLINE
www.Perficient.com/SocialMedia
BECOME A FAN OF PERFICIENT ON FACEBOOK
www.Facebook.com/Perficient
FOLLOW PERFICIENT ON TWITTER
www.Twitter.com/Perficient
DOWNLOAD PERFICIENT WHITE PAPERS
www.Perficient.com/WhitePapers
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 any
person 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 of
Perficient, Inc. is prohibited and will be subject to legal action.

2. Abstract
Businesses 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 Facts
The 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 Mobile
Every 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

3. 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 purpose
Many 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 purpose
A 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.
Best Practices in Mobile Web Design t 3

4. Consumer Types
There 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 Information
Browsing 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 Sites
Many 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.
Best Practices in Mobile Web Design t 4

5. Hybrid Sites
Some 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 Channels
Mobile 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
Best Practices in Mobile Web Design t 5

6. 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 Applications
Applications 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.
Best Practices in Mobile Web Design t 6

7. 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.
Storage
Storage 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.
Best Practices in Mobile Web Design t 7

8. Cross-channel coordination
Companies 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 Devices
Mobile 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.
Best Practices in Mobile Web Design t 8

9. 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.
Handsets
The 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
Best Practices in Mobile Web Design t 9

10. Operating System
The 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
Screens
Because 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.
Best Practices in Mobile Web Design t 10

11. Interaction Design for Mobile Websites
Plan 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 consider
Reduce 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
Best Practices in Mobile Web Design t 11

12. 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
Grids
Control 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 options
Handset 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
Best Practices in Mobile Web Design t 12

13. Scrolling
Scrolling 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
Best Practices in Mobile Web Design t 13

14. Emulate and Test Designs
If 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 Ideas
Companies 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
Best Practices in Mobile Web Design t 14

15. Perficient’s Mobile Experience
Perficient 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.
Authors
DeeDee 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 | DeeDee.DeMulling@Perficient.com
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 | Jonathan.Distad@Perficient.com
Senior Business Consultant
Best Practices in Mobile Web Design t 15

16. 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 Standards
Mobile 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
Best Practices in Mobile Web Design t 16