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

The Weight of the Web (Web Directions South)

David Demaree
October 25, 2013

The Weight of the Web (Web Directions South)

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

David Demaree

October 25, 2013
Tweet

More Decks by David Demaree

Other Decks in Design

Transcript

  1. The WEIGHT of the WEB
    DAVID DEMAREE
    WEB DIRECTIONS S OU TH 20 1 3
    Friday, October 25, 13

    View Slide

  2. The web as A PHYSICAL MEDIUM
    Friday, October 25, 13

    View Slide

  3. The web as A PHYSICAL MEDIUM
    and what we can do about it
    Friday, October 25, 13

    View Slide

  4. INFORMATION
    The spread of
    Friday, October 25, 13

    View Slide

  5. INFORMATION
    must overcome
    PHYSICAL CONSTRAINTS
    The spread of
    Friday, October 25, 13

    View Slide

  6. Friday, October 25, 13

    View Slide

  7. Friday, October 25, 13

    View Slide

  8. INFORMATIONALLY RICH
    but not at all portable
    LECTERN BIBLE
    Friday, October 25, 13

    View Slide

  9. GIDEON BIBLE
    Not a beautiful object, but
    PORTABLE AND UBIQUITOUS
    INFORMATIONALLY RICH
    but not at all portable
    LECTERN BIBLE
    Friday, October 25, 13

    View Slide

  10. FIDELITY
    High information density,
    at the expense of portability
    REACH
    Less informationally rich media
    optimized for wide distribution
    Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  13. Friday, October 25, 13

    View Slide

  14. The September issue of U.S. Vogue
    Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  17. Friday, October 25, 13

    View Slide

  18. Friday, October 25, 13

    View Slide

  19. Friday, October 25, 13

    View Slide

  20. Friday, October 25, 13

    View Slide

  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

    View Slide

  22. Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  25. Friday, October 25, 13

    View Slide

  26. They’re CARRIED over networks that have BANDWIDTH
    Friday, October 25, 13

    View Slide

  27. Friday, October 25, 13

    View Slide

  28. The web is A PHYSICAL MEDIUM
    so why don’t we treat it like one?
    Friday, October 25, 13

    View Slide

  29. The web’s physical context
    Friday, October 25, 13

    View Slide

  30. The web’s physical context
    Friday, October 25, 13

    View Slide

  31. 1024×768px or larger
    Around 110 ppi
    Millions of colors
    The web’s physical context
    Friday, October 25, 13

    View Slide

  32. 1024×768px or larger
    Around 110 ppi
    Millions of colors
    The web’s physical context
    Keyboard/mouse
    interaction
    Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  35. Progression of web technology
    HTML 1.0
    Only text + hyperlinks
    Netscape Era
    Images, tables,
    The photographic turn
    Image maps / Flash
    Web standards
    Same stuff, better code
    Friday, October 25, 13

    View Slide

  36. vogue.com
    Web design conventions informed by print
    Use of images for type + wayfinding
    Fixed page width/grid @ 960px
    Friday, October 25, 13

    View Slide

  37. vogue.com
    Web design conventions informed by print
    Use of images for type + wayfinding
    Fixed page width/grid @ 960px
    Friday, October 25, 13

    View Slide

  38. vogue.com
    Web design conventions informed by print
    Friday, October 25, 13

    View Slide

  39. Friday, October 25, 13

    View Slide

  40. Friday, October 25, 13

    View Slide

  41. Enter the POST-PC WEB
    Friday, October 25, 13

    View Slide

  42. Friday, October 25, 13

    View Slide

  43. Users are consuming web content on NEW SCREENS
    Friday, October 25, 13

    View Slide

  44. Users are consuming web content on NEW SCREENS
    Desktop PCs
    Notebooks
    Smartphones
    10-inch tablets
    Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  47. Hi-DPI displays
    Friday, October 25, 13

    View Slide

  48. Friday, October 25, 13

    View Slide

  49. Standard rendering @ 1:1 scale
    Hi-DPI screens show existing artwork
    Friday, October 25, 13

    View Slide

  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

    View Slide

  51. Sample photo @ 1x
    1280×486
    = 193 KB Sample photo @ 2x
    2560×972
    = 602 KB
    Friday, October 25, 13

    View Slide

  52. Mumbai, India Somewhere in rural Kenya
    Wireless networks
    Friday, October 25, 13

    View Slide

  53. Friday, October 25, 13

    View Slide

  54. MORE pixels
    MORE devices
    MORE places
    Friday, October 25, 13

    View Slide

  55. MORE pixels
    MORE devices
    MORE places
    SLOWER networks
    HARDER to develop
    HIGHER cost
    Friday, October 25, 13

    View Slide

  56. Friday, October 25, 13

    View Slide

  57. The web is A PHYSICAL MEDIUM
    so what do we do about it?
    Friday, October 25, 13

    View Slide

  58. The wrong thing
    Friday, October 25, 13

    View Slide

  59. Web pages are SOFTWARE,
    not printed work
    Friday, October 25, 13

    View Slide

  60. What we deliver is not the rendered work,
    but INSTRUCTIONS for rendering the work
    Friday, October 25, 13

    View Slide

  61. We can build the web of the future
    by giving devices BETTER INSTRUCTIONS
    Friday, October 25, 13

    View Slide

  62. Friday, October 25, 13

    View Slide

  63. SCALABLE graphics
    RESPONSIVE web design
    ADAPTIVE content
    ITERATIVE workflows
    Friday, October 25, 13

    View Slide

  64. Use resolution-independent assets
    for type, decoration, and wayfinding
    SCALABLE graphics
    Friday, October 25, 13

    View Slide

  65. Friday, October 25, 13

    View Slide

  66. Friday, October 25, 13

    View Slide

  67. Friday, October 25, 13

    View Slide

  68. Friday, October 25, 13

    View Slide

  69. Friday, October 25, 13

    View Slide

  70. Friday, October 25, 13

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  77. ADAPTIVE content
    Friday, October 25, 13

    View Slide

  78. Desktop Mobile
    Plan content appropriate for different kinds of reading
    Friday, October 25, 13

    View Slide

  79. http://j.mp/mcgranebook
    Friday, October 25, 13

    View Slide

  80. Designing for use requires ITERATION
    Prototype/Build Test Repeat
    Friday, October 25, 13

    View Slide

  81. Use frontend frameworks for prototypes
    P R O T O T Y P I N G
    j.mp/respproto
    Friday, October 25, 13

    View Slide

  82. BrowserStack
    T E S T I N G
    browserstack.com/responsive
    Friday, October 25, 13

    View Slide

  83. Test your designs on real devices
    T E S T I N G
    Friday, October 25, 13

    View Slide

  84. Friday, October 25, 13

    View Slide

  85. The web is A PHYSICAL MEDIUM
    and the future is really exciting
    Friday, October 25, 13

    View Slide

  86. Friday, October 25, 13

    View Slide

  87. By embracing the web’s DIGITAL nature
    we can overcome its PHYSICAL constraints
    and spread INFORMATION
    EVERYWHERE
    Friday, October 25, 13

    View Slide

  88. Thank you.
    @ddemaree
    [email protected]
    typekit.com
    Friday, October 25, 13

    View Slide