The Weight of the Web

Regarding the physicality of digital media and the spread of information. Originally presented at TYPO Berlin 2013 Touch on 16 May 2013.

Transcript

1. e WEIGHT of the WEB regarding the PHYSICALITY OF DIGITAL MEDIA and the SPREAD OF INFORMATION DAVID DEMAREE TYPO BERLIN 2013 TOUCH
2. INFORMATION
3. INFORMATION As designers, our role is to help it spread can be powerful when it is able to spread
4. Historically, the biggest barriers to spreading information have been PHYSICAL CONSTRAINTS
6. LECTERN OR PULPIT BIBLES Richly detailed, but not at all portable
7. GIDEON BIBLE Not a beautiful object but UBIQUITOUS
8. RICHNESS e level of detail in a given piece of information REACH How widely it can be distributed vs. Physical media must balance
9. 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
10. 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 e photographic turn Once a printing process can reproduce a photograph, everything is effectively a photograph
11. e September issue of U.S. Vogue
12. e September issue of U.S. Vogue
13. e September issue of U.S. Vogue Print edition weighs 4.5 lbs (2 kg) 71% of pages are adverts
15. We do not typically see the web as having physicality
16. We do not typically see the web as having physicality A N D Y E T
17. We do not typically see the web as having physicality A N D Y E T Images have DIMENSIONS 2890px 1920px
18. We do not typically see the web as having physicality A N D Y E T Files have WEIGHT 549 KB Images have DIMENSIONS 2890px 1920px
19. We do not typically see the web as having physicality A N D Y E T Files have WEIGHT 549 KB Images have DIMENSIONS 2890px 1920px 59% downloaded, 1s remaining Networks have BANDWIDTH
20. e web is A PHYSICAL MEDIUM
21. e web is A PHYSICAL MEDIUM BUT IF how have we managed not to ACKNOWLEDGE ITS CONSTRAINTS?
23. e desktop PC became the web’s reference platform
24. 1024×768px or larger Around 110 ppi Millions of colors e desktop PC became the web’s reference platform
25. 1024×768px or larger Around 110 ppi Millions of colors e desktop PC became the web’s reference platform Wired or wireless broadband
31. Fixed page width around 960 px
32. Fixed page width around 960 px Liberal use of raster images
33. Fixed page width around 960 px Liberal use of raster images Initial page load is 768 KB Over the course of a single visit, Vogue.com loads over 1.5 MB of additional content
34. Even though technology has nally progressed, the conventions of web design remain rmly rooted in PRINT
35. And then, A CHANGE
36. New screens
37. Much web content is now consumed in DIFFERENT PHYSICAL CONTEXTS from where it was created
38. Wireless
39. Wireless
40. Most users don’t yet have LTE Wireless
41. Most users don’t yet have LTE Many don’t have HSDPA or 3G Wireless
42. Most users don’t yet have LTE Many don’t have HSDPA or 3G Many have no signal at all yet Wireless
43. Hi-DPI
44. Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork
45. Retina rendering @ 2:1 scale Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork and ALL ITS FLAWS
46. Sample photo @ 1x 1280×486 = 193 KB Sample photo @ 2x 2560×972 = 602 KB
47. Screen densities will continue to improve
48. Screen densities will continue to improve 3x 2x 1x
49. Screen densities will continue to improve likely faster than our networks’ capacity to support them 3x 2x 1x 1G 3G LTE
50. So what is to be done?
52. Make web content not as xed PAGES, but more like USER INTERFACE
53. What we deliver is not the rendered work, but INSTRUCTIONS for rendering the work
54. We can build the web of the future by giving devices BETTER INSTRUCTIONS
55. RESPONSIVE web design
56. http://j.mp/nick-sherman
57. Adaptation for screen width
58. http://j.mp/hidpitype Adaptation for screen density
59. Proportion over pixels http://j.mp/rwd-article
60. Proportion over pixels http://j.mp/ uidtype
61. ADAPTIVE content
62. In different contexts, display alternate content
63. http://j.mp/mcgranebook
64. Designing for use requires TESTING
65. ese are not problems, but rather OPPORTUNITIES
67. By embracing the web’s digital nature we can overcome physical constraints and spread INFORMATION EVERYWHERE
68. ank you. @ddemaree ddemaree@adobe.com typekit.com  ✉