Mobile First: as difficult as doing things right

Presentation by @htmlboy at Barcelona Developers Conference 2013.

Transcript

1. MOBILE FIRST As difficult as doing things right Javier Usobiaga #bdc13
2. @HTMLBOY Swwweet.com
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
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.
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€
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
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
50. Conditionally load: secondary assets third-party content transitions, effects AJAX stuff
51. Design agnostically
52. Design for every input
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+:
72. There’s so much we can optimize
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
87. Show content as soon as possible
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
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