Google Webinar - Mobile Site Best Practices in Action

8/3/2019 Google Webinar - Mobile Site Best Practices in Action

http://slidepdf.com/reader/full/google-webinar-mobile-site-best-practices-in-action 1/47

Google Confidential and Proprietary

Google confidential

Best Practices in Action

November 10, 2011

Making Mobile-Friendly Websites




Google confidential

2Google Confidential and Proprietary

GoMo is a Google-led initiative dedicated to helping

businesses “Go Mobile” by providing them with the tools andresources they need to make their websites more mobile-friendly.

HowToGoMo.com




Google confidential

3 Google confidential

#GoMobile




Google confidential

Agenda

The mobile momentum

Why mobile sites matter

Ten mobile site best practices

Best practices in action

Build a mobile website




Google confidential

The Mobile Momentum




Google confidential

Mobile is ramping upfaster than any other

technology we haveseen in the past.

Mary MeekerKleiner Perkins ”

“

6Google Confidential and Proprietary




Smartphones Have Gone Mainstream

7

over halfof Americans will havea smartphone.

By the end of 2011

Source: Nielsen March 2010, Morgan Stanley 2010




The mobile consumer accesses information at all times

8

89%

13%

77%

43%Use mobile internet

while having ameaningful

conversation

Use mobile internetfor research and to

read the news

Use mobile internetwhile commuting ortravelling for workand school

Use mobile internet

when in a store

Of all smartphone users:




A “double peak” in mobile queries around theholiday season

9

US Mobile queries for top retail brand terms

Mobile queries

grew nearly 3xfrom 2009-2010 holidayseason. Queries continued

to escalate upwards after theholiday season into 2011


http://slidepdf.com/reader/full/google-webinar-mobile-site-best-practices-in-action 10/47Google Confidential and ProprietaryGoogle confidential

Why mobile-friendly sites matter

10



Which would you prefer to use?

11

Desktop site viewed on mobile Mobile-friendly website


http://slidepdf.com/reader/full/google-webinar-mobile-site-best-practices-in-action 12/47Google Confidential and ProprietaryGoogle confidential12

of large online advertisersdo not have

a mobile optimized site

79%



58% of mobile phone users expect mobile sites to loadas quickly, or faster than desktop sites.

Ad Slot

Google

Mobile users have high expectations

13

Source: Compuware, “Why the Mobile Web is Disappointing End-users.” March 2011

Mobile users value speed

38% of users are willingto wait 30 seconds or

less to complete a simple

transaction.

www.nytimes.comGooglemobile.nytimes.com



Why invest in a mobile site?

14

Source: C ompuware, “Why the Mobile Web is Disappointing End-U sers.” March 2011

51% more likely to purchase from retailers

85% increased engagement

40% would visit a competitor’s siteinstead due to a disappointing mobileexperience

to boost performance:

to keep customers:



Ten Mobile Site Best Practices



Google Confidential and ProprietaryGoogle confidential

Ten mobile site best practices

16

learn, listen & iterate

good mobile sites are user-centric,meaning they’re built with input fromyour audience.

be thumb friendly

design your site so even large handscan easily interact with it.

design for visibility

ensure your content can be readat arm’s length.

make it local

include functionality that helps peoplefind and get to you.

use mobile site redirects

give users a choice to go back to the

desktop site, but make it easy toreturn to the mobile site.

keep it quick

help mobile users, design your siteto load fast and make copy easy toscan.

make it seamless

bring as much of the functionalityof your desktop site to mobile.

simplify navigation

clear navigation, hierarchy andvertical scrolling aid access toinformation.

make it accessible

ideally, your mobile site should workacross all mobile devices and allhandset orientations.

make it easy to convert

focus on information thatwill aid conversion.




Keep it quick

17

.

Reduce large blocksof text and use bullet

points for easyreading.

Prioritize the

content andfeatures thatmobile usersneed most. Useyour desktopsite analytics tosee what mobileusers are doing.

Compress imagesto keep themsmall for fastersite loading




Simplify navigation

18

Have a search boxprominently availableon complex sites

Minimize scrolling andkeep it vertical only.

Have a clear hierarchyin menus and avoidrollovers

Help users navigatebetween levels with

clear back and homebuttons.




Be thumb-friendly

19

Use largecenteredbuttonsand give

thembreathingroom toreduceaccidentalclicks.

Pad smallerbuttons toincrease the

clickable area.




Design for visibility

20

Use size and color toindicate link/button priority.

Make sure content fitsonscreen and can beread without pinchingor zooming.

Use 3D effects andshadowing for buttons.

Create contrast betweenbackground and text.

Use plenty of negativespace.




Make it accessible

21

Find alternatives to Flash – it doesn’t work on somemobile devices.

Use HTML5 for interactivityand animation.

Adapt your site for bothvertical and horizontalorientations.

Keep users in the sameplace when they change

orientation.




Make it easy to convert

22

Use click-to-callfunctionalityfor phonenumbers

Reduce the number

of steps to completea transaction.

Use checkboxes,lists and scrollmenus to makedata entry easier

Keep forms shortand use the fewestnumber of fieldspossible

Focus oninformation that willaid conversion




Make it local

23

Allow usersto checkstock atnearbystores.Includelocal adsand deals.

Have your

address orstore locatoron thehomepage.

Includemaps anddirections.

Use GPS topersonalizewhenpossible.




Make it seamless

24

Provide prominent

access to login,shopping cart andsaved favoritesfunctionality to make iteasier for users whogo between mobile anddesktop devices.

Display the same keyinformation forproduct and services.

Maintain key featuresof the site across alchannels as much aspossible.




Use mobile site redirects

25

Give users the choice to goback to the desktop site, butmake it easy to return to themobile site

Let users choose whichversion they prefer tosee for later visits

Include key informationsuch as your addressor store locator, on the

redirect page




Listen, learn and iterate

26

Use analytics tounderstand how mobileusers use your site.

If possible, do user testingbefore launching acomplex site.

Implement and collect userfeedback after launch.

Iterate often andcontinuously improve yoursite.




Case Studies:Best Practices in Action




Ryland Homes – Desktop website

28



Google Confidential and ProprietaryGoogle confidential29 Google confidential

be thumb friendly

the Ryland site uses buttons instead of links.buttons give more room and space for peopleto touch and work with the screen.

Ryland Homes (www.ryland.com)

design for visibility

the text and layout is clear, and easily legibleat arm’s length. content fits onscreen and can be

read without pinching and zooming.





simplify navigation

intuitive site navigation featuressuch as a persistent “back” button at the top andbottom of the screen provides for easier reversenavigation.





make it accessible

to ensure a consistently high-quality experienceacross mobile devices, Ryland uses jQueryMobile software to load a site variation thatworks best with any device. the site also avoids

the use of Flash.

make it easy to convert

Ryland provides the essential info customers want.

They focused on features such as clickablephone numbers, location-based drivingdirections to nearby communities, and brief inforequest forms to increase mobile conversions.




Ryland Homes – Success results

32

• 300% increase in mobile-driven site traffic

• 30% savings in cost-per conversion on mobilevs. desktop AdWords campaigns

• Strong growth in mobile driven leads

• First home sold from a mobile-generated lead




Insurance Auto Auctions, Inc – cars.iaai.com

33




IAAI (cars.iaai.com)

make it seamless

the mobile site maintains the same look and feel ofthe desktop site and offers users a consistentbrand experience. The key features andfunctionality offered on desktop are put front andcenter for easy access by mobile users.

make it localthe site loads locally relevant content for mobileusers, including the location of their nearest IAAIoffice and the hours telephones are answered thatday, in local time.





use mobile site redirects

The main site employs an automatic redirect tosend incoming mobile devices to the mobile site.Users can also easily go back and forth between

mobile and full desktop websites.




IAAI (iaai.cars.com)

keep it quick

the mobile site concentrates on delivering content

most likely to drive fast conversions: informationabout IAAI locations, easy access to the onlineprice guide, and strong contact calls to action.





learn, listen & iterate

the mobile development team continues to test,refine and build out the site. with the basics done,they are adding audio and video content to tout

the benefits of selling to IAAI.




Build a mobile website




Get started today: see what your mobile customers see

40

Run your site through the GoMoMeter at HowToGoMo.com




Look at your Site Analytics

41

See how your mobile traffic has changed over time




Look at your site analytics

42

Segment traffic by mobile users to prioritize content




Visit HowToGoMo.com for more mobile sites resources

45

THANK YOU!




www.howtogomo.com

THANK YOU!



Additional Resources

Mobile Siteswww.HowToGoMo.com

Google Mobile Ads Blog http://googlemobileads.blogspot.com/

Google Mobile Ads Sitewww.google.com/mobileads

Google Mobile Ads YouTube Channelwww.youtube.com/GoogleMobileAds

Twitterwww.twitter.com/googlemobileads

Free template: Google Sites for Mobile landing pagessites.google.com/mobilize

The webinar slides and recording will be madeavailable on the Google Mobile Ads Blog.

http://www.howtogomo.com/

http://googlemobileads.blogspot.com/

http://www.google.com/mobileads

http://www.youtube.com/GoogleMobileAds

http://www.twitter.com/googlemobileads

http://www.google.com/sites/help/intl/en/mobile-landing-pages/mlpb.html

http://www.google.com/sites/help/intl/en/mobile-landing-pages/mlpb.html

http://www.twitter.com/googlemobileads

http://www.youtube.com/GoogleMobileAds

http://www.google.com/mobileads

http://googlemobileads.blogspot.com/

http://www.howtogomo.com/

Google Webinar - Mobile Site Best Practices in Action

Documents

Transcript of Google Webinar - Mobile Site Best Practices in Action