The Weight of the Web v3.0 - Univ. of Illinois Web Conference

In this third version of The Weight of the Web, I've thrown out most everything in order to focus on two things: the ridiculous size of modern web pages, and why "responsive" is not a mobile strategy.

Transcript

1. The weight of the web David Demaree University of Illinois Web Conference 29 April 2014
2. WHO I AM @ddemaree ddemaree@adobe.com ✉
3. Previous version of this talk dem.mx/wds13video
5. The web as A PHYSICAL MEDIUM
6. The web as A PHYSICAL MEDIUM and what we can do about it
7. INFORMATION The spread of
8. INFORMATION vs PHYSICAL CONSTRAINTS The spread of
11. INFORMATIONALLY RICH 
 but not at all portable LECTERN BIBLE
12. GIDEON BIBLE Not a beautiful object, but PORTABLE AND UBIQUITOUS INFORMATIONALLY RICH 
 but not at all portable LECTERN BIBLE
13. Properties of physical media Dimensions Weight Time
14. Physical constraints and the web
16. 1090px 32px 240px × 240px 240px × 240px 240px × 240px 240px × 240px 30 30 30 30 30 30 30 DIMENSIONS
18. WEIGHT 62.96 KB 88.66 KB 66.01 KB 105.48 KB 90.53 KB 48.05 KB 71.05 KB 71.92 KB Typekit 146.44 KB Site CSS 3.09 KB Site JS 117.13 KB HTML document 3.92 KB
19. WEIGHT 62.96 KB 88.66 KB 66.01 KB 105.48 KB 90.53 KB 48.05 KB 71.05 KB 71.92 KB Typekit 146.44 KB Site CSS 3.09 KB Site JS 117.13 KB HTML document 3.92 KB
21. TIME
22. Facebook 4 MB
23. New York Times 4 MB
24. Twitter 2 MB
25. Google 1 MB
26. Google (on search) 2 MB
28. Why is this OK?
29. Desktop computers are still
 the web’s reference platform REASON #1:
30. Large screen (1024px) Fast, unmetered network access
31. Users love immersive experiences REASON #2:
32. Users love immersive experiences REASON #2: ADVERTISERS
34. What’s wrong with this?
35. St. Peter’s Square, 2005
36. St. Peter’s Square, 2012
39. Desktop PCs Notebooks Smartphones Ultrabooks Chromebooks 10-inch tablets E-book readers 7-inch tablets Smart TVs “Phablets” “Convertibles” "Wearables"
40. Phones Standard Handheld tablet Portrait < 480px Landscape < 640px Portrait > 480px Landscape > 640px Landscape > 960px Portrait > 760px D E VIC E C ATEG O RI E S
42. Phones Standard Handheld tablet Portrait < 480px Landscape < 640px Portrait > 480px Landscape > 640px Landscape > 960px Portrait > 760px Responsive web design = mobile strategy?
43. Responsive web design = part of a mobile strategy Definitely adapt designs within a device class Maybe scale to multiple device classes
44. Mumbai, India Somewhere in rural Kenya Wireless networks
47. Cellular Broadband/Wi-Fi Inconsistent speed Intermittent availability Metered Expensive N E T WOR K C ATEG O RI E S Generally fast Generally available Unmetered Inexpensive / Free
48. Cellular Broadband/Wi-Fi N E T WOR K C ATEG O RI E S Phones + 
 handheld tablets Everything else
49. What’s wrong with this?
51. Facebook 3 MB NY Times 1 MB Google 721 KB
52. NY Times 1 MB Minimal advertising Images only for top stories No web fonts Optimized for touch Optimized for reading
55. Standard (Responsive) 820 KB Mobile 180 KB
57. The web is A PHYSICAL MEDIUM so where do we go from here?
58. Well, this is just silly
59. Web sites are software
60. Prototype &
 Build Test ↻ Iterate
61. Responsive web design as a baseline
62. Consider your audience
63. Consider modes of interaction
64. j.mp/mcgranebook
65. Separate content from presentation
66. Use frontend frameworks for prototypes P R O T O T Y P I N G j.mp/respproto
67. BrowserStack T E S T I N G browserstack.com/responsive
68. Test your designs on real devices T E S T I N G
70. The web is A PHYSICAL MEDIUM and the future is really exciting
71. Thank you. @ddemaree ddemaree@adobe.com typekit.com ✉