Mobile First - Conversion Conference Presentation


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
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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

    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:
  • WHO has a mobile site?
    You ALL do
    You need to act accordingly

  • 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:
  • 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%
  • 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:
  • 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 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 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.

  • 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

    Last year, only 12% of consumers bought anything through social media - See more at:
  • 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 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
  • 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
    Give mobile first a try
    Specifically rev your site with mobile in mind
    Optimize Images & Rendering
    Evaluate 3rd Party Javascripts
  • 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 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 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 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
    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 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 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 @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
    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
    20. 20. @aweil #convcon Educate Yourself @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
    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 @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 @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
    33. 33. @aweil #convcon Pick Your Battles
    34. 34. @aweil #convcon Engaging Experiences Aren’t Free – Fonts – Retina Images – Audio – Video – 3rd party tags
    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 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 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!