Mobile Landing Page Optimization - SES New York 2012

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

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 | @aschottmuller

The growing web view... Image source: bradfrostweb.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

88%searchers take action of mobilewithin 24 hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

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 get it Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

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 Users Want from Mobile," 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Nip accessibilityissues in... the...BUTT! YOU• Flash• Frames• Special Plugins• PNG Images ACCESSIBILITY• ...Are NOT your friend. Mar 19 - 23, 2012 | #SESNY | @aschottmuller

2. Be Light Weight & FastTotal Page Size: < 20 KBLoad Time: < 5 secondsCheck your site!http://bit.ly/w3cmobileok Mar 19 - 23, 2012 | #SESNY | @aschottmuller

43% unlikely to return to a areslow-loading mobile site Source: Compuware, "What Users Want from Mobile," 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

74% of mobile users wait up to 5 secondsSource: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

60% wait only 3 seconds...Source: Compuware - What Users Want from Mobile, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

#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

3. Be Orderly with Layout Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Prioritize modulargroups of content.Mobile users = Goal-orientedDesktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

4. Be Brief50%of desktop copy~35% for smartphones~65% for tablets Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

5. Be Legible (without zooming)TooSmall, PoorContrast Good BG Contrast Good Space Poor Label Contrast Mar 19 - 23, 2012 | #SESNY | @aschottmuller

6. Be Call-Friendly Mar 19 - 23, 2012 | #SESNY | @aschottmuller

61%users call after a local mobile business search. Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

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

7. Be Thumb-FriendlyTarget Area Suggestions:• Microsoft: 38px, 0.25”• Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller

8. Be Local• Personalize with city• Regionalize “voice”• List nearby rep/store• Re-center maps• Default fields Mar 19 - 23, 2012 | #SESNY | @aschottmuller

8. Be LocalShow & Default:• Country• Zip CodeCompute & Hide:• City• State Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

Phone FieldHTML5 Input<input type="tel">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Email FieldHTML5 Input<inputtype="email">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Website FieldHTML5 Input<input type="url">Test Page:http://bit.ly/html5inputtypesImage source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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• Watch the Video • Share This (Be specific)• Like It – SMS• Vote – Facebook• Email Us – Twitter• Download – LinkedIn Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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 dominantlyblue siteImage source: house-pretty.blogspot.com, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Conversion Color TheoryColors opposite(complimentary) tothe main color workbest for CTAs.Example:Green button for adominantly red site Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

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

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

Prepare for landing....

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

BONUS SECTION Mar 19 - 23, 2012 | #SESNY | @aschottmuller

Mobile Web Page/Site Options• Google Sites• Kishkee• dudaMobile• Mobify• moFuse• Atmio Mar 19 - 23, 2012 | #SESNY | @aschottmuller

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

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

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

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

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

http://www.iphone-entreprise.com	606
http://fondation-communication.over-blog.com	137
http://lanyrd.com	13
http://pinterest.com	3
http://paper.li	2
http://tweetedtimes.com	2
http://www.linkedin.com	2
http://webcache-exp-test.googleusercontent.com	1
http://srv06.admin.over-blog.com	1
http://www.siftsocial.com	1
http://translate.googleusercontent.com	1

Mobile Landing Page Optimization - SES New York 2012

by Angie Schottmuller on Mar 24, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 769

Statistics

Mobile Landing Page Optimization - SES New York 2012 Presentation Transcript