Your SlideShare is downloading. ×
Mobile Marketing Conversion Optimization Tools & Tricks
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Marketing Conversion Optimization Tools & Tricks


Published on

Tools and coding tricks to enhance the mobile web user experience and optimize conversion... Star Wars Jedi-style! (Originally presented at SMX Advanced 2012.) …

Tools and coding tricks to enhance the mobile web user experience and optimize conversion... Star Wars Jedi-style! (Originally presented at SMX Advanced 2012.)

Published in: Technology, Business

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Screenshot example of
  • Screenshot example of
  • AUDIENCE POLL:By a show of hands, how many of you have mobile reports or segments configured in your analytics?
  • Image:
  • Transcript

    • 1. Mobile MarketingConversion OptimizationTools and Code Tricks to Enhance Mobile UX & Conversion [ Star Wars Jedi-Style ] Angie Schottmuller - @aschottmuller SMX Advanced 2012 - #SMX #mobile #CRO #RWD
    • 2. What is a Conversion?
    • 3. Conversion Rate =The % of users that complete a presented action.
    • 5. Star Wars Conversion Rates Obi Wan’s Jedi Record: 50%
    • 6. Industry average conversion rate is ~2-4%. So 50% is awesome! ...Right?
    • 7. Rethink “Conversion”
    • 8. ASK YOURSELF:What are the consequences of getting it wrong? ^ VERY
    • 9. 43% are unlikely to return to aslow-loading mobile site Source: Compuware, "What Users Want from Mobile,” 2011
    • 10. 40% turn to acompetitor’s site after abad mobile experience Source: Compuware, "What Users Want from Mobile," 2011
    • 11. You need a PLAN.
    • 12. You must use theinformation inthis R2 unit toplan theattack...
    • 13. Mobile CRO PreparationCONSIDERATIONS: WHAT TO CHANGE:• Accessibility (#killflash) • Simplify layout• Responsive design • Reduce context• Hover-functionality • Increase sizing (menus, tooltips, etc.) (text, buttons)• Page size and speed • Increase margin/padding on links• Geolocation / privacy & fields • Selectively feature CTA • Adjust CTA placement
    • 14. Contextual DifferencesTECHNOLOGY: SITUATION:• Usability • Week day, Time of day• Page load • Geography (size/speed) • Referrer, Click paths• Connection speed • Customer history• Device capabilities • Urgency• Screen size • Strategic agenda • Dynamic environment
    • 15. User Goal Differences• Traditional Desktop/Laptop > Benefit-Oriented• Tablet > Interaction-Oriented• Smartphone > Task-Oriented
    • 16. Adapt your strategy
    • 17. CONTENT is only the right kingdom of CONTEXT.
    • 18. Mobile Mini Toolbox View, detect, and measure.
    • 19. “Ooooh!Awesomemobile website!I wonder howthey did that...”
    • 20. EXPANDABLE MENU“Ooooh!Awesomemobile website!I wonder howthey did that...” RESPONSIVE SLIDESHOW
    • 21. Don’t wonder.Steal Use their code!
    • 22. View Source Code javascript:(function()%7Bvar%20d%3Dd ocument%2Cs%2Ce%3Bvar%20el%3Dd. getElementById(snpy)%3Bif(typeof%20MOBILE Snoopy!%3Dundefined) ggle()%3Breturn%7Delse%20if(el)%7Bel.BOOKMARKLETS className%3D%2Fclosed%2F.test( assName)%3Fel.className.replace(cl osed%2C)%3Ael.className%2B%20cl osed%3Breturn%7Ds%3Dd.createEleme nt(link)%3Bs.setAttribute(href%2Chttp• Snoopy %3A%2F%2Fsnoopy- by min.css)%3Bs.setAttribute(rel%2Cstyles heet)%3Bs.setAttribute(type%2Ctext% 2Fcss)%3Bd.getElementsByTagName(h• ViewS ead)%5B0%5D.appendChild(s)%3Be%3 Dd.createElement(script)%3Be.setAttri by Shaun Inman bute(src%2Chttp%3A%2F%2Fsnoopy- min.js)%3Bd.getElementsByTagName(• View Source body)%5B0%5D.appendChild(e)%7D)() %3B by Ole Michelsen
    • 23. View Source CodeMOBILEBOOKMARKLETS• Snoopy by• ViewS by Shaun Inman• View Source by Ole Michelsen
    • 24. View Source CodeMOBILEBOOKMARKLETS• Snoopy by• ViewS by Shaun Inman• View Source by Ole Michelsen
    • 25. Detect “Mobile” Devices
    • 26.
    • 27. “Mobile” DetectionFEATURE METHOD• User Agent (UA) • Client-Side Script• Screen Width • Server-Side API• CSS Media Queries • Cloud Web Service• Touchscreen- Capable See BONUS SECTION for tools!
    • 28. Measure Mobile
    • 29. “You’re sure the homing beacon issecure aboard their ship? I’m taking anawful risk, Vader. This had better work.”- Grand Moff Wilhuff Tarkin
    • 30. 25-40% of mobile traffic is NOT detected bytraditional web analytics.
    • 31. REALITYThose are the droids you were looking for.
    • 32. Web Analytics for Mobile1. Track what you can Google Analytics - Create Advanced Segments: Set ‘unknown referrers’ w/ tracking codes SiteCatalyst - Specify Referrer Hack:
    • 33. “Your powers are weak, old man...”
    • 34. Use Mobile Analytics• Bango• Percent Mobile• Amethon
    • 35. Mobile Design Tricks
    • 36. Where Does YourMobile Design Fall? Hann Diagram by theepiceeffect
    • 37. jQuery is your ally.
    • 38. jQuery Responsive PluginsHeadings: Video:
    • 39. jQuery Responsive SlideshowsWooThemes Flexslider
    • 40. Campaign Example:Subway Battleshipbattleship.subway.comFree Code: 6LYHL6NYVERY WELL DONE!(Check out the code!)
    • 41. Call to Action
    • 42. Top Actions on Mobile:• Make a phone call• Find nearest location
    • 43. 61% of mobileusers call after a local business search Source: Google - The Mobile Movement Study, 2011
    • 44. 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:
    • 45. 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• Include the phone # Hours: Mon-Fri, 8am - 4pm CT• Style the link as a button• Include useful/enticing context• CSS style for mobile/non-mobile
    • 46. Find a Store
    • 47. Leverage Geolocation
    • 48. GeoIP / Geolocation Tools• GeoIP Database• Zip/Postal Code Database• GeoIP Web Service API• HTML5 Geolocation API
    • 49. “That’s impossible. Even for a computer.”
    • 50. ACTUAL MAXMIND GOOGLE LOADERCompare Map Points:
    • 51. Get the Code:
    • 52. Proximate is close enough for suggestions!
    • 53. Privacy ConsiderationsPERSONAL NON-INTRUSIVEStores nearest you: Stores near 55127: Change Location
    • 54. Personalize with GeoIP• Personalize headings with city or metro names• Regionalize “voice” to use local terms or slang• List a nearby representative or store contacts• Re-center and zoom maps• Estimate sales tax or shipping fees• Pre-populate web form location fields
    • 55. Simplify Web Forms
    • 56. Beyond 3, anticipate eachadded form field to REDUCE mobile conversion by 50%
    • 57. Simplify Forms:1. Hide City and State (compute from Zip)2. Drop Address (unless for mailer)3. Drop Phone4. Drop non-required fields
    • 58. Improve Forms:1. Default Zip (Use geolocation)2. Use HTML5 input types 55127HTML5 Inputs:
    • 59. HTML5 Input TypesZip Code Field: Phone Field:<input type=“number”> <input type=“tel”>
    • 60. HTML5 Input TypesEmail Field: Website Field:<input type=“email”> <input type=“url”>
    • 61. Mobile CRO Tools Recap• View mobile source code• Mobile detection tools• Mobile analytics• jQuery responsive plugins• Html5 input types• Click-to-call code tricks• Geolocation code and uses
    • 62. “You can either profit by this or be destroyed.”
    • 63. Key Takeaways• You have more mobile traffic than you think• Rethink "conversion”• Context is the kingdom• Free/inexpensive tools are available to help• Geolocation rocks for personalization
    • 64. Join the MobileRebellion!
    • 65. QuestionsAngie Schottmuller@aschottmullerInteractive Jedi
    • 66. << Bonus Section >> LINKS TO TOOLS
    • 67. “Mobile” Detection Tools••••• PHP Mobile Detect• Detecting Touch Devices:
    • 68. GeoIP Accuracy Check• Google Loader vs. MaxMind GeoIP City API: (JSfiddle code snippet)• iTouchMap - Map Out Multiple Latitude and Longitude Points:• HTML5 Geolocation Example w/ Code: