Mobile Landing Page Optimization - SES New York 2012

5,557 views
5,303 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
3 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total views
5,557
On SlideShare
0
From Embeds
0
Number of Embeds
799
Actions
Shares
0
Downloads
0
Comments
3
Likes
13
Embeds 0
No embeds

No notes for slide
  • http://www.england.edu/book-store/laptop-vs-desktop-computer/
  • By 2013, more people will use mobile phones than PCs to go online.
  • Your customers are already mobile. Are you?
  • Examples: American Family Insurance, Subway, Progressive Insurance, TJMaxxShazam - Advertisers http://j.mp/shazamads
  • http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  • http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  • Screenshot from: barackobama.com
  • http://house-pretty.blogspot.com/2011/11/week-two-colour-theory.html
  • http://house-pretty.blogspot.com/2011/11/week-two-colour-theory.html
  • WPTouch - WordPress Plugin(Free. Paid Pro version starts at $49)MoFuse - Mobile CMS ($89/month)Mobify - Mobile Web & Commerce (Free. Paid Studio version for $249/month)
  • http://iphoneized.com/2009/05/8-ways-view-page-source-code-iphone/<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • 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

    ×