Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)

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

Conversion Rate =
The % of users that complete a
presented action.

BUY

SUBSCRIBE SUBMIT FORM

WATCH VIDEO

SHARE
ACTIONS
CLICK A LINK
RATE OR REVIEW COMMENT

CALL (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?

Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)

ASK YOURSELF:

What are the consequences
of getting it wrong?
^
VERY

43% are
unlikely to return to a
slow-loading mobile site

Source: Compuware, "What Users Want from Mobile,” 2011

40% turn to a
competitor’s site after a
bad mobile experience

Source: Compuware, "What Users Want from Mobile," 2011

You must use the
information in
this R2 unit to
plan the
attack...

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

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

User Goal Differences

• Traditional Desktop/Laptop
> Benefit-Oriented

• Tablet
> Interaction-Oriented

• Smartphone
> Task-Oriented

CONTENT
is only king...
in the right kingdom
of CONTEXT.

Mobile Mini Toolbox
View, detect, and measure.

“Ooooh!
Awesome
mobile website!
I wonder how
they did that...”

EXPANDABLE
MENU

“Ooooh!
Awesome
mobile website!
I wonder how
they 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%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

View Source Code
MOBILE
BOOKMARKLETS

• Snoopy
by AllMarkedUp.com

• ViewS
by Shaun Inman

• View Source
by Ole Michelsen

http://detectmobilebrowsers.com

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

“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

25-40%
of mobile traffic is
NOT detected by
traditional web analytics.

REALITY
Those are the droids you were looking for.

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

“Your powers are weak,
old man...”

Use Mobile Analytics

• Bango

• Percent Mobile

• Amethon

Where Does Your
Mobile Design Fall?

Hann Diagram by theepiceeffect

jQuery Responsive Plugins

Headings: FitTextJS.com Video: FitVidsJS.com

jQuery Responsive Slideshows

WooThemes Flexslider PhotoSwipe.com

Campaign Example:
Subway Battleship
battleship.subway.com

Free Code: 6LYHL6NY

VERY WELL DONE!
(Check out the code!)

Top Actions on Mobile:
• Make a phone call
• Find nearest location

61% of mobile
users call after a local
business search

Source: Google - The Mobile Movement Study, 2011

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

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

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
LOADER

Compare Map Points: http://bit.ly/itouchmap

Get the Code: http://html5demos.com/geo

Proximate is close enough
for suggestions!

Privacy Considerations

PERSONAL NON-INTRUSIVE

Stores 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

Beyond 3, anticipate each
added 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 Phone
4. Drop non-required fields

Improve Forms:
1. Default Zip
(Use geolocation)
2. Use HTML5 input types 55127

HTML5 Inputs:
http://bit.ly/html5inputtypes

HTML5 Input Types
Zip Code Field: Phone Field:
<input type=“number”> <input type=“tel”>

HTML5 Input Types
Email 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

Questions

Angie Schottmuller
@aschottmuller
Interactive 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

Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition) (20)

More from Angie Schottmuller (12)

Recently uploaded (20)

Mobile Marketing Conversion Optimization Tools & Tricks (Star Wars Edition)

Editor's Notes