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