Mobile First: as difficult as doing things right

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
November 08, 2013

Mobile First: as difficult as doing things right

Presentation by @htmlboy at Barcelona Developers Conference 2013.

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

November 08, 2013
Tweet

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