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

Mobile Marketing Conversion Optimization Tools & Tricks

on

  • 9,263 views

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.)

Statistics

Views

Total Views
9,263
Views on SlideShare
8,498
Embed Views
765

Actions

Likes
27
Downloads
1
Comments
4

18 Embeds 765

http://www.conseilsmarketing.com 221
http://www.scoop.it 206
http://lanyrd.com 144
https://twitter.com 97
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Mobile Marketing Conversion Optimization Tools & Tricks Mobile Marketing Conversion Optimization Tools & Tricks Presentation Transcript

  • 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
  • What is a Conversion?
  • Conversion Rate =The % of users that complete a presented action.
  • BUY SUBSCRIBE SUBMIT FORM WATCH VIDEOSHARE ACTIONS CLICK A LINK RATE OR REVIEW COMMENTCALL (PHONE) INTERACT (GAME/CONFIGURATOR)
  • Star Wars Conversion Rates Obi Wan’s Jedi Record: 50%
  • Industry average conversion rate is ~2-4%. So 50% is awesome! ...Right?
  • Rethink “Conversion”
  • ASK YOURSELF:What are the consequences of getting it wrong? ^ VERY
  • 43% are unlikely to return to aslow-loading mobile site Source: Compuware, "What Users Want from Mobile,” 2011
  • 40% turn to acompetitor’s site after abad mobile experience Source: Compuware, "What Users Want from Mobile," 2011
  • You need a PLAN.
  • You must use theinformation inthis R2 unit toplan theattack...
  • 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
  • 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
  • User Goal Differences• Traditional Desktop/Laptop > Benefit-Oriented• Tablet > Interaction-Oriented• Smartphone > Task-Oriented
  • Adapt your strategy
  • CONTENT is only king...in the right kingdom of CONTEXT.
  • Mobile Mini Toolbox View, detect, and measure.
  • “Ooooh!Awesomemobile website!I wonder howthey did that...”
  • EXPANDABLE MENU“Ooooh!Awesomemobile website!I wonder howthey did that...” RESPONSIVE SLIDESHOW
  • Don’t wonder.Steal Use their code!
  • 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
  • View Source CodeMOBILEBOOKMARKLETS• Snoopy by AllMarkedUp.com• ViewS by Shaun Inman• View Source by Ole Michelsen
  • View Source CodeMOBILEBOOKMARKLETS• Snoopy by AllMarkedUp.com• ViewS by Shaun Inman• View Source by Ole Michelsen
  • Detect “Mobile” Devices
  • http://detectmobilebrowsers.com
  • “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!
  • Measure Mobile
  • “You’re sure the homing beacon issecure aboard their ship? I’m taking anawful risk, Vader. This had better work.”- Grand Moff Wilhuff Tarkin
  • 25-40% of mobile traffic is NOT detected bytraditional web analytics.
  • REALITYThose are the droids you were looking for.
  • 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
  • “Your powers are weak, old man...”
  • Use Mobile Analytics• Bango• Percent Mobile• Amethon
  • Mobile Design Tricks
  • Where Does YourMobile Design Fall? Hann Diagram by theepiceeffect
  • jQuery is your ally.
  • jQuery Responsive PluginsHeadings: FitTextJS.com Video: FitVidsJS.com
  • jQuery Responsive SlideshowsWooThemes Flexslider PhotoSwipe.com
  • Campaign Example:Subway Battleshipbattleship.subway.comFree Code: 6LYHL6NYVERY WELL DONE!(Check out the code!)
  • Call to Action
  • Top Actions on Mobile:• Make a phone call• Find nearest location
  • 61% of mobileusers call after a local business search Source: Google - The Mobile Movement Study, 2011
  • 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
  • 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
  • Find a Store
  • Leverage Geolocation
  • GeoIP / Geolocation Tools• GeoIP Database http://bit.ly/maxmindgeoip• Zip/Postal Code Database• GeoIP Web Service API• HTML5 Geolocation API http://bit.ly/html5geolocationapi
  • “That’s impossible. Even for a computer.”
  • ACTUAL MAXMIND GOOGLE LOADERCompare Map Points: http://bit.ly/itouchmap
  • Get the Code: http://html5demos.com/geo
  • Proximate is close enough for suggestions!
  • Privacy ConsiderationsPERSONAL NON-INTRUSIVEStores nearest you: Stores near 55127: Change Location
  • 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
  • Simplify Web Forms
  • Beyond 3, anticipate eachadded form field to REDUCE mobile conversion by 50%
  • Simplify Forms:1. Hide City and State (compute from Zip)2. Drop Address (unless for mailer)3. Drop Phone4. Drop non-required fields
  • Improve Forms:1. Default Zip (Use geolocation)2. Use HTML5 input types 55127HTML5 Inputs:http://bit.ly/html5inputtypes
  • HTML5 Input TypesZip Code Field: Phone Field:<input type=“number”> <input type=“tel”>
  • HTML5 Input TypesEmail Field: Website Field:<input type=“email”> <input type=“url”>
  • 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
  • “You can either profit by this or be destroyed.”
  • 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
  • Join the MobileRebellion!
  • QuestionsAngie Schottmuller@aschottmullerInteractive Jedi
  • << Bonus Section >> LINKS TO TOOLS
  • “Mobile” Detection Tools• DetectMobileBrowsers.com• DetectRight.com• WURLF.sourceforge.net• DeviceAtlas.com• PHP Mobile Detect• Detecting Touch Devices: http://bit.ly/touchdetection
  • 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