Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Best Practices in Mobile Web Design


Published on

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.

Published in: Technology

Best Practices in Mobile Web Design

  1. 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 BECOME A FAN OF PERFICIENT ON FACEBOOK FOLLOW PERFICIENT ON TWITTER DOWNLOAD PERFICIENT WHITE PAPERS © 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.
  2. 2. Abstract Businesses know their customers are using mobile devices, but many businesses dont 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 broadbandGoing 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. 3. service offerings, the mobile strategy can be crafted to ensure the most gratifying user experienceby supporting the customer’s needs for mobile content and tasks while respecting theirexpectation of privacy and security.Understand the business purposeMany companies make the mistake of trying to come up with new and novel mobile offeringsbefore they’ve fully explored these offerings as a business. Experience has shown that businessesare more successful with a mobile offering that has already been web-tested, even if it’s not theentire web experience that’s being offered on mobile. Tested offerings can be brought to marketquicker 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 existingweb platform investments and find ways to extend that platform into the mobile space. As themobile space matures, it will be easier to share, support and maintain security, contentmanagement 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 whilekeeping in mind that privacy and security are crucial on devices used in public and that are easilylost. Displaying information that may affect a person’s privacy or storing credentials maycompromise a user’s secure information.IBM has developed a new product, the Mobile Portal Accelerator, which exposes the WebSphereportal 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 morecompanies 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 onlyprovide features and content that makes sense to a person on the go. A mobile site has to deliverworthwhile content and features, knowing that users are usually moving or otherwise distractedby their environment. Best Practices in Mobile Web Design t 3
  4. 4. 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 nowCustomer expectations for mobile sites are expanding at a breakneck pace and range from simplecontent presentation to performing highly complex, secure data transactions.Content and InformationBrowsing content is the most common user activity during a mobilesession. Sites like and push, stream and providecontent through mobile-styled web sites. Mobile site standards arebeing defined and adopted by content owners to create a specific look,feel and experience while complying with design patterns that usershave learned to interact with based on other sites they visit.Transactional SitesMany users expect to perform a specific task or complete a transactionon their mobile device, such as depositing a check, buying movietickets or making a reservation. Such transactions often best takeplace via a downloaded application to the phone or a web-basedapplication. Device, business goals and user goals will dictate which. Organizations should planfor broad-based device adoption by being mindful that a “hot” device today could fall out offavor in six months.While most secure transactions are taking place via device-specific applications, as the softwarepackages, programming languages, devices and networks mature, there is a shift from mobileapplication 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 marketcontinues to rapidly change. Best Practices in Mobile Web Design t 4
  5. 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 (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. 6. Mobile Web (XHTML, WML)There was a time when all desktop applications needed to be web browser enabled. Many yearson, enterprises need to provide their website to the mobile device. Deploying services, contentand transactions to a mobile device, if optimized for the most appropriate device, will preserve arich interaction even at the most basic level.Best practices recommend developing a mobile site thatdegrades from a rich iPhone-like experience to a simple textsite or, conversely, designing for the simplest Smartphoneand progressively enhancing the experience as the devicebecomes more capable.There are few storage issues to consider for a mobile site,aside from basic cache and cookies. However, one area tobe mindful of is data transfer. A mobile site transfers datawhile the transaction or information grab takes place.Limiting image and character loading will greatly reducedata transfer, resulting in a faster load time and a better userexperience. If designed and developed correctly, the mobilesite can render to almost any device, be it simple web orrich-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. Best Practices in Mobile Web Design t 6
  7. 7. When developing a mobile application, it’s important to be mindful of a few things that may limitadoption. • 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 onmobile devices. But when you begin to load music, movies, photos, documents and coreapplications, the average device can quickly run short of storage and memory. Applications willcontinue to struggle with inadequate storage space on a hand-sized mobile device. Appledevices 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 supplierscreate faster phones with more storage, this should be less of an issue. But remember, the typeand 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. 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 messageMobile 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. 9. The popular iPhone represents only a fraction of the number of handsets in use, but iPhone usersbrowse 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 tojustify an iPhone-optimized website.Phone manufactures are confident that they can create more usable web experiences to challengethe 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 makingdecisions about which of the devices, operating systems and browsers to design, develop and testagainst.HandsetsThe handset type greatly affects the way the user will interact with your mobile site. How a userwill actuate features or traverse content will dependent on the user interface constructs youprovide for a touch screen vs. a trackball. On traditional desktop, everyone uses a mouse andkeyboard 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. 10. Operating SystemThe OS can affect the ability of the application or site to multi-task, use geographic location oraccuator positional information, date and time, zooming and scrolling, etc. The designs shouldtry to optimize the built-in OS features by progressively enhancing a simple site to one that ismore ‘intelligent’. • Blackberry RIM OS • iPhone OS • Smartphones (Nokia and all others not listed) • Symbian OS • Web OS • Windows Mobile OS • Android • Palm OSScreensBecause mobile devices and screen sizes come in all shapes and sizes, designing sites that lay outas expected can be problematic.Most mobile devices still have a portrait screen orientation, but the iPhone made the landscapeorientation 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 arebecoming rare, especially among consumers who access mobile sites, designers do need toremember that displays support a wide range of colors, from just 4096 to millions. Best Practices in Mobile Web Design t 10
  11. 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. 12. MenusProvide 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 menusGridsControl 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 readabilityData 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 Best Practices in Mobile Web Design t 12
  13. 13. 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 absolutesSystem response (command received, command accepted/failed)Mobile device networks are not as fast as broadband. Data transfer rates vary with network trafficdemands. Some devices don’t support multi-threaded calls, so each element needs to wait for theprevious 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. 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. 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 | 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 | Senior Business Consultant Best Practices in Mobile Web Design t 15
  16. 16. References “Designing for the Mobile Web”, Site Point, Brian Suda, 12 March 2008, “More Smartphones Than Desktop PCs by 2011”, PC World, Lexton Snoll, 09 Sept 2009, “HOW TO: Optimize Your Mobile Site Across Multiple Platforms”, Mashable Dev & Design, 13 July 2010, “HOW TO: Make Your Mobile Websites Act More Like Native Apps”, Mashable Dev and Design, 18 August 2010, “Best Practices for IBM Mobile Portal Accelerator Design (WebSphere Everyplace Mobile Portal)”, IBM Best Practices, 14 April 2010, 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- gets-worse.htmlFollow Industry Standards Mobile Web Best Practices 1.0, Basic Guidelines, W3C Working Draft, 29 July 2008, Extended Guidelines for Mobile Web Best Practices 1.0, W3C Working Group Note, 20 October 2009, Web Content Accessibility Guidelines 2.0; W3C Recommendation, 11 December 2008, iPhone Touch Standards, 3 June 2010, ttp:// UserExperience/Conceptual/MobileHIG/MobileHIG.pdf Best Practices in Mobile Web Design t 16