Your SlideShare is downloading. ×
0
@aweil #convcon
Mobile First?
@aweil #convcon
What is Mobile First?
It’s an Opportunity
–Reach more people
–Focus on content
–Innovate
–Convert more cus...
@aweil #convcon
80% of mobile revenue
Derived from visitors browsing the full site from a mobile device
35% of mobile visi...
@aweil #convcon
½ billion mCommerce shoppers by 2016
71% of smartphone users shop on their mobile
48% of retail shopping t...
@aweil #convcon
Apparel & Accessories sold $1Bn via mobile in Q113
@aweil #convcon
• You can’t just shrink an existing site
– Size matters…but it really IS more than that
– (common) Assumpt...
@aweil #convcon
51% say websites hard to navigate & use
46% say product images are too small
41% are concerned about secur...
@aweil #convcon
Conversions Support Mobile First
Website Visits by Device
Smartphone Revenue / Session
@aweil #convcon
How Does Your App Behave?
• Lose the signal
– Find a basement or elevator
• Mix it up
– Walk in and out of...
@aweil #convcon
You Need To Know…It’s Important
42%
29%
29%
Will go to a competitor
Will NEVER RETURN
Will wait a year
85%...
@aweil #convcon
Users perceive sites to be 15% slower
than they really are
@aweil #convcon
• You need to start over
– Design for the smaller, more limited devices
– Note: conceptually, not necessar...
@aweil #convcon
• Launched mCommerce app in 2012
• Visualize product: Virtual stickers via camera
• 5 column design (conve...
@aweil #convcon
It’s a Journey
http://bit.ly/15BQqGT
@aweil #convcon
@aweil #convcon
Do you even need a mobile site?
10% site traffic from mobile
Calculate
– % target customers
– $ to impleme...
@aweil #convcon
Consider Existing Investments
• Site Design and Development
• Maintenance & Support
• Hosting / Server fee...
@aweil #convcon
What is your objective?
@aweil #convcon
@aweil #convcon
Goals Help Determine “How”
• Less expensive
• Faster development
• Simpler deployment
• Better tracking
• ...
@aweil #convcon
LinkedIN Went Native
2012: HTML5 for efficiency & agility
8-10%
Mobile
users
Apps
running
out of
Memory
La...
@aweil #convcon
Educate Yourself
http://bit.ly/14IgtMN
@aweil #convcon
@aweil #convcon
Advantages Disadvantages
Enables mobile-optimized content Split mobile/main link value
m. subdomains synon...
@aweil #convcon
Consider Consistent Content
http://bit.ly/14IfBrC
@aweil #convcon
RWD Your site works well on every device
Advantages Disadvantages
No duplicate content maintains rankings ...
@aweil #convcon
Responsive Not.
How do Users Experience You?
@aweil #convcon
For 90/10 Go to Extremes
@aweil #convcon
A Note on Device Support
http://bit.ly/159wwjl @aweil #convcon
@aweil #convcon
And It’s Becoming More Difficult
Growth of Webpage Footprint & Number
of Requests (1995 to 2012)
(Sources:...
@aweil #convcon
Analyze & Optimize
http://bit.ly/17nUE7z
@aweil #convcon
@aweil #convcon
Performance Impacts Conversions
28.7%faster
slower
BETTER PERFORMANCE
=
HIGHER CONVERSIONS
11.9%
Quality S...
@aweil #convcon
Performance = Experience + Speed
4.3%in REVENUE
2 seconds
slower
Pages that were…
DROP
2.2 seconds
improve...
@aweil #convcon
All Things Are NOT Created Equal
DNS
Resolution
Server
Connection
Server
‘Wait Time’
Page
Downloaded
Brows...
@aweil #convcon
3rd Parties = Distributed Problems
http://bit.ly/1dsV3b7
@aweil #convcon
http://bit.ly/15aRBtG
Pick Your Battles
@aweil #convcon
Engaging Experiences Aren’t Free
– Fonts
– Retina Images
– Audio
– Video
– 3rd party tags
http://bit.ly/16...
@aweil #convcon
Image-ine that…
20%
4%
5%
70%
1%
Average Bytes per Page by Content Type on Mobile
Scripts
Stylesheets
HTML...
@aweil #convcon
Base resolution
(300 x 200 px)
Retina/HD resolution
(600 x 400 px)
Jpg compression 80 / 21 kb Jpg compress...
@aweil #convcon
Compress
Aim LOW
– Lowest acceptable
quality
Investigate Formats
– WebP?
Be Progressive
– Can lead to bett...
@aweil #convcon
http://bit.ly/133ijam
Improve the Experience
Challenge User Experience Issues
Goal Increase traffic & conv...
@aweil #convcon
• Yottaa case studies
Put Your Site on a Diet
http://bit.ly/15aVu1E
Challenge 1.4 MB page, heaviest 20% on...
@aweil #convcon
Experience is EVERYTHING
74%
OF SHOPPERS
WILL ABANDON
TRANSACTIONS
OVER 5s
$3Bn
POTENTIAL
CONVERSION
REVEN...
@aweil #convcon
In Summary
• Analyze Needs
• Either
– Go Mobile First!
– Think mobile!
• Optimize Images & Rendering
• Eva...
@aweil #convcon
Thank You!
ROI of WPO eBook
1.Analyze Needs
2.Go Mobile First! Think mobile!
3.Optimize Images & Rendering...
Upcoming SlideShare
Loading in...5
×

Mobile First - Conversion Conference Presentation

855

Published on

Given the rise in mobile computing, instead of "ticking the box" when it comes to your site's mobile experience, it may make more sense to start with your mobile experience. Mobile sites tend to be smaller and more focused, and many would argue that in creating a mobile solution content creators and designers are forced to crystallize their messaging and to hyper-optimize the end user workflow. Come see case studies of organizations that followed this approach, and learn when prioritizing your mobile site first might be the most effective deployment strategy.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
855
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Dir. Of Products at Yottaa
    Web Performance and User Experience Optimization Service
    15 years building and tuning apps and websites from various angles
  • PHILOSOPHY – Prioritize Mobile Context
    Reach more people (77% have mobile, 85% sold in 2011 have browsers)
    Focus on core content (what to do with 20% of screen available?)
    Innovate – new technology
    CONVERT – more mobile devices than people this year, restaurants convert 90%, 64% w/in the hour

    By the end of this year there will be more mobile devices than people

    http://mashable.com/2013/02/06/mobile-growth/?__hstc=28181411.2b94e1c1b807545f894e9da17dcc240b.1380296215268.1380296215268.1380296215268.1&__hssc=28181411.1.1380296215269

    Mobile searches related to restaurants have a conversion rate of 90% with 64% converting within the hour. (Source: xAd and Telemetrics, 2012) - See more at: http://www.digby.com/mobile-statistics/#sthash.ZACPqe1r.dpuf
  • WHO has a mobile site?
    You ALL do
    You need to act accordingly

    WHY…?

    http://queue.acm.org/detail.cfm?id=2510122
  • http://www.comscore.com/Insights/Press_Releases/2013/5/comScore_Reports_Q1_2013_Desktop_Based_US_Retail_ECommerce_Spending
  • The AVG. SPEND on mCommerce sites is $65K this year

    plan to spend an average of $65,000 on mobile this year - See more at: http://www.digby.com/mobile-statistics/#sthash.ZACPqe1r.dpuf
  • Challenge SHALLOW NOTION you can shrink desktop site
    Mobile-optimized is real
    More than screen size
    Remove convenient assumptions
    Networks shaky
    Device capabilities vary
    On-device app versions fragmented

    ACCOMMODATE most difficult (MOBILE) first
  • USERS ARE NOT PASSIVE – Maybe passive aggressive
    Shrink a site = shrink conversion potential

  • Numbers speak for themselves
    * 70% of users abandon shopping carts, huge $$ spent on retention
    Smartphones convert the worst – why?
    Smallest viewports
    Greatest fragmentation
    Highest impact from unreliable networks
  • SO how does your app behave?
    How many use an APM solution?
    How many use RUM?
    How many have a dedicated group to manage performance

    YOU SHOULD TEST – And this is the PERFECT opportunity
  • Mobile users expect a site to load faster
    4-8 seconds
    For sites slower than 5s, users spend less time on ads, maybe 1sec
  • So if global cart abandonment is 70%, perception is 15% slower, you will struggle
    NOTE: Mobile abandonment numbers suggest more patience, but this is changing

    Fun fact: research shows that rodeo riders are one of the (if not THE) only professions to consistently guesstimate time.
  • Conceptual reboot
    Design for smaller, limited devices
    Be smart about images
    Implement intelligent code – RWD (we’ll talk more)
    Respond to device capability – enable more when it will benefit users
    Implement what you can afford to maintain (old browsers, variable experience, more testing, more $$)
  • Dec 2009: 12% mobile
    Dec 2010: 24% (next, launch mobile)
    Dec 2012: 42%
    H112 – H113: 90% increase in mobile conversions!
    275% increase in traffic
    Revenue per user > 70%!
    Mobile revenue 538% increase!
    Non-phone: 17% conv inc., 25% revenue inc, rev/user inc 17%

    http://www.internetretailer.com/mobile/2013/01/28/fathead-dives-head-first-augmented-reality-and-responsive
  • Existing investments may already constrain budget
    * How much do you spend on your website solutions?
    * Mobile solution CANNOT be additive, must be aligned
  • Objective drives your choice/decision
  • TEST a market oppty
    Easily roll out new features (vs. app)
    Target market starting to use tech – Samsung GS4 Easy Mode folks
    Tracking user behavior

    Retailers’ apps with store mode gather five times more engagement.

    - See more at: http://www.digby.com/mobile-statistics/#sthash.ZACPqe1r.dpuf
  • LinkedIN –
    saw users spending more time on site
    Surprised to find that devices running out of memory!

    It’s ideal to keep rendered content for instant switching back. However you could only do that if memory management is done optimally. There’s only so much you could keep until the app crashes running out of memory.

  • Mobile redirects are exceedingly common
    Challenge SEO - Google penalizing sites for poor m.site optimization
    Challenge CRO - converting is harder when the experience is poor
    potentially EXPENSIVE

    Tools: multiple domains, DIY, framework plugins
    Figuring it out: User Agent Switcher, Ayima Redirect Checker
  • Common differences between RWD and .msite is content & features
    m.site typically a subset of content
    Assumption "mobile users want access only to content that is “important” to them."
    Sure to alienate and frustrate
    Studies found the content users were seeking was the same, regardless of device
  • Responsive Web Design articulates how to adapt a website’s layout for multiple screen resolutions.
    Creating a responsive web design utilizes:
    Fluid grids that ebb and flow with a devices’ screen size
    Flexible images and media that keep content intact on any resolution
    Media queries allowing designs to adapt by establishing dimension breakpoints
  • Scaling up versus scaling down ensures message, content and functionality remain intact
    Scaling down risks core message and functionality getting lost
  • For RWD, “designing to the extremes.”
    Either mobile first, OR
    Start by designing the desktop version of the website.
    Work out typography, tone and overall visual direction — as well as layout
    Small screen or “mobile” version, using the same visual direction, but adjusting the layout as appropriate for the smaller screen.
    Visual examples of the two layouts of the website that will vary the greatest — the biggest and the smallest screen versions of the design. These two examples will guide me as I begin the website’s front-end development.

    Image: http://media.smashingmagazine.com/wp-content/uploads/2012/11/envision-extremes.jpg
  • Optimizing for everything is impossible
  • There’s an ALIGNED concept in mobile design and mobile first, and that’s PERFORMANCE.
    Why is this important? Because of how websites and web applications have changed
    Over 200 versions of os/browser
    Over 30 combinations of mobile OS in the wild

    Strategically decide what target devices and browsers for which to optimize.
  • Using site analytics can help you understand your audience better
    can be misleading (they might rely on JS, they don’t count impatient visitors that don’t ever wait for your site to load, etc)
    BETTER perf = HIGHER conversion
    Google’s Quality Score impacts cost/click, and speed impacts QS
    you must research your audience to gauge what best to optimize for.

    Focus on known devices and screen sizes (phones, tablets, desktops).
    mobile-first established the baseline for our website’s CSS.
  • 7% drop in conversions for every 1 second of latency
  • Let's talk about a necessary evil - the cost of doing business?
    CoreMetrics, Optimizely, GetSatisfaction, LiveChat, Marketo
    Show us where users've been, how they're behaving, but ruining their experience
    Some companies are ripping out 3rd party javascript to get performance back
    Consider delay or lazy loading

    Social
    Last year, only 12% of consumers bought anything through social media - See more at: http://www.digby.com/mobile-statistics/#sthash.ZACPqe1r.dpuf
  • MYTH 2: total size of assets for mobile will be smaller than desktop.
    MYTH 2: The total number of http requests for mobile web will be smaller than those delivered to desktop web.
  • Fonts usage — old version of Typekit that downloaded SVG fonts on iPhone. These font files made the mobile version much bigger than desktop.
    Retina images — Sometimes, both the mobile images and the retina mobile images are getting downloaded for a double hit.
    HTML5 Audio — HTML5 audio is embedded on the page. The browser is downloading the full mp3 file regardless of whether or not the user presses play. This balloons huffduffer.com from 122k on desktop to 2.9MB in Mobile Safari.
    HTML5 Video — Mobile Safari starts downloading a portion of the video in order to validate the video will work and to grab a scene from the video to use in the player. Desktop Safari wasn’t doing this.
  • Images are stilly typically the worst offenders
  • Consider a tip for mobile retina images - in most cases you can avoid bloat

    http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
  • Pageviews per visit & time spent on the site per visit have increased by 30%

    We’ve seen a 30% increase in conversion rate since optimizing our site – a very significant increase. That’s a very real figure indicating more sales & money in my pocket.
  • Analyze & Determine Mobile Needs
    Get to know your content & your users
    Either
    Give mobile first a try
    Specifically rev your site with mobile in mind
    Optimize Images & Rendering
    Evaluate 3rd Party Javascripts
    ITERATE!
  • Transcript of "Mobile First - Conversion Conference Presentation"

    1. 1. @aweil #convcon Mobile First?
    2. 2. @aweil #convcon What is Mobile First? It’s an Opportunity –Reach more people –Focus on content –Innovate –Convert more customers http://bit.ly/16ZN7pe Instead of starting with a desktop site, start with a mobile site & progressively enhance to devices with larger screens.
    3. 3. @aweil #convcon 80% of mobile revenue Derived from visitors browsing the full site from a mobile device 35% of mobile visitors Prefer to use a full site over an m.site whenever the option is provided (souders) One in five Electronic purchases is made using a mobile phone (BuzzCity)
    4. 4. @aweil #convcon ½ billion mCommerce shoppers by 2016 71% of smartphone users shop on their mobile 48% of retail shopping time already on mobile @aweil #convcon
    5. 5. @aweil #convcon Apparel & Accessories sold $1Bn via mobile in Q113
    6. 6. @aweil #convcon • You can’t just shrink an existing site – Size matters…but it really IS more than that – (common) Assumptions are your enemy • Mobile cannot be treated as a subset – Start simply by removing excess – Iterate and grow with testing & validation http://bit.ly/158FIEH Quick notes for context
    7. 7. @aweil #convcon 51% say websites hard to navigate & use 46% say product images are too small 41% are concerned about security26% feel that checkout is frustrating 41% are materially concerned about security
    8. 8. @aweil #convcon Conversions Support Mobile First Website Visits by Device Smartphone Revenue / Session
    9. 9. @aweil #convcon How Does Your App Behave? • Lose the signal – Find a basement or elevator • Mix it up – Walk in and out of WiFi areas • Have a cuppa – Find slow, saturated WiFi (coffee shop, train) • Shut up and drive – Ride along in a car to swap towers, signals • Paint a picture – Map your findings to understand and prioritize http://bit.ly/14MOmNr
    10. 10. @aweil #convcon You Need To Know…It’s Important 42% 29% 29% Will go to a competitor Will NEVER RETURN Will wait a year 85% expect mobile to be FASTER 57% experience PROBLEMS WILL NEVER RETURN!!
    11. 11. @aweil #convcon Users perceive sites to be 15% slower than they really are
    12. 12. @aweil #convcon • You need to start over – Design for the smaller, more limited devices – Note: conceptually, not necessarily a rollback • Basic abilities to plan for – Responsive images for various viewports, DPI – Adaptive capability based on env. & capability – Dynamic layout as screen real estate increases – Optimized user experience to drive conversions http://bit.ly/19QS5t2 So what’s the point?
    13. 13. @aweil #convcon • Launched mCommerce app in 2012 • Visualize product: Virtual stickers via camera • 5 column design (conversions vs. columns) • Cost: $250,000 – 1,500 staff hours from 10 people – 3 months to implement http://bit.ly/18oin2z Enough hyperbole. Prove it. 1 col 2 col 3 col 4 col 5 col Device(s) Phones Tablets Tablets & Desktops Desktops Widescreen Desktops Traffic 16% 6% 54% 17% 7%
    14. 14. @aweil #convcon It’s a Journey http://bit.ly/15BQqGT @aweil #convcon
    15. 15. @aweil #convcon Do you even need a mobile site? 10% site traffic from mobile Calculate – % target customers – $ to implement Would another solution have a larger impact? @aweil #convcon
    16. 16. @aweil #convcon Consider Existing Investments • Site Design and Development • Maintenance & Support • Hosting / Server fees • Marketing, automation, analytics • eCommerce Software http://bit.ly/18vHK66
    17. 17. @aweil #convcon What is your objective? @aweil #convcon
    18. 18. @aweil #convcon Goals Help Determine “How” • Less expensive • Faster development • Simpler deployment • Better tracking • Best for productivity • More robust • Better interaction • Faster • Offline access • Best for interactivity Site App
    19. 19. @aweil #convcon LinkedIN Went Native 2012: HTML5 for efficiency & agility 8-10% Mobile users Apps running out of Memory Lacked testing & profiling 2013: Native for user experience Majority of Traffic from mobile Better features (use HTML5, CSS for email) Apple and Google drive innovation http://bit.ly/15NdyAg
    20. 20. @aweil #convcon Educate Yourself http://bit.ly/14IgtMN @aweil #convcon
    21. 21. @aweil #convcon Advantages Disadvantages Enables mobile-optimized content Split mobile/main link value m. subdomains synonymous with mobile Large investment to implement redirects Could affect usability/CRO Mobile URL Redirect
    22. 22. @aweil #convcon Consider Consistent Content http://bit.ly/14IfBrC
    23. 23. @aweil #convcon RWD Your site works well on every device Advantages Disadvantages No duplicate content maintains rankings Requires additional code re-working One URL means no mobile crawlers Can’t differentiate mobile content Max link value. No risk of split link value Could affect usability/CRO No redirects = low latency & fewer errors New code may affect rankings
    24. 24. @aweil #convcon Responsive Not. How do Users Experience You?
    25. 25. @aweil #convcon For 90/10 Go to Extremes
    26. 26. @aweil #convcon A Note on Device Support http://bit.ly/159wwjl @aweil #convcon
    27. 27. @aweil #convcon And It’s Becoming More Difficult Growth of Webpage Footprint & Number of Requests (1995 to 2012) (Sources: Demenech 2007, Gomez 2008, Charzinski 2010, Souders 2012) Ajax / HTML5 Becomes Mainstream Global Internet Devices Shipment (2005 to 2016, Unit: 500M) (Source: Business Insider Mobile Report 2012) 2005 Personal Computers Smartphones Tablets 2006 2007 2008 2009 2010 2011 2012E 2013E 2014E 2015E 2016E
    28. 28. @aweil #convcon Analyze & Optimize http://bit.ly/17nUE7z @aweil #convcon
    29. 29. @aweil #convcon Performance Impacts Conversions 28.7%faster slower BETTER PERFORMANCE = HIGHER CONVERSIONS 11.9% Quality Score impacts cost per click Performance CPCLOWERS IMPROVING
    30. 30. @aweil #convcon Performance = Experience + Speed 4.3%in REVENUE 2 seconds slower Pages that were… DROP 2.2 seconds improvement in landing page speed INCREASED DOWNLOADS 15.4% by 60% faster INCREASED DONATION CONVERSION Making Barack Obama’s website 14% 1 second delay causes a 7% in CONVERSIONS 1 second delay causes a 16% in CUSTOMER SATISFACTION DROP DROP 1 second delay causes an 11% in PAGE VIEWS DROP
    31. 31. @aweil #convcon All Things Are NOT Created Equal DNS Resolution Server Connection Server ‘Wait Time’ Page Downloaded Browser Title Bar Appears Page Starts to Render Page is Displayed Ready for Interaction • Network bottlenecks • Number of round trips • Content Size & Complexity − Page asset weight (4.3 MB) − Number of requests (304) − 3rd party widgets − Use of CSS and Javascripts • Serialization (sequential loading & execution of individual page assets) LEGEND DNS Resolution Content Delivery User Experience Delivery Challenges Start Your Website 0.013 Sec 1.056 Sec 2.116 Sec 11.389 Sec 1.687 Sec 0.748 Sec 0.062 Sec
    32. 32. @aweil #convcon 3rd Parties = Distributed Problems http://bit.ly/1dsV3b7
    33. 33. @aweil #convcon http://bit.ly/15aRBtG Pick Your Battles
    34. 34. @aweil #convcon Engaging Experiences Aren’t Free – Fonts – Retina Images – Audio – Video – 3rd party tags http://bit.ly/16GoSfX
    35. 35. @aweil #convcon Image-ine that… 20% 4% 5% 70% 1% Average Bytes per Page by Content Type on Mobile Scripts Stylesheets HTML Images Other
    36. 36. @aweil #convcon Base resolution (300 x 200 px) Retina/HD resolution (600 x 400 px) Jpg compression 80 / 21 kb Jpg compression 31 / 16 kb (75% of base) Can you spot the difference?
    37. 37. @aweil #convcon Compress Aim LOW – Lowest acceptable quality Investigate Formats – WebP? Be Progressive – Can lead to better perceived perf
    38. 38. @aweil #convcon http://bit.ly/133ijam Improve the Experience Challenge User Experience Issues Goal Increase traffic & conversions Solution Accelerate page rendering Results 30% more conversions “That’s a very real figure indicating more sales and more money in my pocket.” James Ness, Founder and President @aweil #convcon
    39. 39. @aweil #convcon • Yottaa case studies Put Your Site on a Diet http://bit.ly/15aVu1E Challenge 1.4 MB page, heaviest 20% on web Goal Increase traffic & conversions, incl. mobile Solution Reduce Requests 41% Results 53% faster loads, increased traffic 100% “With Yottaa turned on, the Big Train site just flies on mobile devices.” Jim Wendt, eCommerce Marketing Manager @aweil #convcon
    40. 40. @aweil #convcon Experience is EVERYTHING 74% OF SHOPPERS WILL ABANDON TRANSACTIONS OVER 5s $3Bn POTENTIAL CONVERSION REVENUE LOST 70% cite poor performance CART ABANDONMENT IN eCOMMERCE 46% Say performance Is material to BRAND loyalty 52% Loss in CONVERSIONS for every 1sec 7% SEM CLICKS DOUBLED INCREASED PAGE LOAD 5sAND
    41. 41. @aweil #convcon In Summary • Analyze Needs • Either – Go Mobile First! – Think mobile! • Optimize Images & Rendering • Evaluate 3rd Party Javascripts • ITERATE!
    42. 42. @aweil #convcon Thank You! ROI of WPO eBook 1.Analyze Needs 2.Go Mobile First! Think mobile! 3.Optimize Images & Rendering 4.Evaluate 3rd Party Javascripts 5.ITERATE!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×