The Weight of the Web (Web Directions South)

Presented at Web Directions South in Sydney, NSW, Australia, on 25 October 2013.

Transcript

1. The WEIGHT of the WEB DAVID DEMAREE WEB DIRECTIONS S OU TH 20 1 3 Friday, October 25, 13
2. The web as A PHYSICAL MEDIUM Friday, October 25, 13
3. The web as A PHYSICAL MEDIUM and what we can do about it Friday, October 25, 13
4. INFORMATION The spread of Friday, October 25, 13
5. INFORMATION must overcome PHYSICAL CONSTRAINTS The spread of Friday, October 25, 13
6. Friday, October 25, 13
7. Friday, October 25, 13
8. INFORMATIONALLY RICH but not at all portable LECTERN BIBLE Friday, October 25, 13
9. GIDEON BIBLE Not a beautiful object, but PORTABLE AND UBIQUITOUS INFORMATIONALLY RICH but not at all portable LECTERN BIBLE Friday, October 25, 13
10. FIDELITY High information density, at the expense of portability REACH Less informationally rich media optimized for wide distribution Friday, October 25, 13
11. Progression of printing technology Movable type Only text Printing press Text + illustration Lithography B&W photo Offset Color Digital Cheap, easy color Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite GREGOR SAMSA then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him Friday, October 25, 13
12. Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite GREGOR SAMSA then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him The photographic turn Once a printing process can reproduce a photograph, everything is effectively a photograph Friday, October 25, 13
13. Friday, October 25, 13
14. The September issue of U.S. Vogue Friday, October 25, 13
15. The September issue of U.S. Vogue SEPTEMBER 2012 Print edition weighs 4.5 lbs (2 kg) 650 pages (71%) are advertisements Friday, October 25, 13
16. The September issue of U.S. Vogue SEPTEMBER 2013 Print edition weighs 3.75 lbs (1.7 kg) 662 pages (73%) are advertisements Friday, October 25, 13
17. Friday, October 25, 13
18. Friday, October 25, 13
19. Friday, October 25, 13
20. Friday, October 25, 13
21. 1090px 32px 240px × 240px 240px × 240px 240px × 240px 240px × 240px 30 30 30 30 30 30 30 Web pages have DIMENSIONS Friday, October 25, 13
22. Friday, October 25, 13
23. Web pages have 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 Friday, October 25, 13
24. Web pages have 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 Friday, October 25, 13
25. Friday, October 25, 13
26. They’re CARRIED over networks that have BANDWIDTH Friday, October 25, 13
27. Friday, October 25, 13
28. The web is A PHYSICAL MEDIUM so why don’t we treat it like one? Friday, October 25, 13
29. The web’s physical context Friday, October 25, 13
30. The web’s physical context Friday, October 25, 13
31. 1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Friday, October 25, 13
32. 1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Keyboard/mouse interaction Friday, October 25, 13
33. 1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Desktop-class hardware Keyboard/mouse interaction Friday, October 25, 13
34. 1024×768px or larger Around 110 ppi Millions of colors Broadband internet 2 mbps/sec or greater The web’s physical context Desktop-class hardware Keyboard/mouse interaction Friday, October 25, 13
35. Progression of web technology HTML 1.0 Only text + hyperlinks Netscape Era Images, tables, <font> The photographic turn Image maps / Flash Web standards Same stuff, better code Friday, October 25, 13
36. vogue.com Web design conventions informed by print Use of images for type + wayfinding Fixed page width/grid @ 960px Friday, October 25, 13
37. vogue.com Web design conventions informed by print Use of images for type + wayfinding Fixed page width/grid @ 960px Friday, October 25, 13
38. vogue.com Web design conventions informed by print Friday, October 25, 13
39. Friday, October 25, 13
40. Friday, October 25, 13
41. Enter the POST-PC WEB Friday, October 25, 13
42. Friday, October 25, 13
43. Users are consuming web content on NEW SCREENS Friday, October 25, 13
44. Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets Friday, October 25, 13
45. Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets E-book readers 7-inch tablets “Phablets” “Convertibles” Friday, October 25, 13
46. Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets E-book readers 7-inch tablets “Phablets” “Convertibles” Smart TVs Gaming consoles Google Glass Smartwatches Friday, October 25, 13
47. Hi-DPI displays Friday, October 25, 13
48. Friday, October 25, 13
49. Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork Friday, October 25, 13
50. Retina rendering @ 2:1 scale Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork and ALL ITS FLAWS Friday, October 25, 13
51. Sample photo @ 1x 1280×486 = 193 KB Sample photo @ 2x 2560×972 = 602 KB Friday, October 25, 13
52. Mumbai, India Somewhere in rural Kenya Wireless networks Friday, October 25, 13
53. Friday, October 25, 13
54. MORE pixels MORE devices MORE places Friday, October 25, 13
55. MORE pixels MORE devices MORE places SLOWER networks HARDER to develop HIGHER cost Friday, October 25, 13
56. Friday, October 25, 13
57. The web is A PHYSICAL MEDIUM so what do we do about it? Friday, October 25, 13
58. The wrong thing Friday, October 25, 13
59. Web pages are SOFTWARE, not printed work Friday, October 25, 13
60. What we deliver is not the rendered work, but INSTRUCTIONS for rendering the work Friday, October 25, 13
61. We can build the web of the future by giving devices BETTER INSTRUCTIONS Friday, October 25, 13
62. Friday, October 25, 13
63. SCALABLE graphics RESPONSIVE web design ADAPTIVE content ITERATIVE workflows Friday, October 25, 13
64. Use resolution-independent assets for type, decoration, and wayfinding SCALABLE graphics Friday, October 25, 13
65. Friday, October 25, 13
66. Friday, October 25, 13
67. Friday, October 25, 13
68. Friday, October 25, 13
69. Friday, October 25, 13
70. Friday, October 25, 13
71. Adapt to different screen sizes R E S P O N S I V E W E B D E S I G N Friday, October 25, 13
72. Adapt to different screen sizes R E S P O N S I V E W E B D E S I G N http://choiseul.info/ Friday, October 25, 13
73. Responsive images R E S P O N S I V E W E B D E S I G N Friday, October 25, 13
74. Responsive images R E S P O N S I V E W E B D E S I G N Friday, October 25, 13
75. Responsive typography R E S P O N S I V E W E B D E S I G N Adobe Source Sans Pro Light @1x @2x Friday, October 25, 13
76. http://j.mp/hidpitype Adaptation for screen density R E S P O N S I V E W E B D E S I G N Friday, October 25, 13
77. ADAPTIVE content Friday, October 25, 13
78. Desktop Mobile Plan content appropriate for different kinds of reading Friday, October 25, 13
79. http://j.mp/mcgranebook Friday, October 25, 13
80. Designing for use requires ITERATION Prototype/Build Test Repeat Friday, October 25, 13
81. Use frontend frameworks for prototypes P R O T O T Y P I N G j.mp/respproto Friday, October 25, 13
82. BrowserStack T E S T I N G browserstack.com/responsive Friday, October 25, 13
83. Test your designs on real devices T E S T I N G Friday, October 25, 13
84. Friday, October 25, 13
85. The web is A PHYSICAL MEDIUM and the future is really exciting Friday, October 25, 13
86. Friday, October 25, 13
87. By embracing the web’s DIGITAL nature we can overcome its PHYSICAL constraints and spread INFORMATION EVERYWHERE Friday, October 25, 13
88. Thank you. @ddemaree ddemaree@adobe.com typekit.com Friday, October 25, 13