• Like
  • Save
Mobile Marketing Conversion Optimization Tools & Tricks
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Mobile Marketing Conversion Optimization Tools & Tricks


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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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
  • http://girls-gone-geek.com/2011/10/14/the-star-wars-divide-a-tale-of-two-costumes/
  • http://www.tumblr.com/tagged/anakin-skywalker?before=1333333588
  • http://goodgeekranting.wordpress.com/2012/01/26/r2-cant-get-no-respect/
  • http://mattersofgrey.com/kinect-star-wars-freebies/
  • Screenshot example of http://webdesignerwall.com
  • Screenshot example of http://webdesignerwall.com
  • AUDIENCE POLL:By a show of hands, how many of you have mobile reports or segments configured in your analytics?
  • Image: http://rapiddatasolutions.com/mobile/
  • http://starwars.wikia.com/wiki/Mission_to_Jabba%27s_Palace_%28Galactic_Civil_War%29


  • 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 king...in 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)%7BSnoopy.to ggle()%3Breturn%7Delse%20if(el)%7Bel.BOOKMARKLETS className%3D%2Fclosed%2F.test(el.cl 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- assets.allmarkedup.com%2Fsnoopy- by AllMarkedUp.com 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- assets.allmarkedup.com%2Fsnoopy- min.js)%3Bd.getElementsByTagName(• View Source body)%5B0%5D.appendChild(e)%7D)() %3B by Ole Michelsen
  • 23. View Source CodeMOBILEBOOKMARKLETS• Snoopy by AllMarkedUp.com• ViewS by Shaun Inman• View Source by Ole Michelsen
  • 24. View Source CodeMOBILEBOOKMARKLETS• Snoopy by AllMarkedUp.com• ViewS by Shaun Inman• View Source by Ole Michelsen
  • 25. Detect “Mobile” Devices
  • 26. http://detectmobilebrowsers.com
  • 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: http://bit.ly/gamobiletracking2. Set ‘unknown referrers’ w/ tracking codes SiteCatalyst - Specify Referrer Hack: http://bit.ly/scsetreferrer
  • 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: FitTextJS.com Video: FitVidsJS.com
  • 39. jQuery Responsive SlideshowsWooThemes Flexslider PhotoSwipe.com
  • 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: http://bit.ly/rfc3966
  • 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 http://bit.ly/maxmindgeoip• Zip/Postal Code Database• GeoIP Web Service API• HTML5 Geolocation API http://bit.ly/html5geolocationapi
  • 49. “That’s impossible. Even for a computer.”
  • 50. ACTUAL MAXMIND GOOGLE LOADERCompare Map Points: http://bit.ly/itouchmap
  • 51. Get the Code: http://html5demos.com/geo
  • 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:http://bit.ly/html5inputtypes
  • 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• DetectMobileBrowsers.com• DetectRight.com• WURLF.sourceforge.net• DeviceAtlas.com• PHP Mobile Detect• Detecting Touch Devices: http://bit.ly/touchdetection
  • 68. GeoIP Accuracy Check• Google Loader vs. MaxMind GeoIP City API: (JSfiddle code snippet) http://bit.ly/geoipgooglevsmaxmind• iTouchMap - Map Out Multiple Latitude and Longitude Points: http://bit.ly/itouchmap• HTML5 Geolocation Example w/ Code: http://html5demos.com/geo