Mobile Friendly Websites

  • 1,497 views
Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,497
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile-Friendly WebsitesShane Cassells, Online Conversions ExpertMay 2012 Google confidentialand Proprietary Google Confidential
  • 2. @sc_tweets2 Google confidentialand Proprietary Google Confidential
  • 3. gplus.to/shanecassells3 Google confidentialand Proprietary Google Confidential
  • 4. AgendaThe mobile momentumWhy mobile sites matterTen mobile site best practicesBest practices in actionBuild a mobile websiteGoogle confidentialand Proprietary Google Confidential
  • 5. The Mobile MomentumGoogle confidentialand Proprietary Google Confidential
  • 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. DEMOGRAPHICS7 Google Confidential and Proprietary
  • 8. 8 Google Confidential and Proprietary
  • 9. 9 Google Confidential and Proprietary
  • 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. Why mobile-friendly sites matter11 Google confidentialand Proprietary Google Confidential
  • 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. 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. Mobile Site Types Landing Pages Transcoded Full Mobile Site14 Google confidentialand Proprietary Google Confidential
  • 15. Which would you prefer to use? Desktop site viewed on mobile Mobile-friendly website15 Google confidentialand Proprietary Google Confidential
  • 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. 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. Ten Mobile Site Best PracticesGoogle confidentialand Proprietary Google Confidential
  • 19. Look at your site analyticsSegment traffic by mobile users to prioritise content19 Google confidentialand Proprietary Google Confidential
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Case Studies:Best Practices in ActionGoogle confidentialand Proprietary Google Confidential
  • 32. kiddicare.com – Desktop Website32 Google confidentialand Proprietary Google Confidential
  • 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. 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. 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. Build a mobile websiteGoogle confidentialand Proprietary Google Confidential
  • 37. Use the GetMoMeter at HowToGetMo.com37 Google confidentialand Proprietary Google Confidential
  • 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. And dream…Google confidentialand Proprietary Google Confidential
  • 40. …of new ways to make the most of mobile40 Google confidentialand Proprietary Google Confidential
  • 41. Thank You! 41Google confidentialand Proprietary Google Confidential