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

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