The Weight of the Web

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.

C157b16234f1e75e8eac3698c1d4414a?s=128

David Demaree

May 16, 2013
Tweet

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
  5. None
  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
  14. None
  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?
  22. None
  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
  26. None
  27. None
  28. None
  29. None
  30. None
  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?

  51. None
  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

  66. None
  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  ✉