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.

Mobile Landing Page Optimization - SES New York 2012

6,175 views

Published on

Leverage these 10 best practices to provide a quality landing page experience for both desktop and mobile users that converts! Includes tips to implement click-to-call, default zipcode fields by geoIP, and more.

Published in: Technology, Business

Mobile Landing Page Optimization - SES New York 2012

  1. 1. Leverage these 10 best practices to provide an optimized landing page experience for both desktop and mobile users that converts. Mobile Landing Page OptimizationAngie Schottmuller #SESNY #LPO #mobile@aschottmullerFounder, Interactive ArtisanStrategist, Search Engine Watch New York | March 19–23, 2012
  2. 2. Where do YOUR online guests land?
  3. 3. What’s their view of your landing page?
  4. 4. A common web view... Image source: england.edu, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  5. 5. The growing web view... Image source: bradfrostweb.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  6. 6. How much of YOURtraffic is via mobile? 10% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  7. 7. How much of YOURtraffic is via mobile? 20% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  8. 8. How much of YOURtraffic is via mobile? ??% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  9. 9. 4 BILLIONMobile Phone Users
  10. 10. By 2013 more people will usemobile phones than PCs to go online. Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  11. 11. 88%searchers take action of mobilewithin 24 hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  12. 12. 75% searchers take action of mobilewithin a few hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  13. 13. Image source: bolderimage.com, 2012Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  14. 14. Landing Page Criteria1. Identify WHAT the user will get2. Articulate WHY the user will love it3. Explain HOW the user will get it Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  15. 15. Mobile Landing Page Criteria1. Identify WHAT the user will get2. Visualize WHY the user will love it3. Explain HOW the user will get it ...NOW Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  16. 16. 10 Tips for Mobile Landing Page Optimization Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  17. 17. 1. Be Accessible Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  18. 18. Hurdles areexhausting... Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  19. 19. 40%competitor’s site after a turn to abad mobile experience Source: Compuware, "What Users Want from Mobile," 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  20. 20. Nip accessibilityissues in... the...BUTT! YOU• Flash• Frames• Special Plugins• PNG Images ACCESSIBILITY• ...Are NOT your friend. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  21. 21. 2. Be Light Weight & FastTotal Page Size: < 20 KBLoad Time: < 5 secondsCheck your site!http://bit.ly/w3cmobileok Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  22. 22. 43% unlikely to return to a areslow-loading mobile site Source: Compuware, "What Users Want from Mobile," 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  23. 23. 74% of mobile users wait up to 5 secondsSource: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  24. 24. 60% wait only 3 seconds...Source: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  25. 25. #1 Web Page Slowdown FactorsDesktop = Bytes(size of page and files)Mobile = # of Requests(number of loaded files and images) Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  26. 26. 3. Be Orderly with Layout Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  27. 27. Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  28. 28. Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  29. 29. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  30. 30. 4. Be Brief50%of desktop copy~35% for smartphones~65% for tablets Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  31. 31. 5. Be Legible (without zooming)• Size (16px good min.)• Color• Contrast• Negative SpaceFACT: At age 40, only halfthe light gets through to theretina as it did at age 20. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  32. 32. 5. Be Legible (without zooming)TooSmall, PoorContrast Good BG Contrast Good Space Poor Label Contrast Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  33. 33. 6. Be Call-Friendly Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  34. 34. 61%users call after a local mobile business search. Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  35. 35. How to Set up Click-to-Call (CTC)1. Select the phone number2. Make it a hyperlink: Syntax: "tel:+" + [country code] + [phone #] Example: tel:+16515551212HTML:<a href="tel:+16515551212">(651) 555-1212</a>See RFC 3966 for specifications: http://bit.ly/rfc3966 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  36. 36. Click-to-Call (CTC) Examples Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  37. 37. Click-to-Call Conversion Tips<a href="tel:+16515551212" class="clicktocall">Call Now! (651)555-1212</a>• Include a phone icon For a FREE quote:• Include a CTA Call Sales! (651) 555-1212• Include the phone #• Style the link as a button Hours: Mon-Fri, 8am - 4pm CT• Include useful/enticing context• CSS style for mobile/non-mobile Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  38. 38. 7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  39. 39. 7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  40. 40. 8. Be Local• Personalize with city• Regionalize “voice”• List nearby rep/store• Re-center maps• Default fields Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  41. 41. 8. Be LocalShow & Default:• Country• Zip CodeCompute & Hide:• City• State Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  42. 42. 9. Be Form-Simple• Target 7 or less fields• Anticipate each added field to reduce conversion by 50%• Limit to 1 non-required field• Use HTML5 field input types Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  43. 43. Phone FieldHTML5 Input<input type="tel">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  44. 44. Email FieldHTML5 Input<inputtype="email">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  45. 45. Website FieldHTML5 Input<input type="url">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  46. 46. 10. Be Action-Compelling Yawn Yipes! Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  47. 47. “One page,One purpose.”~ Oli Gardner, @Unbounce
  48. 48. What’s the User’s Primary Goal?• Call Now • Add to My Calendar• Find a Store • Get Map Directions• Watch the Video • Share This (Be specific)• Like It – SMS• Vote – Facebook• Email Us – Twitter• Download – LinkedIn Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  49. 49. Present ONEprimary CTA(call-to-action)as an obviousbutton. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  50. 50. Conversion Color TheoryColors opposite(complimentary) tothe main color workbest for CTAs.Example:Red-orange buttonfor a dominantlyblue siteImage source: house-pretty.blogspot.com, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  51. 51. Conversion Color TheoryColors opposite(complimentary) tothe main color workbest for CTAs.Example:Green button for adominantly red site Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  52. 52. Primary & Secondary CTAConsiderations Image source: house-pretty.blogspot.com, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  53. 53. Mobile Landing Page OptimizationBest Practices Overview:1. Be Accessible 6. Be Call-Friendly2. Be Fast 7. Be Thumb-Friendly3. Be Orderly 8. Be Local4. Be Brief 9. Be Form-Simple5. Be Legible 10.Be Action-Compelling Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  54. 54. Mobile LPO Action Plan1. Butter up your IT team2. Review your web analytics3. “Grade” your pages (i.e. mobileOK)4. Prioritize your content5. Leverage “mobile” tricks/perks6. Preview your pages with emulators7. Launch and test8. Learn from others (view their source code!) Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  55. 55. Prepare for landing....
  56. 56. Questions? Angie Schottmuller @aschottmuller Founder, Interactive Artisan Strategist, Search Engine Watch View more of my articles on: SearchEngineWatch.com Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  57. 57. BONUS SECTION Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  58. 58. Mobile Web Page/Site Options• Google Sites• Kishkee• dudaMobile• Mobify• moFuse• Atmio Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  59. 59. Smart Web Form Tricks• HTML5 input types test page: http://j.mp/html5inputtypes• Get Zip Code w/ HTML5 & Google’s Geocoding API: http://j.mp/getzipfromhtml5• Get City from Country & Zip w/ GeoNames (JSON): http://j.mp/citydefaultJSON• MaxMind GeoIP Geolocation Products: http://j.mp/maxmindgeoip Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  60. 60. Mobile-Readiness Testing ToolsCompliance:• W3C mobileOK: http://bit.ly/w3cmobileok• mobiReady: http://j.mp/mobireadyMobile Emulators:• User Agent Switcher Firefox Add-on: http://j.mp/ffuseragentswitcher• Lots:http://delicious.com/aschottmuller/mobile+e mulator Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  61. 61. Mobile Web Page Speed Tips• Consolidate multiple CSS & JavaScript files• Save separate mobile-optimized images• Use separate CSS stylesheets for screen and handheld media types• Minimize code whitespace and comments• Limit # of third party scripts like analytics and social sharing widgets Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  62. 62. View Mobile Source Code TipViewS: http://j.mp/viewmobilesource1. Create a mobile bookmark with link = javascript:location=http://shau ninman.com/vs/?url=+escape( location)2. Visit the page whose source you want view3. Open the ViewS bookmark4. View the source code! Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  63. 63. Mobile Web Design ResourcesMobile First Responsive Web Designby Luke Wroblewski by Ethan Marcotte Mar 19 - 23, 2012 | #SESNY | @aschottmuller

×