Tools and coding tricks to enhance the mobile web user experience and optimize conversion... Star Wars Jedi-style! (Originally presented at SMX Advanced.)
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!
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
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
47.
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
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
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
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