Mobile-Friendly WebsitesShane Cassells, Online Conversions ExpertMay 2012  Google confidentialand Proprietary   Google Con...
@sc_tweets2   Google confidentialand Proprietary     Google Confidential
gplus.to/shanecassells3   Google confidentialand Proprietary     Google Confidential
AgendaThe mobile momentumWhy mobile sites matterTen mobile site best practicesBest practices in actionBuild a mobile websi...
The Mobile MomentumGoogle confidentialand Proprietary Google Confidential
Smartphones Have Gone Mainstream                                      51%                                       of mobile ...
DEMOGRAPHICS7                  Google Confidential and Proprietary
8   Google Confidential and Proprietary
9   Google Confidential and Proprietary
The mobile consumer accesses information all the time                      Of all smartphone users:Use mobile Internet    ...
Why mobile-friendly sites matter11   Google confidentialand Proprietary      Google Confidential
Mobile doubles the number of conversionpaths available to consumers                   OFFLINE             ONLINE          ...
Two Thirds of consumers prefer the mobile Web over AppsBenefits of Mobile Web over Apps:            Easier for consumers t...
Mobile Site Types Landing Pages Transcoded Full Mobile Site14 Google confidentialand Proprietary    Google Confidential
Which would you prefer to use?              Desktop site viewed on mobile   Mobile-friendly website15   Google confidentia...
Mobile users have high expectations58% of mobile phone users expect mobile sites to loadas quickly or faster than desktop ...
Why invest in a mobile site?                                                             to boost performance:            ...
Ten Mobile Site Best PracticesGoogle confidentialand Proprietary Google Confidential
Look at your site analyticsSegment traffic by mobile users to prioritise content19   Google confidentialand Proprietary   ...
Ten mobile site best practices                 keep it quick                           make it easy to convert            ...
Keep it quick                                          Reduce large blocks                                          of tex...
Simplify navigation                                          Have a clear hierarchy         Minimise scrolling and        ...
Be thumb friendly                              Use large,                              centred                            ...
Design for visibility     Create contrast between     background and text.                 Use plenty of negative         ...
Make it accessible     Use HTML5 for interactivity     and animation.     Adapt your site for both             Find altern...
Make it easy to convertUse click-to-callfunctionalityfor phonenumbers                                       Keep forms sho...
Make it local                                              Allow users to                                              che...
Make it seamless               Provide prominent               access to login,               shopping cart and           ...
Use mobile site redirectsInclude keyinformation,such as youraddress orshop locator,                                Let use...
Listen, learn and iterateUse analytics to                          Implement and collect userunderstand how mobile        ...
Case Studies:Best Practices in ActionGoogle confidentialand Proprietary Google Confidential
kiddicare.com – Desktop Website32   Google confidentialand Proprietary      Google Confidential
kiddicare.com                                        make it seamless                                        the mobile si...
kiddicare.com                                        make it accessible                                        to ensure a...
kiddicare.com – Success results                                            •Recorded first order 4 minutes after launch   ...
Build a mobile websiteGoogle confidentialand Proprietary Google Confidential
Use the GetMoMeter at HowToGetMo.com37   Google confidentialand Proprietary      Google Confidential
Determine the scope and type of mobile site you need               Landing page to            Microsite for a product     ...
And dream…Google confidentialand Proprietary Google Confidential
…of new ways to make the most of mobile40   Google confidentialand Proprietary      Google Confidential
Thank You!                                     41Google confidentialand Proprietary Google Confidential
Upcoming SlideShare
Loading in...5
×

Mobile Friendly Websites

1,702

Published on

Published in: Business, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,702
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Mobile Friendly Websites

  1. 1. Mobile-Friendly WebsitesShane Cassells, Online Conversions ExpertMay 2012 Google confidentialand Proprietary Google Confidential
  2. 2. @sc_tweets2 Google confidentialand Proprietary Google Confidential
  3. 3. gplus.to/shanecassells3 Google confidentialand Proprietary Google Confidential
  4. 4. AgendaThe mobile momentumWhy mobile sites matterTen mobile site best practicesBest practices in actionBuild a mobile websiteGoogle confidentialand Proprietary Google Confidential
  5. 5. The Mobile MomentumGoogle confidentialand Proprietary Google Confidential
  6. 6. Smartphones Have Gone Mainstream 51% of mobile owners in the UK have a SmartphoneSource: Enumeration Study, Feb 2012 Google Confidential and Proprietary 6
  7. 7. DEMOGRAPHICS7 Google Confidential and Proprietary
  8. 8. 8 Google Confidential and Proprietary
  9. 9. 9 Google Confidential and Proprietary
  10. 10. The mobile consumer accesses information all the time Of all smartphone users:Use mobile Internet Use mobile Internet while having a 13% 43% while commuting or meaningful travelling for work conversation and to school 89% 77%Use mobile Internetfor research and to Use mobile Internet read the news when in a shop Google Confidential and Proprietary 10
  11. 11. Why mobile-friendly sites matter11 Google confidentialand Proprietary Google Confidential
  12. 12. Mobile doubles the number of conversionpaths available to consumers OFFLINE ONLINE MOBILE RESEARCH  Research on Mobile and conversion on Desktop is primarily  driven by poor Mobile website experience; PURCHASE OFFLINE ONLY 1 conversion path OFFLINE + ONLINE 4 conversion paths OFFLINE + ONLINE + MOBILE 9 conversion paths Google Confidential and Proprietary 12
  13. 13. Two Thirds of consumers prefer the mobile Web over AppsBenefits of Mobile Web over Apps: Easier for consumers to find through Search, Blogs, Twitter and links in emails. Increased Market Size. Impressions and clicks higher on mobile Web than Apps. Anyone has access to your site. Lower development costs creating a mobile web site vs. developing a mobile app. Easier to support & maintain. If changes are made, there is no need to upgrade because all users see the newest versionSource: Adobe Mobile Experience Survey, Oct 2010 1313 Google confidentialand Proprietary Google Confidential
  14. 14. Mobile Site Types Landing Pages Transcoded Full Mobile Site14 Google confidentialand Proprietary Google Confidential
  15. 15. Which would you prefer to use? Desktop site viewed on mobile Mobile-friendly website15 Google confidentialand Proprietary Google Confidential
  16. 16. Mobile users have high expectations58% of mobile phone users expect mobile sites to loadas quickly or faster than desktop sites. Mobile users value speed www.guardian.co.uk Google m.guardian.co.uk Google 38% of users are willing Ad Slot to wait 30 seconds or less to complete a simple transaction.Source: Compuware, “Why the Mobile Web is Disappointing End-users”. March 201116 Google confidentialand Proprietary Google Confidential
  17. 17. Why invest in a mobile site? to boost performance: 51% more likely to purchase from retailers 85% increased engagement to keep customers: 40% would visit a competitor’s site instead because of a disappointing mobile experienceSource: Compuware, “Why the Mobile Web is Disappointing End-Users”. March 2011 17 Google confidentialand Proprietary Google Confidential
  18. 18. Ten Mobile Site Best PracticesGoogle confidentialand Proprietary Google Confidential
  19. 19. Look at your site analyticsSegment traffic by mobile users to prioritise content19 Google confidentialand Proprietary Google Confidential
  20. 20. Ten mobile site best practices keep it quick make it easy to convert help mobile users - design your site to load quickly and make copy easy focus on information that to scan. will aid conversion. simplify navigation make it local clear navigation, hierarchy and vertical scrolling aid access to include functionality that helps people information. find you and get to you. be thumb friendly make it seamless design your site so that even large bring as much of the functionality hands can interact with it easily. of your desktop site to mobile as you can. design for visibility use mobile site redirects give users a choice to go back to the ensure that your content can be read desktop site, but make it easy to at arm’s length. return to the mobile site. make it accessible learn, listen & iterate ideally, your mobile site should work good mobile sites are user-centric, across all mobile devices and all meaning they’re built with input from handset orientations. your audience.20 Google confidentialand Proprietary Google Confidential
  21. 21. Keep it quick Reduce large blocks of text and use bullet points for easy reading. Compress images to keep them small for faster Prioritise the content site loading and features that mobile users need most. Use your desktop site analytics to see what mobile users are doing.21 Google confidentialand Proprietary Google Confidential
  22. 22. Simplify navigation Have a clear hierarchy Minimise scrolling and in menus and avoid keep it vertical only. rollovers Have a search box prominently available on complex sites Help users navigate between levels with clear Back and Home buttons.22 Google confidentialand Proprietary Google Confidential
  23. 23. Be thumb friendly Use large, centred buttons and give them breathing room to reduce accidental Pad smaller clicks. buttons to increase the clickable area.23 Google confidentialand Proprietary Google Confidential
  24. 24. Design for visibility Create contrast between background and text. Use plenty of negative space. Use size and colour to Make sure that content indicate link/button priority. fits on-screen and can be read without pinching or zooming. Use 3D effects and shadowing for buttons.24 Google confidentialand Proprietary Google Confidential
  25. 25. Make it accessible Use HTML5 for interactivity and animation. Adapt your site for both Find alternatives to Flash – vertical and horizontal it doesn’t work on some orientations. mobile devices. Keep users in the same place when they change orientation.25 Google confidentialand Proprietary Google Confidential
  26. 26. Make it easy to convertUse click-to-callfunctionalityfor phonenumbers Keep forms short and use the fewest number of fields possibleUsecheckboxes,lists and scroll Use HTML5 in formmenus to fields for easiermake data data completionentry easier Focus on information that will aid conversion 26 Google confidentialand Proprietary Google Confidential
  27. 27. Make it local Allow users to check stock at shops nearby. Include local ads and deals.Put youraddress orshop locatoron thehomepage. Include maps and directions. Use GPS to personalise, when possible. 27 Google confidentialand Proprietary Google Confidential
  28. 28. Make it seamless Provide prominent access to login, shopping cart and saved favourites functionality to make it easier for users who go between mobile and Maintain key features desktop devices. of the site across all channels as much as possible. Display the same key information for products and services.28 Google confidentialand Proprietary Google Confidential
  29. 29. Use mobile site redirectsInclude keyinformation,such as youraddress orshop locator, Let userson the choose whichredirect page version they prefer to see on later visits Give users the choice to go back to the desktop site, but make it easy to return to the mobile site 29 Google confidentialand Proprietary Google Confidential
  30. 30. Listen, learn and iterateUse analytics to Implement and collect userunderstand how mobile feedback after launching.users use your site.If possible, carry out user Iterate often andtesting before launching a continuously improve yourcomplex site. site.30 Google confidentialand Proprietary Google Confidential
  31. 31. Case Studies:Best Practices in ActionGoogle confidentialand Proprietary Google Confidential
  32. 32. kiddicare.com – Desktop Website32 Google confidentialand Proprietary Google Confidential
  33. 33. kiddicare.com make it seamless the mobile site maintains the same look and feel of the desktop site and offers users a consistent brand experience. The key features and functionality offered on desktop are put front and centre for easy access by mobile users. simplify navigation intuitive site navigation features, including greatly reduced top level navigation for mobile. kiddicare.com have learned that users will navigate more on mobile if they are given well refined results in the end.33 Google confidentialand Proprietary Google Confidential
  34. 34. kiddicare.com make it accessible to ensure a consistently high-quality experience across mobile devices, kiddicare.com have built a mobile version of their site which uses no Flash, despite it being a major feature of their desktop site. keep it quick the mobile site concentrates on delivering content most likely to drive fast conversions: information about discounts, easy access to the online price guide and even compressed videos of the products in action.34 Google confidentialand Proprietary Google Confidential
  35. 35. kiddicare.com – Success results •Recorded first order 4 minutes after launch •Mobile performance consistent with desktop – same conversion rate, same categories of purchases, same average order value •Increased traffic on mobile by 36% in just three months •Projected growth of mobile to 20% of all orders by end of 2012 “If you can only do one, do mobile website over app because you can gain a wider reach.” --Simon Harrow, Technology Officer, kiddicare.com35 Google confidentialand Proprietary Google Confidential
  36. 36. Build a mobile websiteGoogle confidentialand Proprietary Google Confidential
  37. 37. Use the GetMoMeter at HowToGetMo.com37 Google confidentialand Proprietary Google Confidential
  38. 38. Determine the scope and type of mobile site you need Landing page to Microsite for a product Full mobile website generate leads or campaign launch38 Google confidentialand Proprietary Google Confidential
  39. 39. And dream…Google confidentialand Proprietary Google Confidential
  40. 40. …of new ways to make the most of mobile40 Google confidentialand Proprietary Google Confidential
  41. 41. Thank You! 41Google confidentialand Proprietary Google Confidential

×