Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)
36 likes28,174 views
The document provides insights into mobile marketing conversion optimization, emphasizing the importance of understanding conversion rates and user experience. It presents strategies for improving mobile UX through responsive design, simplified layouts, and effective use of calls to action, highlighting tools and code snippets to enhance mobile functionality. Key takeaways include the significance of context in conversions and the availability of free tools to aid in mobile optimization efforts.
![Mobile Marketing
Conversion Optimization
Tools and Code Tricks to Enhance Mobile UX & Conversion
[ Star Wars Jedi-Style ]
Angie Schottmuller - @aschottmuller
SMX Advanced 2012 - #SMX #mobile #CRO #RWD](https://image.slidesharecdn.com/mobile-marketing-conversion-optimization-tools-and-coding-tricks-angie-schottmuller-smx-advanced-2012-120606192325-phpapp02/85/Mobile-Marketing-Conversion-Optimization-Tools-Tricks-Star-Wars-Edition-1-320.jpg)
![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](https://image.slidesharecdn.com/mobile-marketing-conversion-optimization-tools-and-coding-tricks-angie-schottmuller-smx-advanced-2012-120606192325-phpapp02/85/Mobile-Marketing-Conversion-Optimization-Tools-Tricks-Star-Wars-Edition-48-320.jpg)
Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)
- 1. Mobile Marketing Conversion Optimization Tools 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.
- 4. BUY SUBSCRIBE SUBMIT FORM WATCH VIDEO SHARE ACTIONS CLICK A LINK RATE OR REVIEW COMMENT CALL (PHONE) INTERACT (GAME/CONFIGURATOR)
- 5. Star Wars Conversion Rates Obi Wan’s Jedi Record: 50%
- 6. Industry average conversion rate is ~2-4%. So 50% is awesome! ...Right?
- 9. ASK YOURSELF: What are the consequences of getting it wrong? ^ VERY
- 10. 43% are unlikely to return to a slow-loading mobile site Source: Compuware, "What Users Want from Mobile,” 2011
- 11. 40% turn to a competitor’s site after a bad mobile experience Source: Compuware, "What Users Want from Mobile," 2011
- 12. You need a PLAN.
- 13. You must use the information in this R2 unit to plan the attack...
- 14. Mobile CRO Preparation CONSIDERATIONS: 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
- 15. Contextual Differences TECHNOLOGY: 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
- 16. User Goal Differences • Traditional Desktop/Laptop > Benefit-Oriented • Tablet > Interaction-Oriented • Smartphone > Task-Oriented
- 18. CONTENT is only king... in the right kingdom of CONTEXT.
- 19. Mobile Mini Toolbox View, detect, and measure.
- 20. “Ooooh! Awesome mobile website! I wonder how they did that...”
- 21. EXPANDABLE MENU “Ooooh! Awesome mobile website! I wonder how they did that...” RESPONSIVE SLIDESHOW
- 22. Don’t wonder. Steal Use their code!
- 23. View Source Code javascript:(function()%7Bvar%20d%3Dd ocument%2Cs%2Ce%3Bvar%20el%3Dd. getElementById('snpy')%3Bif(typeof%20 MOBILE Snoopy!%3D'undefined')%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'%2C'http • Snoopy %3A%2F%2Fsnoopy- assets.allmarkedup.com%2Fsnoopy- by AllMarkedUp.com min.css')%3Bs.setAttribute('rel'%2C'styles heet')%3Bs.setAttribute('type'%2C'text% 2Fcss')%3Bd.getElementsByTagName('h • ViewS ead')%5B0%5D.appendChild(s)%3Be%3 Dd.createElement('script')%3Be.setAttri by Shaun Inman bute('src'%2C'https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2Fsnoopy- assets.allmarkedup.com%2Fsnoopy- min.js')%3Bd.getElementsByTagName(' • View Source body')%5B0%5D.appendChild(e)%7D)() %3B by Ole Michelsen
- 24. View Source Code MOBILE BOOKMARKLETS • Snoopy by AllMarkedUp.com • ViewS by Shaun Inman • View Source by Ole Michelsen
- 25. View Source Code MOBILE BOOKMARKLETS • Snoopy by AllMarkedUp.com • ViewS by Shaun Inman • View Source by Ole Michelsen
- 28. “Mobile” Detection FEATURE 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!
- 29. Measure Mobile
- 30. “You’re sure the homing beacon is secure aboard their ship? I’m taking an awful risk, Vader. This had better work.” - Grand Moff Wilhuff Tarkin
- 31. 25-40% of mobile traffic is NOT detected by traditional web analytics.
- 32. REALITY Those are the droids you were looking for.
- 33. Web Analytics for Mobile 1. Track what you can Google Analytics - Create Advanced Segments: http://bit.ly/gamobiletracking 2. Set ‘unknown referrers’ w/ tracking codes SiteCatalyst - Specify Referrer Hack: http://bit.ly/scsetreferrer
- 34. “Your powers are weak, old man...”
- 35. Use Mobile Analytics • Bango • Percent Mobile • Amethon
- 37. Where Does Your Mobile Design Fall? Hann Diagram by theepiceeffect
- 38. jQuery is your ally.
- 39. jQuery Responsive Plugins Headings: FitTextJS.com Video: FitVidsJS.com
- 40. jQuery Responsive Slideshows WooThemes Flexslider PhotoSwipe.com
- 41. Campaign Example: Subway Battleship battleship.subway.com Free Code: 6LYHL6NY VERY WELL DONE! (Check out the code!)
- 42. Call to Action
- 45. Top Actions on Mobile: • Make a phone call • Find nearest location
- 46. 61% of mobile users call after a local business search Source: Google - The Mobile Movement Study, 2011
- 48. 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
- 49. 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
- 50. Find a Store
- 53. GeoIP / Geolocation Tools • GeoIP Database http://bit.ly/maxmindgeoip • Zip/Postal Code Database • GeoIP Web Service API • HTML5 Geolocation API http://bit.ly/html5geolocationapi
- 54. “That’s impossible. Even for a computer.”
- 55. ACTUAL MAXMIND GOOGLE LOADER Compare Map Points: http://bit.ly/itouchmap
- 56. Get the Code: http://html5demos.com/geo
- 57. Proximate is close enough for suggestions!
- 58. Privacy Considerations PERSONAL NON-INTRUSIVE Stores nearest you: Stores near 55127: Change Location
- 59. 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
- 61. Beyond 3, anticipate each added form field to REDUCE mobile conversion by 50%
- 62. Simplify Forms: 1. Hide City and State (compute from Zip) 2. Drop Address (unless for mailer) 3. Drop Phone 4. Drop non-required fields
- 63. Improve Forms: 1. Default Zip (Use geolocation) 2. Use HTML5 input types 55127 HTML5 Inputs: http://bit.ly/html5inputtypes
- 64. HTML5 Input Types Zip Code Field: Phone Field: <input type=“number”> <input type=“tel”>
- 65. HTML5 Input Types Email Field: Website Field: <input type=“email”> <input type=“url”>
- 66. 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
- 67. “You can either profit by this or be destroyed.”
- 68. 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
- 69. Join the Mobile Rebellion!
- 71. << Bonus Section >> LINKS TO TOOLS
- 72. “Mobile” Detection Tools • DetectMobileBrowsers.com • DetectRight.com • WURLF.sourceforge.net • DeviceAtlas.com • PHP Mobile Detect • Detecting Touch Devices: http://bit.ly/touchdetection
- 73. 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
Editor's Notes
- #6: http://girls-gone-geek.com/2011/10/14/the-star-wars-divide-a-tale-of-two-costumes/
- #8: http://www.tumblr.com/tagged/anakin-skywalker?before=1333333588
- #14: http://goodgeekranting.wordpress.com/2012/01/26/r2-cant-get-no-respect/
- #19: http://mattersofgrey.com/kinect-star-wars-freebies/
- #25: Screenshot example of http://webdesignerwall.com
- #26: Screenshot example of http://webdesignerwall.com
- #30: AUDIENCE POLL:By a show of hands, how many of you have mobile reports or segments configured in your analytics?
- #36: Image: http://rapiddatasolutions.com/mobile/
- #68: http://starwars.wikia.com/wiki/Mission_to_Jabba%27s_Palace_%28Galactic_Civil_War%29