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.

1. Leverage these 10 best practices to provide an optimized landing page experience for both desktop
and mobile users that converts.
Mobile
Landing Page Optimization
Angie Schottmuller #SESNY #LPO #mobile
@aschottmuller
Founder, Interactive Artisan
Strategist, 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 YOUR
traffic is via mobile?
10%
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

7. How much of YOUR
traffic is via mobile?
20%
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

8. How much of YOUR
traffic is via mobile?
??%
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

9. 4 BILLION
Mobile Phone Users

10. By 2013 more
people will use
mobile 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 mobile
within 24 hours
Source: Google - The Mobile Movement Study, 2011
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

12. 75%
searchers take action
of mobile
within a few hours
Source: Google - The Mobile Movement Study, 2011
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

13. Image source: bolderimage.com, 2012
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

14. Landing Page Criteria
1. Identify WHAT the user will get
2. Articulate WHY the user will love it
3. Explain HOW the user will get it
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

15. Mobile Landing Page Criteria
1. Identify WHAT the user will get
2. Visualize WHY the user will love it
3. 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 are
exhausting...
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

19. 40%
competitor’s site after a
turn to a
bad mobile experience
Source: Compuware, "What Users Want from Mobile," 2011
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

20. Nip accessibility
issues 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 & Fast
Total Page Size:
< 20 KB
Load Time:
< 5 seconds
Check your site!
http://bit.ly/w3cmobileok
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

22. 43%
unlikely to return to a
are
slow-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 seconds
Source: 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 Factors
Desktop = 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 modular
groups of content.
Mobile users = Goal-oriented
Desktop users = Benefit-oriented
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

28. Prioritize modular
groups of content.
Mobile users = Goal-oriented
Desktop users = Benefit-oriented
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

29. Mar 19 - 23, 2012 | #SESNY | @aschottmuller

30. 4. Be Brief
50%
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 Space
FACT: At age 40, only half
the light gets through to the
retina as it did at age 20.
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

32. 5. Be Legible (without zooming)
Too
Small, Poor
Contrast
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 number
2. Make it a hyperlink:
Syntax: "tel:+" + [country code] + [phone #]
Example: tel:+16515551212
HTML:
<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-Friendly
Target Area Suggestions:
• Microsoft: 38px, 0.25”
• Apple: 44px, 0.3”
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

39. 7. Be Thumb-Friendly
Target 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 Local
Show & Default:
• Country
• Zip Code
Compute & 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 Field
HTML5 Input
<input type="tel">
Test Page:
http://bit.ly/html5inputtypes
Image source: 456bereastreet.com, 2012
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

44. Email Field
HTML5 Input
<input
type="email">
Test Page:
http://bit.ly/html5inputtypes
Image source: 456bereastreet.com, 2012
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

45. Website Field
HTML5 Input
<input type="url">
Test Page:
http://bit.ly/html5inputtypes
Image 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 ONE
primary CTA
(call-to-action)
as an obvious
button.
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

50. Conversion Color Theory
Colors opposite
(complimentary) to
the main color work
best for CTAs.
Example:
Red-orange button
for a dominantly
blue site
Image source: house-pretty.blogspot.com, 2011
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

51. Conversion Color Theory
Colors opposite
(complimentary) to
the main color work
best for CTAs.
Example:
Green button for a
dominantly red site
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

52. Primary & Secondary CTA
Considerations
Image source: house-pretty.blogspot.com, 2011
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

53. Mobile Landing Page Optimization
Best Practices Overview:
1. Be Accessible 6. Be Call-Friendly
2. Be Fast 7. Be Thumb-Friendly
3. Be Orderly 8. Be Local
4. Be Brief 9. Be Form-Simple
5. Be Legible 10.Be Action-Compelling
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

54. Mobile LPO Action Plan
1. Butter up your IT team
2. Review your web analytics
3. “Grade” your pages (i.e. mobileOK)
4. Prioritize your content
5. Leverage “mobile” tricks/perks
6. Preview your pages with emulators
7. Launch and test
8. 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 Tools
Compliance:
• W3C mobileOK: http://bit.ly/w3cmobileok
• mobiReady: http://j.mp/mobiready
Mobile 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 Tip
ViewS: http://j.mp/viewmobilesource
1. Create a mobile bookmark
with link =
javascript:location='http://shau
ninman.com/vs/?url='+escape(
location)
2. Visit the page whose source
you want view
3. Open the ViewS bookmark
4. View the source code!
Mar 19 - 23, 2012 | #SESNY | @aschottmuller

63. Mobile Web Design Resources
Mobile First Responsive Web Design
by Luke Wroblewski by Ethan Marcotte
Mar 19 - 23, 2012 | #SESNY | @aschottmuller