Mobile First: as difficult as doing things right

Transcript

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

   #bdc13

2. @HTMLBOY Swwweet.com

3. None
4. None
5. None

6. Opera Mini

7. 200 MILLION USERS WORLDWIDE

8. HATES MY WEBSITES

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

10. None

11. 1. AN OVERWEIGHT PROBLEM

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

    Grigsby –

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

14. milwaukeepolicenews.com

15. milwaukeepolicenews.com 7MB

16. redrobin.com

17. redrobin.com 10.9MB

18. grolsch.com

19. grolsch.com 25MB

20. moto.oakley.com

21. moto.oakley.com 85MB

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

23. None
24. None

25. 74% of mobile users won’t wait longer than 5 seconds

    for a page to load bit.ly/5secondsmobile

26. 20€/month for 1GB

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

28. US roaming: 10€/MB

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

30. None
31. None

32. 2. THE IMPORTANCE OF BEING MOBILE FIRST

33. Content First?

34. User First?

35. Everything First!

36. Reduced Browser Window In Developer's Computer First

37. Worry about the less capable first

38. None

39. Design around real content

40. 1 column of content + basic styles

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

42. Consider layout an enhancement: 
 inside @media queries

43. @media screen and (min-width:1px){ 
 body{
 max-width: inherit;
 }
 }

44. <!--[if lt IE 9]> <link href=“ie8.css" rel="stylesheet" /> <![endif]-->

45. github.com/scottjehl/Respond

46. Enhance with JavaScript

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

    in window )

48. Cutting the mustard

49. None

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

51. Design agnostically

52. Design for every input

53. None

54. Design for every context

55. Design for every connection

56. 3. OPTIMIZE ALL THE THINGS!

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

58. Can we afford another image?

59. Try to serve the right image size

60. adaptive-images.com

61. github.com/scottjehl/picturefill

62. Do retina devices need retina images?

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

64. Optimize images: ImageOptim JpegMini SVGO

65. Optimize everything: reduce requests combine & minify gzip

66. JS files belong on the footer

67. Do we need a JS framework?

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

69. Consider plain links for social stuff

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+:

71. None

72. There’s so much we can optimize

73. None

74. 4. PERFORMANCE BUDGET

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

76. Performance as a design principle

77. “Make the page usable in less than 10 seconds on

    a GPRS connection.” – BBC News –

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

79. “Don't make more than 
 20 http requests”

80. “Make the page weigh 
 less than 300KB”

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 –

82. 5. PERCEIVED PERFORMANCE

83. Avoid JS redrawings

84. None
85. None
86. None

87. Show content as soon as possible

88. None

89. FOUT: Flash Of Unstyled Text

90. github.com/typekit/webfontloader

91. 300ms delay on touch devices

92. github.com/ftlabs/fastclick

93. WRAPPING UP

94. Web design is not about
 pretty pictures

95. None
96. None

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

    dribbble such parallax

98. Set a performance budget
 in the design workflow

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

    beautiful.”

100. LET PEOPLE COMMUNICATE

101. THANKS! @htmlboy · javier@swwweet.com