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

Like this? Share it with your network

Share

Mobile Marketing Conversion Optimization Tools & Tricks

  • 9,499 views
Uploaded 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.)

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,499
On Slideshare
8,733
From Embeds
766
Number of Embeds
18

Actions

Shares
Downloads
1
Comments
4
Likes
30

Embeds 766

http://www.conseilsmarketing.com 221
http://www.scoop.it 206
http://lanyrd.com 144
https://twitter.com 98
http://eduespecialytalentosuniatlantic.blogspot.com 27
http://eventifier.co 18
http://box.graffino.com 14
http://pinterest.com 11
http://www.pinterest.com 7
http://us-w1.rockmelt.com 4
http://www.linkedin.com 4
http://localhost 3
http://www.onlydoo.com 3
http://tweetedtimes.com 2
http://www.twylah.com 1
http://presentationdocs.playableitems.demobo.com 1
http://translate.googleusercontent.com 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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.
  • 4. BUY SUBSCRIBE SUBMIT FORM WATCH VIDEOSHARE ACTIONS CLICK A LINK RATE OR REVIEW COMMENTCALL (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?
  • 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