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

The Weight of the Web v3.0 - Univ. of Illinois Web Conference

The Weight of the Web v3.0 - Univ. of Illinois Web Conference

In this third version of The Weight of the Web, I've thrown out most everything in order to focus on two things: the ridiculous size of modern web pages, and why "responsive" is not a mobile strategy.

David Demaree

April 29, 2014
Tweet

More Decks by David Demaree

Other Decks in Design

Transcript

  1. The weight of the web
    David Demaree
    University of Illinois Web Conference
    29 April 2014

    View Slide

  2. WHO I AM
    @ddemaree
    [email protected]

    View Slide

  3. Previous version of this talk
    dem.mx/wds13video

    View Slide

  4. View Slide

  5. The web as A PHYSICAL MEDIUM

    View Slide

  6. The web as A PHYSICAL MEDIUM
    and what we can do about it

    View Slide

  7. INFORMATION
    The spread of

    View Slide

  8. INFORMATION
    vs
    PHYSICAL
    CONSTRAINTS
    The spread of

    View Slide

  9. View Slide

  10. View Slide

  11. INFORMATIONALLY RICH 

    but not at all portable
    LECTERN BIBLE

    View Slide

  12. GIDEON BIBLE
    Not a beautiful object, but
    PORTABLE AND UBIQUITOUS
    INFORMATIONALLY RICH 

    but not at all portable
    LECTERN BIBLE

    View Slide

  13. Properties of physical media
    Dimensions
    Weight
    Time

    View Slide

  14. Physical constraints and the web

    View Slide

  15. View Slide

  16. 1090px
    32px
    240px × 240px 240px × 240px 240px × 240px 240px × 240px
    30 30 30
    30 30 30 30
    DIMENSIONS

    View Slide

  17. View Slide

  18. 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

    View Slide

  19. 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

    View Slide

  20. View Slide

  21. TIME

    View Slide

  22. Facebook
    4 MB

    View Slide

  23. New York Times
    4 MB

    View Slide

  24. Twitter
    2 MB

    View Slide

  25. Google
    1 MB

    View Slide

  26. Google (on search)
    2 MB

    View Slide

  27. View Slide

  28. Why is this OK?

    View Slide

  29. Desktop computers are still

    the web’s reference platform
    REASON #1:

    View Slide

  30. Large screen (1024px)
    Fast, unmetered network access

    View Slide

  31. Users love immersive experiences
    REASON #2:

    View Slide

  32. Users love immersive experiences
    REASON #2:
    ADVERTISERS

    View Slide

  33. View Slide

  34. What’s wrong with this?

    View Slide

  35. St. Peter’s Square, 2005

    View Slide

  36. St. Peter’s Square, 2012

    View Slide

  37. View Slide

  38. View Slide

  39. Desktop PCs
    Notebooks
    Smartphones
    Ultrabooks
    Chromebooks
    10-inch tablets
    E-book readers
    7-inch tablets
    Smart TVs
    “Phablets”
    “Convertibles”
    "Wearables"

    View Slide

  40. Phones Standard
    Handheld tablet
    Portrait < 480px
    Landscape < 640px
    Portrait > 480px
    Landscape > 640px
    Landscape > 960px
    Portrait > 760px
    D E VIC E C ATEG O RI E S

    View Slide

  41. View Slide

  42. Phones Standard
    Handheld tablet
    Portrait < 480px
    Landscape < 640px
    Portrait > 480px
    Landscape > 640px
    Landscape > 960px
    Portrait > 760px
    Responsive web design = mobile strategy?

    View Slide

  43. Responsive web design = part of a mobile strategy
    Definitely adapt designs within a device class
    Maybe scale to multiple device classes

    View Slide

  44. Mumbai, India Somewhere in rural Kenya
    Wireless networks

    View Slide

  45. View Slide

  46. View Slide

  47. Cellular Broadband/Wi-Fi
    Inconsistent speed
    Intermittent availability
    Metered
    Expensive
    N E T WOR K C ATEG O RI E S
    Generally fast
    Generally available
    Unmetered
    Inexpensive / Free

    View Slide

  48. Cellular Broadband/Wi-Fi
    N E T WOR K C ATEG O RI E S
    Phones + 

    handheld tablets
    Everything else

    View Slide

  49. What’s wrong with this?

    View Slide

  50. View Slide

  51. Facebook
    3 MB
    NY Times
    1 MB
    Google
    721 KB

    View Slide

  52. NY Times
    1 MB
    Minimal
    advertising
    Images only for
    top stories
    No web fonts
    Optimized for
    touch
    Optimized for
    reading

    View Slide

  53. View Slide

  54. View Slide

  55. Standard (Responsive)
    820 KB
    Mobile
    180 KB

    View Slide

  56. View Slide

  57. The web is A PHYSICAL MEDIUM
    so where do we go from here?

    View Slide

  58. Well, this is just silly

    View Slide

  59. Web sites are software

    View Slide

  60. Prototype &

    Build
    Test

    Iterate

    View Slide

  61. Responsive web design as a baseline

    View Slide

  62. Consider your audience

    View Slide

  63. Consider modes of interaction

    View Slide

  64. j.mp/mcgranebook

    View Slide

  65. Separate content from presentation

    View Slide

  66. Use frontend frameworks for prototypes
    P R O T O T Y P I N G
    j.mp/respproto

    View Slide

  67. BrowserStack
    T E S T I N G
    browserstack.com/responsive

    View Slide

  68. Test your designs on real devices
    T E S T I N G

    View Slide

  69. View Slide

  70. The web is A PHYSICAL MEDIUM
    and the future is really exciting

    View Slide

  71. Thank you.
    @ddemaree
    [email protected]
    typekit.com


    View Slide