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.

C157b16234f1e75e8eac3698c1d4414a?s=128

David Demaree

April 29, 2014
Tweet

Transcript

  1. The weight of the web David Demaree University of Illinois

    Web Conference 29 April 2014
  2. WHO I AM @ddemaree ddemaree@adobe.com ✉

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

  4. None
  5. The web as A PHYSICAL MEDIUM

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

    do about it
  7. INFORMATION The spread of

  8. INFORMATION vs PHYSICAL CONSTRAINTS The spread of

  9. None
  10. None
  11. INFORMATIONALLY RICH 
 but not at all portable LECTERN BIBLE

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

    INFORMATIONALLY RICH 
 but not at all portable LECTERN BIBLE
  13. Properties of physical media Dimensions Weight Time

  14. Physical constraints and the web

  15. None
  16. 1090px 32px 240px × 240px 240px × 240px 240px ×

    240px 240px × 240px 30 30 30 30 30 30 30 DIMENSIONS
  17. None
  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
  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
  20. None
  21. TIME

  22. Facebook 4 MB

  23. New York Times 4 MB

  24. Twitter 2 MB

  25. Google 1 MB

  26. Google (on search) 2 MB

  27. None
  28. Why is this OK?

  29. Desktop computers are still
 the web’s reference platform REASON #1:

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

  31. Users love immersive experiences REASON #2:

  32. Users love immersive experiences REASON #2: ADVERTISERS

  33. None
  34. What’s wrong with this?

  35. St. Peter’s Square, 2005

  36. St. Peter’s Square, 2012

  37. None
  38. None
  39. Desktop PCs Notebooks Smartphones Ultrabooks Chromebooks 10-inch tablets E-book readers

    7-inch tablets Smart TVs “Phablets” “Convertibles” "Wearables"
  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
  41. None
  42. Phones Standard Handheld tablet Portrait < 480px Landscape < 640px

    Portrait > 480px Landscape > 640px Landscape > 960px Portrait > 760px Responsive web design = mobile strategy?
  43. Responsive web design = part of a mobile strategy Definitely

    adapt designs within a device class Maybe scale to multiple device classes
  44. Mumbai, India Somewhere in rural Kenya Wireless networks

  45. None
  46. None
  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
  48. Cellular Broadband/Wi-Fi N E T WOR K C ATEG O

    RI E S Phones + 
 handheld tablets Everything else
  49. What’s wrong with this?

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

  52. NY Times 1 MB Minimal advertising Images only for top

    stories No web fonts Optimized for touch Optimized for reading
  53. None
  54. None
  55. Standard (Responsive) 820 KB Mobile 180 KB

  56. None
  57. The web is A PHYSICAL MEDIUM so where do we

    go from here?
  58. Well, this is just silly

  59. Web sites are software

  60. Prototype &
 Build Test ↻ Iterate

  61. Responsive web design as a baseline

  62. Consider your audience

  63. Consider modes of interaction

  64. j.mp/mcgranebook

  65. Separate content from presentation

  66. Use frontend frameworks for prototypes P R O T O

    T Y P I N G j.mp/respproto
  67. BrowserStack T E S T I N G browserstack.com/responsive

  68. Test your designs on real devices T E S T

    I N G
  69. None
  70. The web is A PHYSICAL MEDIUM and the future is

    really exciting
  71. Thank you. @ddemaree ddemaree@adobe.com typekit.com ✉