Mobile First - Conversion Conference Presentation
•Télécharger en tant que PPTX, PDF•
1 j'aime•2,267 vues
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.
Recommandé
Contenu connexe
En vedette
En vedette (15)
Plus de Yottaa
Plus de Yottaa (20)
Dernier
Dernier (20)
Mobile First - Conversion Conference Presentation
- 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. @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. @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. @aweil #convcon Apparel & Accessories sold $1Bn via mobile in Q113
- 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. @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. @aweil #convcon Conversions Support Mobile First Website Visits by Device Smartphone Revenue / Session
- 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. @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. @aweil #convcon Users perceive sites to be 15% slower than they really are
- 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. @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. @aweil #convcon It’s a Journey http://bit.ly/15BQqGT @aweil #convcon
- 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. @aweil #convcon Consider Existing Investments • Site Design and Development • Maintenance & Support • Hosting / Server fees • Marketing, automation, analytics • eCommerce Software http://bit.ly/18vHK66
- 17. @aweil #convcon What is your objective? @aweil #convcon
- 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. @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
- 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. @aweil #convcon Consider Consistent Content http://bit.ly/14IfBrC
- 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. @aweil #convcon Responsive Not. How do Users Experience You?
- 25. @aweil #convcon For 90/10 Go to Extremes
- 26. @aweil #convcon A Note on Device Support http://bit.ly/159wwjl @aweil #convcon
- 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. @aweil #convcon Analyze & Optimize http://bit.ly/17nUE7z @aweil #convcon
- 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. @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. @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. @aweil #convcon 3rd Parties = Distributed Problems http://bit.ly/1dsV3b7
- 33. @aweil #convcon http://bit.ly/15aRBtG Pick Your Battles
- 34. @aweil #convcon Engaging Experiences Aren’t Free – Fonts – Retina Images – Audio – Video – 3rd party tags http://bit.ly/16GoSfX
- 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. @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. @aweil #convcon Compress Aim LOW – Lowest acceptable quality Investigate Formats – WebP? Be Progressive – Can lead to better perceived perf
- 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. @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. @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. @aweil #convcon In Summary • Analyze Needs • Either – Go Mobile First! – Think mobile! • Optimize Images & Rendering • Evaluate 3rd Party Javascripts • ITERATE!
- 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!
Notes de l'éditeur
- 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!