Mobile First: as difficult as doing things right

Transcript

1. MOBILE FIRST
   As difficult as doing things right
   Javier Usobiaga #bdc13
   

   View Slide

2. @HTMLBOY
   Swwweet.com
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Opera Mini
   

   View Slide

7. 200 MILLION USERS
   WORLDWIDE
   

   View Slide

8. HATES MY WEBSITES
   

   View Slide

9. No @font-face
   No client-side JavaScript
   No gradients
   No border-radius
   

   View Slide

10. View Slide

11. 1. AN OVERWEIGHT
    PROBLEM
    

    View Slide

12. “We've remade the Internet in our
    image… Obese.”
    – Jason Grigsby –
    

    View Slide

13. The average webpage is 1.617MB.
    Mostly images.
    httparchive.org
    

    View Slide

14. milwaukeepolicenews.com
    

    View Slide

15. milwaukeepolicenews.com
    7MB
    

    View Slide

16. redrobin.com
    

    View Slide

17. redrobin.com
    10.9MB
    

    View Slide

18. grolsch.com
    

    View Slide

19. grolsch.com
    25MB
    

    View Slide

20. moto.oakley.com
    

    View Slide

21. moto.oakley.com
    85MB
    

    View Slide

22. Just because we can, it doesn’t
    mean we should.
    

    View Slide

23. View Slide

24. View Slide

25. 74% of mobile users won’t wait longer
    than 5 seconds for a page to load
    bit.ly/5secondsmobile
    

    View Slide

26. 20€/month for 1GB
    

    View Slide

27. 20€/month for 1GB
    85MB = 1.70€
    

    View Slide

28. US roaming: 10€/MB
    

    View Slide

29. US roaming: 10€/MB
    85MB = 850€
    

    View Slide

30. View Slide

31. View Slide

32. 2. THE IMPORTANCE OF
    BEING MOBILE FIRST
    

    View Slide

33. Content First?
    

    View Slide

34. User First?
    

    View Slide

35. Everything First!
    

    View Slide

36. Reduced Browser Window In
    Developer's Computer First
    

    View Slide

37. Worry about the less capable first
    

    View Slide

38. View Slide

39. Design around real content
    

    View Slide

40. 1 column of content + basic styles
    

    View Slide

41. body{max-width: 30em;}
    

    View Slide

42. Consider layout an enhancement: 

    inside @media queries
    

    View Slide

43. @media screen and (min-width:1px){ 

    body{

    max-width: inherit;

    }

    }
    

    View Slide

44. 
    

    View Slide

45. github.com/scottjehl/Respond
    

    View Slide

46. Enhance with JavaScript
    

    View Slide

47. if(
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    )
    

    View Slide

48. Cutting the mustard
    

    View Slide

49. View Slide

50. Conditionally load:
    secondary assets
    third-party content
    transitions, effects
    AJAX stuff
    

    View Slide

51. Design agnostically
    

    View Slide

52. Design for every input
    

    View Slide

53. View Slide

54. Design for every context
    

    View Slide

55. Design for every connection
    

    View Slide

56. 3. OPTIMIZE
    ALL THE THINGS!
    

    View Slide

57. The average webpage is 1.617MB.
    Mostly images.
    httparchive.org
    

    View Slide

58. Can we afford another image?
    

    View Slide

59. Try to serve the right image size
    

    View Slide

60. adaptive-images.com
    

    View Slide

61. github.com/scottjehl/picturefill
    

    View Slide

62. Do retina devices need retina images?
    

    View Slide

63. netvlies.nl/blog/design-interactie/retina-revolution
    

    View Slide

64. Optimize images:
    ImageOptim
    JpegMini
    SVGO
    

    View Slide

65. Optimize everything:
    reduce requests
    combine & minify
    gzip
    

    View Slide

66. JS files belong on the footer
    

    View Slide

67. Do we need a JS framework?
    

    View Slide

68. Avoid or conditionally load:
    iframes
    social plugins
    third-party assets
    

    View Slide

69. Consider plain links for social stuff
    

    View Slide

70. https://twitter.com/intent/tweet?url=http://bit.ly/
    ancientMistery&text=What+is+your+sound?&via=htmlboy
    Twitter:
    http://www.facebook.com/sharer.php?u=http://bit.ly/
    ancientMistery&t=What+is+your+sound?
    Facebook:
    https://plus.google.com/share?url=http://bit.ly/
    ancientMistery
    Google+:
    

    View Slide

71. View Slide

72. There’s so much we can optimize
    

    View Slide

73. View Slide

74. 4. PERFORMANCE
    BUDGET
    

    View Slide

75. “We’ll do it later” is a lie
    

    View Slide

76. Performance as a design principle
    

    View Slide

77. “Make the page usable in less than
    10 seconds on a GPRS connection.”
    – BBC News –
    

    View Slide

78. First load: somewhere between
    65KB and 100KB
    

    View Slide

79. “Don't make more than 

    20 http requests”
    

    View Slide

80. “Make the page weigh 

    less than 300KB”
    

    View Slide

81. “1. Optimize an existing feature or asset.
    2. Remove an existing feature or asset.
    3. Don’t add the new feature or asset.”
    – Steve Souders –
    

    View Slide

82. 5. PERCEIVED
    PERFORMANCE
    

    View Slide

83. Avoid JS redrawings
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. Show content as soon as possible
    

    View Slide

88. View Slide

89. FOUT: Flash Of Unstyled Text
    

    View Slide

90. github.com/typekit/webfontloader
    

    View Slide

91. 300ms delay on touch devices
    

    View Slide

92. github.com/ftlabs/fastclick
    

    View Slide

93. WRAPPING UP
    

    View Slide

94. Web design is not about

    pretty pictures
    

    View Slide

95. View Slide

96. View Slide

97. wow such design
    very icons
    so flats
    nice font
    wow dribbble
    such parallax
    

    View Slide

98. Set a performance budget

    in the design workflow
    

    View Slide

99. “What a fast website, that on top
    of that, is beautiful.”
    

    View Slide

100. LET PEOPLE
     COMMUNICATE
     

     View Slide

101. THANKS!
     @htmlboy · [email protected]
     

     View Slide