We'll cover how to design a responsive website responsibly - How you can delivery a consistent user experience to users on small and large screen devices and how to decrease your website's page size quickly and effectively to make your website load fast even on slow internet connections. We'll cover how to use the newest HTML5 specifications even on browsers that do not have native support such as the <picture> element. We'll discuss how HTTP/2 changes things and also the new service worker specification and what that means.

1. Delivering Responsibly
dev.Objective() 2016
Matt Busche @mrbusche

2. Questions?

3. Responsive Design
● An approach
● Optimal user experience
● Content first!
● What do you users care about?

4. Responsive Design
● Platform agnostic
● 94.64% + all mobile
● Fluid user interface
● Watches, phones, e-readers, tablets, laptops, monitors, etc
● Two orientations for most

5. Why Responsive Design?
https://opensignal.com/reports/fragmentation.php

6. Why Responsive Design?
Desktop Mobile

7. Why Responsive Design?
● 333M smartphones sold Q3 2015
● 6.2 visits on 2.6 devices
● Mobile users > desktop

8. Why Responsive Design?
● 92% of adults have a cell phone
● 68% have a smartphone
● 73% have a desktop/laptop
● 45% have a tablet

9. Progressive Enhancement
● Not just old browsers
● Network behavior
● 60% US still on 3G or 2G/Edge
● Content blockers on iOS9

10. Progressive Enhancement
● CDN is down
● Bad network
● Select box to type ahead (Demo)
● Add features if available (Demo)

11. Progressive Enhancement
● Image Enhancement

12. Progressive Enhancement
● Load minimum styles
● EnhanceJS

13. Progressive Web Apps
● Progressive!
● Short attention spans

14. Progressive Web Apps

15. Progressive Web Apps
● Service Worker

16. Service Worker
● 53.31% no IE, Edge, Safari
● Offline functionality
● Background sync
● Add to home screen
● Push notifications

17. Push notifications
● Service Worker Spec
● Increase engagement
● Demo / push.png

18. Detecting Features
● Modernizr

19. Detecting Features
● @supports - 69.52% (non IE, old Android)

20. Progressive Disclosure

21. Progressive Disclosure

22. Page size
● Desktop page size 2466 kB
● Images 1504 kB 62%
● Scripts 399 kB 16%
● Video 294 kB 12%
● CSS 75 kB 3%
● Fonts 73 kB 3%
● HTML 67 kB 3%
● Other 11 kB <1%

23. Page size past 5 years
5/2011 5/2012 5/2013 5/2014 5/2015 5/2016
Desktop 772 kB 1059 kB 1448 kB 1775 kB 2099 kB 2466 kB
Increase +37% +37% +23% +18% +17%
Mobile 377 kB 537 kB 752 kB 915 kB 1143 kB 1765 kB
Increase +42% +40% +22% +25% +54%

24. Why do we care?
● 50% of traffic is through mobile device
● 80% of worldwide users on 3G or worse
● 60% of US users 3G or worse
● 50% of mobile device traffic is wifi

25. Why do we care?

26. Decreasing image load times
● Use the right size images

27. Decreasing image load times
● TinyPNG, ImageOptim, 100 others
● Data URI - 95.3%
● SVG - 94.67%

28. Grunticon
● SVG data uri - 21 images 20 KB gz 4.5 KB
● PNG data uri - 21 images 23.2 KB gz 11.1 KB
● PNG images - 21 images 307 bytes plus image size
● Grunt task or web based

29. Decreasing image load times
● Picture element - 63.29% - Demo
○ Browser chooses based on screen size
● Img with srcset - 66.09% - Demo
○ Browser chooses best fit

30. Decreasing CSS/JS load times
● Minify
● Concat
● One http request
● JS obfuscation

31. Enable gzip/Brotli
● Gzip - supported in all browsers
● Brotli
○ 17-25% improvement
○ 45.81% support 6.97% May 26th
○ HTTPS only

32. JavaScript Library Sizes
Development Minified gzip Savings
JQuery 1.11 276 kB 94 kB 33 kB 88.04%
Angular 1.2.15 729 kB 101 kB 37 kB 94.92%
Bootstrap 3.1.1 118 kB 98 kB 17 kB 85.59%
Foundation 5 186 kB 146 kB 18 kB 90.32%

33. Page size with basic tips
● Desktop page size 1250 kB
● Images (60% savings) 602 kB 48%
● Scripts (-50%) 200 kB 16%
● Video 294 kB 24%
● CSS (-50%) 38 kB 3%
● Fonts 73 kB 6%
● HTML (-50%) 34 kB 3%
● Other 11 kB <1%

34. Browser Caching
● Expire Headers
● CSS
● JavaScript
● Images
● Invalidate with new name

35. HTTP/2
● Faster on mobile
● Works best from one host
● Cheaper http requests
● Binary
● Multiplexed; eliminates blocking

36. HTTP/2 Keep Doing
● Optimize for size
● Progressive enhancement
● Eliminate unnecessary http requests

37. HTTP/2 Stop Doing
● Domain sharding
● CSS sprites

38. Testing
● Browser tools
○ Disable JavaScript
○ Slow connections
○ Mobile emulator
● Real devices

39. Questions?