Mobile Landing Page Optimization - SES New York 2012

  • 4,254 views
Uploaded 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 …

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.

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

Views

Total Views
4,254
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
3
Likes
8

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
  • 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">

Transcript

  • 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. Where do YOUR online guests land?
  • 3. What’s their view of your landing page?
  • 4. A common web view... Image source: england.edu, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 5. The growing web view... Image source: bradfrostweb.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 6. How much of YOURtraffic is via mobile? 10% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 7. How much of YOURtraffic is via mobile? 20% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 8. How much of YOURtraffic is via mobile? ??% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 9. 4 BILLIONMobile Phone Users
  • 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. 88%searchers take action of mobilewithin 24 hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 12. 75% searchers take action of mobilewithin a few hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 13. Image source: bolderimage.com, 2012Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 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. 10 Tips for Mobile Landing Page Optimization Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 17. 1. Be Accessible Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 18. Hurdles areexhausting... Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. Nip accessibilityissues in... the...BUTT! YOU• Flash• Frames• Special Plugins• PNG Images ACCESSIBILITY• ...Are NOT your friend. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 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. 74% of mobile users wait up to 5 secondsSource: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 24. 60% wait only 3 seconds...Source: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 3. Be Orderly with Layout Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 27. Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 28. Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 29. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 30. 4. Be Brief50%of desktop copy~35% for smartphones~65% for tablets Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 5. Be Legible (without zooming)TooSmall, PoorContrast Good BG Contrast Good Space Poor Label Contrast Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 33. 6. Be Call-Friendly Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 34. 61%users call after a local mobile business search. Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. Click-to-Call (CTC) Examples Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 39. 7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 8. Be LocalShow & Default:• Country• Zip CodeCompute & Hide:• City• State Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. Phone FieldHTML5 Input<input type="tel">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 44. Email FieldHTML5 Input<inputtype="email">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 45. Website FieldHTML5 Input<input type="url">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 46. 10. Be Action-Compelling Yawn Yipes! Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 47. “One page,One purpose.”~ Oli Gardner, @Unbounce
  • 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. Present ONEprimary CTA(call-to-action)as an obviousbutton. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 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. Primary & Secondary CTAConsiderations Image source: house-pretty.blogspot.com, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 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. Prepare for landing....
  • 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. BONUS SECTION Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 58. Mobile Web Page/Site Options• Google Sites• Kishkee• dudaMobile• Mobify• moFuse• Atmio Mar 19 - 23, 2012 | #SESNY | @aschottmuller
  • 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. 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. 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. 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. Mobile Web Design ResourcesMobile First Responsive Web Designby Luke Wroblewski by Ethan Marcotte Mar 19 - 23, 2012 | #SESNY | @aschottmuller