Leverage these 10 best practices to provide an optimized landing page experience for both desktop and mobile users that co...
Where do YOUR online    guests land?
What’s their view of your    landing page?
A common web view...                            Image source: england.edu, 2012               Mar 19 - 23, 2012 | #SESNY |...
The growing web view...                        Image source: bradfrostweb.com, 2012                Mar 19 - 23, 2012 | #SE...
How much of YOURtraffic is via mobile?   10%            Mar 19 - 23, 2012 | #SESNY | @aschottmuller
How much of YOURtraffic is via mobile?   20%            Mar 19 - 23, 2012 | #SESNY | @aschottmuller
How much of YOURtraffic is via mobile?  ??%            Mar 19 - 23, 2012 | #SESNY | @aschottmuller
4 BILLIONMobile Phone Users
By 2013 more people will usemobile phones than PCs to go online.         Source: Google - The Mobile Movement Study, 2011 ...
88%searchers take action                     of mobilewithin 24 hours          Source: Google - The Mobile Movement Study,...
75% searchers take action                      of mobilewithin a few hours           Source: Google - The Mobile Movement ...
Image source: bolderimage.com, 2012Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Landing Page Criteria1. Identify WHAT the user will get2. Articulate WHY the user will love it3. Explain HOW the user will...
Mobile Landing Page Criteria1. Identify WHAT the user will get2. Visualize WHY the user will love it3. Explain HOW the use...
10 Tips for Mobile Landing Page Optimization                                     Mar 19 - 23, 2012 | #SESNY | @aschottmuller
1. Be Accessible                   Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Hurdles areexhausting...                Mar 19 - 23, 2012 | #SESNY | @aschottmuller
40%competitor’s site after a                              turn to abad mobile experience          Source: Compuware, "What...
Nip accessibilityissues in... the...BUTT!                     YOU•   Flash•   Frames•   Special Plugins•   PNG Images     ...
2. Be Light Weight & FastTotal Page Size: < 20 KBLoad Time: < 5 secondsCheck your site!http://bit.ly/w3cmobileok          ...
43%  unlikely to return to a                                        areslow-loading mobile site          Source: Compuware...
74%                                                    of mobile                                                    users ...
60%                                                    wait only 3                                                    seco...
#1 Web Page Slowdown FactorsDesktop = Bytes(size of page and files)Mobile = # of Requests(number of loaded files and image...
3. Be Orderly with Layout                 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented                          ...
Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented                          ...
Mar 19 - 23, 2012 | #SESNY | @aschottmuller
4. Be Brief50%of desktop copy~35% for smartphones~65% for tablets                       Mar 19 - 23, 2012 | #SESNY | @asch...
5. Be Legible (without zooming)•   Size (16px good min.)•   Color•   Contrast•   Negative SpaceFACT: At age 40, only halft...
5. Be Legible (without zooming)TooSmall, PoorContrast                                   Good BG Contrast Good Space       ...
6. Be Call-Friendly                  Mar 19 - 23, 2012 | #SESNY | @aschottmuller
61%users call after a local                             mobile  business search.            Source: Google - The Mobile Mo...
How to Set up Click-to-Call (CTC)1. Select the phone number2. Make it a hyperlink:   Syntax: "tel:+" + [country code] + [p...
Click-to-Call (CTC) Examples                 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Click-to-Call Conversion Tips<a href="tel:+16515551212" class="clicktocall">Call Now! (651)555-1212</a>•   Include a phone...
7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3”                           Mar 19 -...
7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3”                           Mar 19 -...
8. Be Local• Personalize with city• Regionalize “voice”• List nearby rep/store• Re-center maps• Default fields            ...
8. Be LocalShow & Default:• Country• Zip CodeCompute & Hide:• City• State                  Mar 19 - 23, 2012 | #SESNY | @a...
9. Be Form-Simple• Target 7 or less fields• Anticipate each added  field to reduce conversion  by 50%• Limit to 1  non-req...
Phone FieldHTML5 Input<input type="tel">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012     ...
Email FieldHTML5 Input<inputtype="email">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012    ...
Website FieldHTML5 Input<input type="url">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012   ...
10. Be Action-Compelling             Yawn              Yipes!                    Mar 19 - 23, 2012 | #SESNY | @aschottmuller
“One page,One purpose.”~ Oli Gardner, @Unbounce
What’s the User’s Primary Goal?•   Call Now          • Add to My Calendar•   Find a Store      • Get Map Directions•   Wat...
Present ONEprimary CTA(call-to-action)as an obviousbutton.                   Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Conversion Color TheoryColors opposite(complimentary) tothe main color workbest for CTAs.Example:Red-orange buttonfor a do...
Conversion Color TheoryColors opposite(complimentary) tothe main color workbest for CTAs.Example:Green button for adominan...
Primary & Secondary CTAConsiderations                Image source: house-pretty.blogspot.com, 2011               Mar 19 - ...
Mobile Landing Page OptimizationBest Practices Overview:1. Be Accessible       6. Be Call-Friendly2. Be Fast             7...
Mobile LPO Action Plan1.   Butter up your IT team2.   Review your web analytics3.   “Grade” your pages (i.e. mobileOK)4.  ...
Prepare for landing....
Questions?             Angie Schottmuller             @aschottmuller             Founder, Interactive Artisan             ...
BONUS SECTION       Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Mobile Web Page/Site Options• Google Sites• Kishkee• dudaMobile• Mobify• moFuse• Atmio                 Mar 19 - 23, 2012 |...
Smart Web Form Tricks• HTML5 input types test page:  http://j.mp/html5inputtypes• Get Zip Code w/ HTML5 & Google’s Geocodi...
Mobile-Readiness Testing ToolsCompliance:• W3C mobileOK: http://bit.ly/w3cmobileok• mobiReady: http://j.mp/mobireadyMobile...
Mobile Web Page Speed Tips• Consolidate multiple CSS & JavaScript files• Save separate mobile-optimized images• Use separa...
View Mobile Source Code TipViewS: http://j.mp/viewmobilesource1. Create a mobile bookmark   with link =   javascript:locat...
Mobile Web Design ResourcesMobile First         Responsive Web Designby Luke Wroblewski   by Ethan Marcotte               ...
Upcoming SlideShare
Loading in...5
×

Mobile Landing Page Optimization - SES New York 2012

4,692

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
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,692
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
3
Likes
10
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 &amp; Commerce (Free. Paid Studio version for $249/month)
  • http://iphoneized.com/2009/05/8-ways-view-page-source-code-iphone/&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;
  • 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

    ×