Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

David Demaree

May 16, 2013
Tweet

More Decks by David Demaree

Other Decks in Design

Transcript

  1. e WEIGHT of the WEB
    regarding the
    PHYSICALITY OF DIGITAL MEDIA
    and the
    SPREAD OF INFORMATION
    DAVID DEMAREE
    TYPO BERLIN 2013 TOUCH

    View Slide

  2. INFORMATION

    View Slide

  3. INFORMATION
    As designers, our role is to help it spread
    can be powerful when it is able to spread

    View Slide

  4. Historically, the biggest
    barriers to spreading
    information have been
    PHYSICAL CONSTRAINTS

    View Slide

  5. View Slide

  6. LECTERN OR PULPIT BIBLES
    Richly detailed, but not at all portable

    View Slide

  7. GIDEON BIBLE
    Not a beautiful object
    but UBIQUITOUS

    View Slide

  8. RICHNESS
    e level of detail in a
    given piece of information
    REACH
    How widely it can be
    distributed
    vs.
    Physical media must balance

    View Slide

  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

    View Slide

  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

    View Slide

  11. e September issue of U.S. Vogue

    View Slide

  12. e September issue of U.S. Vogue

    View Slide

  13. e September issue of U.S. Vogue
    Print edition weighs
    4.5 lbs (2 kg)
    71% of pages
    are adverts

    View Slide

  14. View Slide

  15. We do not typically see the web as having physicality

    View Slide

  16. We do not typically see the web as having physicality
    A N D Y E T

    View Slide

  17. We do not typically see the web as having physicality
    A N D Y E T
    Images have
    DIMENSIONS
    2890px
    1920px

    View Slide

  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

    View Slide

  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

    View Slide

  20. e web is
    A PHYSICAL MEDIUM

    View Slide

  21. e web is
    A PHYSICAL MEDIUM
    BUT IF
    how have we managed not to
    ACKNOWLEDGE ITS CONSTRAINTS?

    View Slide

  22. View Slide

  23. e desktop PC became the web’s reference platform

    View Slide

  24. 1024×768px or larger
    Around 110 ppi
    Millions of colors
    e desktop PC became the web’s reference platform

    View Slide

  25. 1024×768px or larger
    Around 110 ppi
    Millions of colors
    e desktop PC became the web’s reference platform
    Wired or wireless
    broadband

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. Fixed page width around 960 px

    View Slide

  32. Fixed page width around 960 px
    Liberal use of raster images

    View Slide

  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

    View Slide

  34. Even though technology has nally progressed,
    the conventions of web design remain
    rmly rooted in PRINT

    View Slide

  35. And then,
    A CHANGE

    View Slide

  36. New screens

    View Slide

  37. Much web content is now consumed in
    DIFFERENT PHYSICAL CONTEXTS
    from where it was created

    View Slide

  38. Wireless

    View Slide

  39. Wireless

    View Slide

  40. Most users don’t yet have LTE
    Wireless

    View Slide

  41. Most users don’t yet have LTE
    Many don’t have HSDPA or 3G
    Wireless

    View Slide

  42. Most users don’t yet have LTE
    Many don’t have HSDPA or 3G
    Many have no signal at all yet
    Wireless

    View Slide

  43. Hi-DPI

    View Slide

  44. Standard rendering @ 1:1 scale
    Hi-DPI screens show existing artwork

    View Slide

  45. Retina rendering @ 2:1 scale
    Standard rendering @ 1:1 scale
    Hi-DPI screens show existing artwork and ALL ITS FLAWS

    View Slide

  46. Sample photo @ 1x
    1280×486
    = 193 KB Sample photo @ 2x
    2560×972
    = 602 KB

    View Slide

  47. Screen densities will continue to improve

    View Slide

  48. Screen densities will continue to improve
    3x
    2x
    1x

    View Slide

  49. Screen densities will continue to improve
    likely faster than our networks’ capacity to support them
    3x
    2x
    1x
    1G 3G LTE

    View Slide

  50. So what is to be done?

    View Slide

  51. View Slide

  52. Make web content not as xed PAGES,
    but more like USER INTERFACE

    View Slide

  53. What we deliver is not the rendered work,
    but INSTRUCTIONS for rendering the work

    View Slide

  54. We can build the web of the future
    by giving devices BETTER INSTRUCTIONS

    View Slide

  55. RESPONSIVE web design

    View Slide

  56. http://j.mp/nick-sherman

    View Slide

  57. Adaptation for screen width

    View Slide

  58. http://j.mp/hidpitype
    Adaptation for screen density

    View Slide

  59. Proportion over pixels http://j.mp/rwd-article

    View Slide

  60. Proportion over pixels http://j.mp/ uidtype

    View Slide

  61. ADAPTIVE content

    View Slide

  62. In different contexts, display alternate content

    View Slide

  63. http://j.mp/mcgranebook

    View Slide

  64. Designing for use requires TESTING

    View Slide

  65. ese are not problems,
    but rather OPPORTUNITIES

    View Slide

  66. View Slide

  67. By embracing the web’s digital nature
    we can overcome physical constraints
    and spread INFORMATION
    EVERYWHERE

    View Slide

  68. ank you.
    @ddemaree
    [email protected]
    typekit.com



    View Slide