Tools and coding tricks to enhance the mobile web user experience and optimize conversion... Star Wars Jedi-style! (Originally presented at SMX Advanced.)

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?

8. Rethink “Conversion”

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

17. Adapt your strategy

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'http%3A%2F%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

26. Detect “Mobile” Devices

27. http://detectmobilebrowsers.com

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

36. Mobile Design Tricks

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

52. Leverage Geolocation

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

60. Simplify Web Forms

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!

70. Questions
Angie Schottmuller
@aschottmuller
Interactive Jedi

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