Abstract image of a woman sitting on books and studying on a laptop

Mobile Landing Page Optimization - SES New York 2012

Angie Schottmuller, profile picture
Angie Schottmuller

The document outlines best practices for optimizing landing pages for mobile users, emphasizing the importance of accessibility, speed, and user-friendly design. It provides ten actionable tips, such as ensuring the page is lightweight, easy to navigate, and incorporates clear calls-to-action. The document also stresses the need to analyze web analytics and continuously test and improve the mobile experience.

TechnologyBusiness
Related topics:
Web Design Insights • conversion-rate • Landing Page • Mobile Web Solutions • Web Design and Development • Mobile Marketing Insights
1 of 63
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
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 YOUR traffic is via mobile? 10% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
How much of YOUR traffic is via mobile? 20% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
How much of YOUR traffic is via mobile? ??% Mar 19 - 23, 2012 | #SESNY | @aschottmuller
4 BILLION Mobile Phone Users
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
88% searchers take action of mobile within 24 hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
75% searchers take action of mobile within a few hours Source: Google - The Mobile Movement Study, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Image source: bolderimage.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
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
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
10 Tips for Mobile Landing Page Optimization Mar 19 - 23, 2012 | #SESNY | @aschottmuller
1. Be Accessible Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Hurdles are exhausting... Mar 19 - 23, 2012 | #SESNY | @aschottmuller
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
Nip accessibility issues 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 & Fast Total Page Size: < 20 KB Load Time: < 5 seconds Check your site! http://bit.ly/w3cmobileok Mar 19 - 23, 2012 | #SESNY | @aschottmuller
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
74% of mobile users wait up to 5 seconds Source: 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 Factors Desktop = 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 modular groups of content. Mobile users = Goal-oriented Desktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Prioritize modular groups of content. Mobile users = Goal-oriented Desktop users = Benefit-oriented Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Mar 19 - 23, 2012 | #SESNY | @aschottmuller
4. Be Brief 50% 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 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
5. Be Legible (without zooming) Too Small, Poor Contrast 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 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
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-Friendly Target Area Suggestions: • Microsoft: 38px, 0.25” • Apple: 44px, 0.3” Mar 19 - 23, 2012 | #SESNY | @aschottmuller
7. Be Thumb-Friendly Target 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 Local Show & Default: • Country • Zip Code Compute & 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 Field HTML5 Input <input type="tel"> Test Page: http://bit.ly/html5inputtypes Image source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Email Field HTML5 Input <input type="email"> Test Page: http://bit.ly/html5inputtypes Image source: 456bereastreet.com, 2012 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
Website Field HTML5 Input <input type="url"> Test Page: http://bit.ly/html5inputtypes Image 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 ONE primary CTA (call-to-action) as an obvious button. Mar 19 - 23, 2012 | #SESNY | @aschottmuller
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
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
Primary & Secondary CTA Considerations Image source: house-pretty.blogspot.com, 2011 Mar 19 - 23, 2012 | #SESNY | @aschottmuller
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
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
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 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
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 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
Mobile Web Design Resources Mobile First Responsive Web Design by Luke Wroblewski by Ethan Marcotte Mar 19 - 23, 2012 | #SESNY | @aschottmuller

More Related Content

PDF
SEO Conversion Strategies - 12 Power Plays
Angie Schottmuller
 
PPTX
Social Proof Conversion Optimization Secrets
Angie Schottmuller
 
PDF
SEO Conversion Strategies (MacGyver Problem Solving Edition)
Angie Schottmuller
 
PDF
Mobile Conversion Optimization for Context
Angie Schottmuller
 
PPTX
First Impression Rehab: Design Physiology Tips to Boost Conversion
Angie Schottmuller
 
PDF
Visual Marketing with Hero Shot Images
Angie Schottmuller
 
PDF
Social Media ROI: Formulas & Conversion Optimization Tips
Angie Schottmuller
 
PDF
SearchLove London 2015 | Philip Nottingham | Building a Social Video Strategy
Distilled
 
SEO Conversion Strategies - 12 Power Plays
Angie Schottmuller
 
Social Proof Conversion Optimization Secrets
Angie Schottmuller
 
SEO Conversion Strategies (MacGyver Problem Solving Edition)
Angie Schottmuller
 
Mobile Conversion Optimization for Context
Angie Schottmuller
 
First Impression Rehab: Design Physiology Tips to Boost Conversion
Angie Schottmuller
 
Visual Marketing with Hero Shot Images
Angie Schottmuller
 
Social Media ROI: Formulas & Conversion Optimization Tips
Angie Schottmuller
 
SearchLove London 2015 | Philip Nottingham | Building a Social Video Strategy
Distilled
 

What's hot (20)

PDF
SEO: Same as it Ever Was
Michael King
 
PDF
SEO Conversion Strategies - 12 Power Plays
Three Deep Marketing
 
PDF
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
Distilled
 
PDF
The Pragmatic Future of Search
Michael King
 
PDF
Digital Body Language
Michael King
 
PDF
Mobile-First SEO - The Marketers Edition #3XEDigital
Aleyda Solís
 
PPTX
How Humans & Machines Can Improve Site Search Results - Search Y: Paris
JP Sherman
 
PDF
How to Get Survey Answers That Actually Help Your Business
Kissmetrics on SlideShare
 
PDF
Stop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Josh Patrice
 
PPTX
The State of SEO in 2017 - 2017 MnSearch Summit
MnSearch, The Minnesota Search Engine Marketing Association
 
PDF
Getting Buy-In for Content Marketing (MozCon Remix)
Michael King
 
PDF
Perfect Starts: How to Get the Right Traffic with a Content Audit
Michael King
 
PDF
Technical Marketing is the Price of Admission
Michael King
 
PDF
SEJ Summit 2017: The Rise of Intelligent Search and Tomorrow's Consumers by D...
Search Engine Journal
 
PDF
Mobile SEO: Closing the Mobile Search Strategy Gap
Justin Briggs
 
PDF
Actionable Data-Driven Personas for CRO
Michael King
 
PDF
The Future Of SEO
Britney Muller
 
PPTX
(How to) stop pretending that you're customer-centric
Jono Alderson
 
PDF
SearchLeeds 2018 - Dawn Anderson - Power from what lies beneath ... The icebe...
Branded3
 
PPTX
SearchLove San Diego 2017 | Hana Abaza | Aiming for Impact: A Conversion-Cent...
Distilled
 
SEO: Same as it Ever Was
Michael King
 
SEO Conversion Strategies - 12 Power Plays
Three Deep Marketing
 
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
Distilled
 
The Pragmatic Future of Search
Michael King
 
Digital Body Language
Michael King
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Aleyda Solís
 
How Humans & Machines Can Improve Site Search Results - Search Y: Paris
JP Sherman
 
How to Get Survey Answers That Actually Help Your Business
Kissmetrics on SlideShare
 
Stop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Josh Patrice
 
The State of SEO in 2017 - 2017 MnSearch Summit
MnSearch, The Minnesota Search Engine Marketing Association
 
Getting Buy-In for Content Marketing (MozCon Remix)
Michael King
 
Perfect Starts: How to Get the Right Traffic with a Content Audit
Michael King
 
Technical Marketing is the Price of Admission
Michael King
 
SEJ Summit 2017: The Rise of Intelligent Search and Tomorrow's Consumers by D...
Search Engine Journal
 
Mobile SEO: Closing the Mobile Search Strategy Gap
Justin Briggs
 
Actionable Data-Driven Personas for CRO
Michael King
 
The Future Of SEO
Britney Muller
 
(How to) stop pretending that you're customer-centric
Jono Alderson
 
SearchLeeds 2018 - Dawn Anderson - Power from what lies beneath ... The icebe...
Branded3
 
SearchLove San Diego 2017 | Hana Abaza | Aiming for Impact: A Conversion-Cent...
Distilled
 
Ad

Viewers also liked (20)

PPTX
Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)
Angie Schottmuller
 
PPTX
Mobile Marketing Strategy - SES London 2012
Angie Schottmuller
 
XLSX
List of cities
alex ruben
 
PDF
Social Proof Persuasive Content Framework
Angie Schottmuller
 
PDF
Social Media: ROI Possible
Angie Schottmuller
 
PDF
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
servicesmobiles.fr
 
PPTX
SEO for Mobile Apps
Abdul Malick
 
PDF
Spéciale Paiement La French Mobile Juin 2012
servicesmobiles.fr
 
PPTX
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday
 
PDF
The web you were used to is gone. Architecture and strategy for your mobile c...
Alberta Soranzo
 
PDF
You can't beat the experience November 2014
Stefan Rust - Exicon Leading digital portfolio management
 
PDF
Mobile Mega Trends to Change the World
Akash Shrivastava
 
PDF
Fragmentation in mobile design: fact or fiction
Belen Barros Pena
 
PDF
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Pascal Dasseux
 
PDF
Growth Hacking, Disrupt the Business with Mobile!
TheFamily
 
PDF
Mobile Marketing Trend Report - AUG 2012
Daniel Wood
 
PPSX
Chiffres du mobile en france
Brand Consulting Team
 
PDF
Etat des lieux du mobile en France et en Europe
Mediamaispasque
 
PDF
The web you were used to is gone. Architecture and strategy for your content.
Alberta Soranzo
 
PDF
Keynotes Le Mobile 2013
servicesmobiles.fr
 
Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)
Angie Schottmuller
 
Mobile Marketing Strategy - SES London 2012
Angie Schottmuller
 
List of cities
alex ruben
 
Social Proof Persuasive Content Framework
Angie Schottmuller
 
Social Media: ROI Possible
Angie Schottmuller
 
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
servicesmobiles.fr
 
SEO for Mobile Apps
Abdul Malick
 
Spéciale Paiement La French Mobile Juin 2012
servicesmobiles.fr
 
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday
 
The web you were used to is gone. Architecture and strategy for your mobile c...
Alberta Soranzo
 
You can't beat the experience November 2014
Stefan Rust - Exicon Leading digital portfolio management
 
Mobile Mega Trends to Change the World
Akash Shrivastava
 
Fragmentation in mobile design: fact or fiction
Belen Barros Pena
 
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Pascal Dasseux
 
Growth Hacking, Disrupt the Business with Mobile!
TheFamily
 
Mobile Marketing Trend Report - AUG 2012
Daniel Wood
 
Chiffres du mobile en france
Brand Consulting Team
 
Etat des lieux du mobile en France et en Europe
Mediamaispasque
 
The web you were used to is gone. Architecture and strategy for your content.
Alberta Soranzo
 
Keynotes Le Mobile 2013
servicesmobiles.fr
 
Ad

Similar to Mobile Landing Page Optimization - SES New York 2012 (20)

ODP
Web Marketing Week4
cghb1210
 
PPTX
SES New York - Driving Mobile Traffic: SEO &PPC
Ivanti
 
PDF
PPC Beyond Search Lisa Raehsler SES New York 2012
Lisa Raehsler
 
PPTX
Natural born conversion killers - Conversion Jam
Craig Sullivan
 
PPT
Ready, Set, Go Mobile!
Hall_
 
PDF
Mobile webinarslides
Page 1 Solutions
 
PPTX
The Mobile Marketing Race is On!
Bluetrain.io
 
PDF
Jane_clark_pres2016_FUP_web
Jane Clark
 
PPT
Mobile Marketing
gemini5designs
 
PPT
uphouse_lauren mobile_presentation
Lauren Uphouse
 
PDF
Google Mobile Sites | We Got Certified so You Don't Have To
Peyton Tata
 
PPTX
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
PPTX
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Paul Brown
 
PDF
Mobile vision - Conference at Comeos 4/10/2011
Georges-Alexandre Hanin
 
PDF
Mobile vision - Conference at Comeos 4/10/2011
Mobilosoft
 
PPTX
Mobile Marketing, SEO & Visibility: The Evolving Conversation
R2integrated
 
PDF
The Mobile Holiday Game Plan for Online Retailers
Gabrielle Retcho, Digital Marketer
 
PDF
IA Summit Cross Channel Workshop
Samantha Starmer
 
PDF
Community Sector Provincial Forum - St. John's [2010-10-01]
CanadaHelps / MyCharityConnects
 
PPTX
Internet Marketing & SEO for Beginners
Web Scene Marketing
 
Web Marketing Week4
cghb1210
 
SES New York - Driving Mobile Traffic: SEO &PPC
Ivanti
 
PPC Beyond Search Lisa Raehsler SES New York 2012
Lisa Raehsler
 
Natural born conversion killers - Conversion Jam
Craig Sullivan
 
Ready, Set, Go Mobile!
Hall_
 
Mobile webinarslides
Page 1 Solutions
 
The Mobile Marketing Race is On!
Bluetrain.io
 
Jane_clark_pres2016_FUP_web
Jane Clark
 
Mobile Marketing
gemini5designs
 
uphouse_lauren mobile_presentation
Lauren Uphouse
 
Google Mobile Sites | We Got Certified so You Don't Have To
Peyton Tata
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Paul Brown
 
Mobile vision - Conference at Comeos 4/10/2011
Georges-Alexandre Hanin
 
Mobile vision - Conference at Comeos 4/10/2011
Mobilosoft
 
Mobile Marketing, SEO & Visibility: The Evolving Conversation
R2integrated
 
The Mobile Holiday Game Plan for Online Retailers
Gabrielle Retcho, Digital Marketer
 
IA Summit Cross Channel Workshop
Samantha Starmer
 
Community Sector Provincial Forum - St. John's [2010-10-01]
CanadaHelps / MyCharityConnects
 
Internet Marketing & SEO for Beginners
Web Scene Marketing
 

More from Angie Schottmuller (9)

PDF
Holy Grail of On-Page Content Conversion Optimization
Angie Schottmuller
 
PDF
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
Angie Schottmuller
 
PDF
5 Content-First Marketing Steps to Jurassic Conversion
Angie Schottmuller
 
DOTX
Landing Page Content Worksheet
Angie Schottmuller
 
PPTX
SEO Conversion Optimization Star Wars Insights
Angie Schottmuller
 
PPTX
Usability Conversion Optimization for the Eye
Angie Schottmuller
 
PPTX
Social Proof Tips to Boost Landing Page Conversions
Angie Schottmuller
 
PPTX
Organic Conversion Optimization - 15 Wins to Convert SEO Traffic
Angie Schottmuller
 
PDF
Conversion Optimization - 6 Power Tricks of the Trade
Angie Schottmuller
 
Holy Grail of On-Page Content Conversion Optimization
Angie Schottmuller
 
Hero Shot Images: 7 Secrets to Visuals That Drive Sales
Angie Schottmuller
 
5 Content-First Marketing Steps to Jurassic Conversion
Angie Schottmuller
 
Landing Page Content Worksheet
Angie Schottmuller
 
SEO Conversion Optimization Star Wars Insights
Angie Schottmuller
 
Usability Conversion Optimization for the Eye
Angie Schottmuller
 
Social Proof Tips to Boost Landing Page Conversions
Angie Schottmuller
 
Organic Conversion Optimization - 15 Wins to Convert SEO Traffic
Angie Schottmuller
 
Conversion Optimization - 6 Power Tricks of the Trade
Angie Schottmuller
 

Recently uploaded (20)

PDF
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
Metrics GmbH
 
PPTX
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
ClarisejaneSartillo1
 
PDF
NewMind AI Weekly Chronicles – August ’25 Week IV
NewMind AI
 
PDF
Convolutional neural network based encoder-decoder for efficient real-time ob...
IAESIJAI
 
PDF
Data Virtualization in Action: Scaling APIs and Apps with FME
Safe Software
 
PDF
Improvisation in detection of pomegranate leaf disease using transfer learni...
IAESIJAI
 
PDF
Enhancing plagiarism detection using data pre-processing and machine learning...
IAESIJAI
 
PDF
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
Kalilur Rahman
 
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
PPTX
Custom Battery Pack Design Considerations for Performance and Safety
Epec Engineered Technologies
 
PDF
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
Edge AI and Vision Alliance
 
PDF
LMS bot: enhanced learning management systems for improved student learning e...
IAESIJAI
 
PDF
giants, standing on the shoulders of - by Daniel Stenberg
Daniel Stenberg
 
PDF
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
Kalilur Rahman
 
PDF
MENA-ECEONOMIC-CONTEXT-VC MENA-ECEONOMIC
Mustafa Kuğu
 
PDF
Aug23rd - Mulesoft Community Workshop - Hyd, India.pdf
Ravi Tamada
 
PDF
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
DROK2
 
PDF
INTERSPEECH 2025 「Recent Advances and Future Directions in Voice Conversion」
NU_I_TODALAB
 
PPTX
Microsoft User Copilot Training Slide Deck
zohoron1
 
DOCX
Basics of Cloud Computing - Cloud Ecosystem
suthak11
 
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
Metrics GmbH
 
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
ClarisejaneSartillo1
 
NewMind AI Weekly Chronicles – August ’25 Week IV
NewMind AI
 
Convolutional neural network based encoder-decoder for efficient real-time ob...
IAESIJAI
 
Data Virtualization in Action: Scaling APIs and Apps with FME
Safe Software
 
Improvisation in detection of pomegranate leaf disease using transfer learni...
IAESIJAI
 
Enhancing plagiarism detection using data pre-processing and machine learning...
IAESIJAI
 
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
Kalilur Rahman
 
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
Custom Battery Pack Design Considerations for Performance and Safety
Epec Engineered Technologies
 
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
Edge AI and Vision Alliance
 
LMS bot: enhanced learning management systems for improved student learning e...
IAESIJAI
 
giants, standing on the shoulders of - by Daniel Stenberg
Daniel Stenberg
 
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
Kalilur Rahman
 
MENA-ECEONOMIC-CONTEXT-VC MENA-ECEONOMIC
Mustafa Kuğu
 
Aug23rd - Mulesoft Community Workshop - Hyd, India.pdf
Ravi Tamada
 
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
DROK2
 
INTERSPEECH 2025 「Recent Advances and Future Directions in Voice Conversion」
NU_I_TODALAB
 
Microsoft User Copilot Training Slide Deck
zohoron1
 
Basics of Cloud Computing - Cloud Ecosystem
suthak11
 

Mobile Landing Page Optimization - SES New York 2012

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

Editor's Notes

  • #5: http://www.england.edu/book-store/laptop-vs-desktop-computer/
  • #11: By 2013, more people will use mobile phones than PCs to go online.
  • #14: Your customers are already mobile. Are you?
  • #30: Examples: American Family Insurance, Subway, Progressive Insurance, TJMaxxShazam - Advertisers http://j.mp/shazamads
  • #32: http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  • #33: http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  • #43: Screenshot from: barackobama.com
  • #51: http://house-pretty.blogspot.com/2011/11/week-two-colour-theory.html
  • #52: http://house-pretty.blogspot.com/2011/11/week-two-colour-theory.html
  • #59: 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)
  • #63: 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;