$30 off During Our Annual Pro Sale. View Details »

Mobile First: as difficult as doing things right

Swwweet
November 08, 2013

Mobile First: as difficult as doing things right

Presentation by @htmlboy at Barcelona Developers Conference 2013.

Swwweet

November 08, 2013
Tweet

More Decks by Swwweet

Other Decks in Technology

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