Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
www.yottaa.com Confidential © 2014 Yottaa, Inc. All Rights Reserved.
Dirty Little (not so) Secrets
Responsive Web Design
Agenda
Confidential © All Rights Reserved. www.yottaa.com 2
Mobile site challenges
Responsive Web Design (RWD)
What it doe...
Confidential © All Rights Reserved. www.yottaa.com 3
DO YOU HAVE A MOBILE
SITE?
20% of electronics purchases using mobile
35% of mobile visitors prefer www to m.site
80% of mobile revenue from full site...
Confidential © All Rights Reserved. www.yottaa.com 5
Mobile is all the RAGE…
64%
OF SMARTPHONE
USERS EXPECT
PAGES TO LOAD ...
Confidential © All Rights Reserved. www.yottaa.com 6
And RAGE the users do…
51% say websites hard to navigate & use
46% sa...
Confidential © All Rights Reserved. www.yottaa.com 7
Which is reflected in the conversion rates
Website Visits by Device
S...
Confidential © All Rights Reserved. www.yottaa.com 8
What it means broadly…and for you?
4.3%in REVENUE
2 seconds
slower
Pa...
Enter Responsive Web Design
Confidential © All Rights Reserved. www.yottaa.com 9
Advantages Disadvantages
Most consistent ...
Little r – presentation mostly
– Fluid, flexible layout
– Media queries
– Responsive images
Big R
– Dynamic serving
BOTH a...
Cannot impact 3rd party dynamic
content like social media or ads
CONTENT DELIVERY
NETWORKS
Confidential © All Rights Reser...
Hidden content on most (eCommerce) sites
Confidential © All Rights Reserved. www.yottaa.com 12
Trust Icons
High-Res Images...
Confidential © All Rights Reserved. www.yottaa.com 13
Where hiding content breaks down
Time to Display 2.942sec
Time to Interact 8.436sec
Page Weight 831KB
Round Trips 76
3rd Party Domains 17
Confidential © Al...
Time to Display 1.495sec
Time to Interact 3.294sec
Page Weight 356KB
Round Trips 50
3rd Party Domains 14
Confidential © Al...
Time to Display 0.940sec
Time to Interact 2.246sec
Page Weight 344KB
Round Trips 42
3rd Party Domains 14
Confidential © Al...
Confidential © All Rights Reserved. www.yottaa.com 17
Visualize the difference (focus on 2.5sec)
Reviews load on-demand
– Hidden behind a tab
– Only visible in 3rd scroll viewport
– Requires 3rd party domain
Trust badge...
Dynamically serve images
– Adaptive-images.com
– Blueberry.com
– Retina-images.complexcompulsions.com
Optimize fonts/typog...
THANK YOU
Confidential © All Rights Reserved. www.yottaa.com 20
Upcoming SlideShare
Loading in …5
×

Responsive Web Design: Dirty Little Secrets [Presented by Yottaa]

8,969 views

Published on

Today’s web consumer is a cross-device browser and buyer. One of the more widely adopted solutions to the cross-device (some say mobile) site challenge is Responsive Web Design (RWD), an approach that aims to provide an optimal viewing experience across a wide range of devices. RWD is mostly about client-side solutions to adapt page layouts using fluid, proportion-based grids and flexible images. But there are issues stemming from using desktop technologies for mobile use cases, and a lack of standards and tools that an emerging approach entails. RWD is not simply about layout and design, but also behavior, and whether your site behaves well or poorly depends as much on the content the visitor sees as much as what isn't. This talk will cover the cross-device challenge, how RWD helps and where it presents problems, and some examples of ways to work around these challenges.

Published in: Design, Technology, Business
  • Be the first to comment

Responsive Web Design: Dirty Little Secrets [Presented by Yottaa]

  1. 1. www.yottaa.com Confidential © 2014 Yottaa, Inc. All Rights Reserved. Dirty Little (not so) Secrets Responsive Web Design
  2. 2. Agenda Confidential © All Rights Reserved. www.yottaa.com 2 Mobile site challenges Responsive Web Design (RWD) What it does Differences highlighted Q&A
  3. 3. Confidential © All Rights Reserved. www.yottaa.com 3 DO YOU HAVE A MOBILE SITE?
  4. 4. 20% of electronics purchases using mobile 35% of mobile visitors prefer www to m.site 80% of mobile revenue from full site browsing …so yes, yes you do. Confidential © All Rights Reserved. www.yottaa.com 4 Do you need one?
  5. 5. Confidential © All Rights Reserved. www.yottaa.com 5 Mobile is all the RAGE… 64% OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN UNDER 4s $1Bn APPAREL & ACCESSORIES PURCHASES in Q113 71% Of all retail transactions SMARTPHONE USERS SHOP VIA MOBILE 48% Expect mobile to be faster than desktop 85% Will go to a competitor to transact 42% Will never return to your site 29%
  6. 6. Confidential © All Rights Reserved. www.yottaa.com 6 And RAGE the users do… 51% say websites hard to navigate & use 46% say product images are too small 41% are concerned about security 26% feel that checkout is frustrating
  7. 7. Confidential © All Rights Reserved. www.yottaa.com 7 Which is reflected in the conversion rates Website Visits by Device Smartphone Revenue / Session
  8. 8. Confidential © All Rights Reserved. www.yottaa.com 8 What it means broadly…and for you? 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
  9. 9. Enter Responsive Web Design Confidential © All Rights Reserved. www.yottaa.com 9 Advantages Disadvantages Most consistent user experience possible Requires additional code re-working No duplicate content maintains rankings Difficult to 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
  10. 10. Little r – presentation mostly – Fluid, flexible layout – Media queries – Responsive images Big R – Dynamic serving BOTH are better than Confidential © All Rights Reserved. www.yottaa.com 10 The difference between little r and big R
  11. 11. Cannot impact 3rd party dynamic content like social media or ads CONTENT DELIVERY NETWORKS Confidential © All Rights Reserved. www.yottaa.com 11 Mounting pressure to implement big R RWD PAGELOADTIME ITEFFORT&TIME SITE LAUNCH ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS UPDATE CONTENT & IMAGES ADD SOCIAL MEDIA WIDGETS ADD REAL TIME PERSONALIZATION A/B TEST PAGE CONTENT Hiding components cannot keep pace with ongoing User & Marketing needs Cannot control page load behavior, content priority FRONTEND OPTIMIZATION Manual effort for every content change DO IT YOURSELF
  12. 12. Hidden content on most (eCommerce) sites Confidential © All Rights Reserved. www.yottaa.com 12 Trust Icons High-Res Images Long-scrolling pages Social Media Dynamic Content In Addition: • A/B Tests • Analytic tracking • Beacons • Chat • Personalization • Pixels • RWD w/out RESS Visitors expect fast, flawless experiences on any device Marketing needs social media and other tags to engage visitors IT needs control to ensure speed, scalabilit y and security
  13. 13. Confidential © All Rights Reserved. www.yottaa.com 13 Where hiding content breaks down
  14. 14. Time to Display 2.942sec Time to Interact 8.436sec Page Weight 831KB Round Trips 76 3rd Party Domains 17 Confidential © All Rights Reserved. www.yottaa.com 14 Example: Desktop site
  15. 15. Time to Display 1.495sec Time to Interact 3.294sec Page Weight 356KB Round Trips 50 3rd Party Domains 14 Confidential © All Rights Reserved. www.yottaa.com 15 Example: Mobile site
  16. 16. Time to Display 0.940sec Time to Interact 2.246sec Page Weight 344KB Round Trips 42 3rd Party Domains 14 Confidential © All Rights Reserved. www.yottaa.com 16 Example: Mobile site w/RESS
  17. 17. Confidential © All Rights Reserved. www.yottaa.com 17 Visualize the difference (focus on 2.5sec)
  18. 18. Reviews load on-demand – Hidden behind a tab – Only visible in 3rd scroll viewport – Requires 3rd party domain Trust badges in footer deferred – Only visible in 4th scroll viewport – Requires 3rd party domain Confidential © All Rights Reserved. www.yottaa.com 18 What is different?
  19. 19. Dynamically serve images – Adaptive-images.com – Blueberry.com – Retina-images.complexcompulsions.com Optimize fonts/typography – Fittextjs.com – Lettering.js.com Confidential © All Rights Reserved. www.yottaa.com 19 Other common optimizations in the wild
  20. 20. THANK YOU Confidential © All Rights Reserved. www.yottaa.com 20

×