Getting Real: Responsive & Adaptive Web Design

Presented at eTail East 2015

Transcript

1. Getting Real: Responsive & Adaptive Mobile Design
2. Hello! I AM SCOTT JUNGLING Front-End Engineering Manager Build.com
3. /talking-point/ ◦ What are we trying to solve? ◦ Making sense of the <abbr>soup</abbr> ◦ History of mobile @ Build.com
4. “ As consumers increasingly shop on their mobile devices, how can we efficiently provide them with a tailored experience that will increase conversions?
5. Two Schools of Thought RWD vs AWD
6. RESPONSIVE WEB DESIGN Why bother?
8. RESPONSIVE WEB DESIGN
10. RESPONSIVE WEB DESIGN IN PRACTICE
11. ADAPTIVE WEB DESIGN
12. PRODUCT PAGE COMPARISON Mobile Tablet Desktop Page Load 5.5s 6.1s 7.7s Weight (MB) 1.31 1.35 2.44 Requests 99 106 265
13. PRODUCT PAGE COMPARISON Mobile Tablet Desktop Page Load 5.5s 6.1s 7.7s Start Render 1.7s 2.3s 2.6s Weight (MB) 1.31 1.35 2.44 Requests 99 106 265
14. ADAPTIVE BUILD.COM
15. History Build.com through the years
16. 2012 www. m.
17. 2013–4 3rd Party www. t. m.
18. 2014–5 www. www. www
19. 2016–? www. www.
20. RWD + AWD = RESS
21. Responsive Design Server Side Components RESS AWD RWD
22. Further Info ◦ A Book Apart, Responsive Web Design ◦ RESS ◦ Google PageSpeed Insights ◦ MediaQueri.es
23. THANKS! Any questions?
24. CREDITS Special thanks to all the people who made and released these awesome resources for free: ◦ Presentation template by SlidesCarnival ◦ Photographs by Unsplash