Responsive Design  & Best Practises
Henrik Ekelöf @henrikekelof
http://www.riksbank.se/
$(this).show(fast);
$.get(/json/,callback);
Bild: Måns Sandström
/*! HTML5 Shiv */document.createElement(article);
<!DOCTYPE html>
Flexibla grids Flexibel media   Media queries
DET HÄR ÄR                                   INTE WEBBENBild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/resp...
Det här är webben.Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Det här kommer att vara webben.Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing...
Responsive Design  & Best Practises
“Responsive”
“Genom att utveckla sajten i responsive designhar vi säkerställt användarupplevelsen förbesök via dator och smart phone [s...
Flexibla grids Flexibel media   Media queries
Börjar rendera:      17 sekunderSidan laddad:      30 sekunder
Antal   StorlekCSS                        27      163 kBJavaScript                 21      369 kBBilder                   ...
Nov 2010   Maj 2012   ÖkningCSS            25 kB      36 kB     44%JavaScript    113 kB     190 kB     68%Bilder        41...
Andel användare som avbryter efter att ha väntat5 sekunder på att en sida skall laddas i mobilen80%                       ...
Andel användare som inte återvänder till ensajt som är långsam i mobilen50%                                    46%        ...
Vad kan vi göra för att fåsidorna att ladda snabbare?
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer
<!DOCTYPE html><html><head>  <link rel="stylesheet" href="style.css">   - CSS med media queries  <script src="head.js"></s...
1    /* Style för små skärmar och grundstyle för alla */    .example { ... }2   @media all and (min-width: 321px) {3      ...
1    /* Style för små skärmar och grundstyle för alla */    .example { ... }3       /* Style för lite bredare (t.ex. iPhon...
<!DOCTYPE html><html><head>  <!--[if (gte IE 9)|!(IE)]><!-->  <link rel="stylesheet" href="style.css">      - CSS med medi...
<!DOCTYPE html><html><head>  <!--[if (gte IE 9)|!(IE)]><!-->  <link rel="stylesheet" href="style.css">      - CSS med medi...
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites
li {  background:     url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3...
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & b...
<ul class="slider">   <li>          <img src="bild-1.jpg" alt="">          <a href="/sida-1/">Reporäntan ...</a>    </li><...
<ul class="slider">   <li>          <img src="bild-1.jpg" alt="">          <a href="/sida-1/">Reporäntan ...</a>    </li><...
<ul class="slider">   <li>          <img src="bild-1.jpg" alt="">          <a href="/sida-1/">Reporäntan ...</a>    </li><...
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & b...
<!DOCTYPE html><html><head>  ... <script src="jquery.js"></script> <script src="popup.js"></script> <script src="jquery.sl...
<!DOCTYPE html><html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase index...
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & b...
<!-- Google CDNs jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- scripts ...
Snabbare.‣ Färre requests    ‣ Slå ihop CSS- och JS-filer    ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & b...
861 bytes513 bytes
TL;DL               / too long; didnt listen /‣ RWD är en naturlig utveckling av hur vi bygger  webb. Vi kommer inte att f...
</tack>
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Responsive Design & Best Practises - VTD12
Upcoming SlideShare
Loading in...5
×

Responsive Design & Best Practises - VTD12

968

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
968
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Design & Best Practises - VTD12

  1. 1. Responsive Design & Best Practises
  2. 2. Henrik Ekelöf @henrikekelof
  3. 3. http://www.riksbank.se/
  4. 4. $(this).show(fast);
  5. 5. $.get(/json/,callback);
  6. 6. Bild: Måns Sandström
  7. 7. /*! HTML5 Shiv */document.createElement(article);
  8. 8. <!DOCTYPE html>
  9. 9. Flexibla grids Flexibel media Media queries
  10. 10. DET HÄR ÄR INTE WEBBENBild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  11. 11. Det här är webben.Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  12. 12. Det här kommer att vara webben.Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  13. 13. Responsive Design & Best Practises
  14. 14. “Responsive”
  15. 15. “Genom att utveckla sajten i responsive designhar vi säkerställt användarupplevelsen förbesök via dator och smart phone [sic].”
  16. 16. Flexibla grids Flexibel media Media queries
  17. 17. Börjar rendera: 17 sekunderSidan laddad: 30 sekunder
  18. 18. Antal StorlekCSS 27 163 kBJavaScript 21 369 kBBilder 73 6 983 kBÖvrigt 35 49 kB(bl.a. bakgrundsbilder)Totalt 156 7 564 kB
  19. 19. Nov 2010 Maj 2012 ÖkningCSS 25 kB 36 kB 44%JavaScript 113 kB 190 kB 68%Bilder 416 kB 664 kB 59%Övrigt 148 kB 152 kB 2%Totalt 702 kB 1042 kB 48%
  20. 20. Andel användare som avbryter efter att ha väntat5 sekunder på att en sida skall laddas i mobilen80% 74%60%40% 20%20%0% 2009 2011 Källa: gomez.com
  21. 21. Andel användare som inte återvänder till ensajt som är långsam i mobilen50% 46% 40%25%0% 2009 2011 Källa: gomez.com
  22. 22. Vad kan vi göra för att fåsidorna att ladda snabbare?
  23. 23. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer
  24. 24. <!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"> - CSS med media queries <script src="head.js"></script> - Modernizr, egna ...<head>
  25. 25. 1 /* Style för små skärmar och grundstyle för alla */ .example { ... }2 @media all and (min-width: 321px) {3 /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } }4 @media all and (min-width: 481px) { /* Style för ytterligare lite bredare skärmar5 (t.ex. iPad portrait) */ .example { ... } }6 @media all and (min-width: 769px) {7 /* Style för breda skärmar */ .example { ... }8 }
  26. 26. 1 /* Style för små skärmar och grundstyle för alla */ .example { ... }3 /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } /* Style för ytterligare lite bredare skärmar5 (t.ex. iPad portrait) */ .example { ... }7 /* Style för breda skärmar */ .example { ... }
  27. 27. <!DOCTYPE html><html><head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="style.css"> - CSS med media queries <script src="head.js"></script> - Modernizr, egna <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="style-ie.css"> - CSS utan media queries <script src="head-ie.js"></script> - Modernizr, html5shiv, egna <![endif]--><head>
  28. 28. <!DOCTYPE html><html><head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="style.css"> - CSS med media queries <script src="head.js"></script> - Modernizr, egna <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="style-ie.css"> - CSS utan media queries <script src="head-ie.js"></script> - Modernizr, html5shiv, egna <![endif]--><head><body> ... <script src="main.js"></script> jQuery, egna</body></html>
  29. 29. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites
  30. 30. li { background: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") no-repeat left center;}
  31. 31. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS
  32. 32. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & bilder vid behov
  33. 33. <ul class="slider"> <li> <img src="bild-1.jpg" alt=""> <a href="/sida-1/">Reporäntan ...</a> </li></ul><ul class="slider-more"> <li> <a href="/sida-2/" data-img="bild-2.jpg">Nya sedlar ...</a> </li> <li> <a href="/sida-3/" data-img="bild-3.jpg">Penningpolitisk ...</a> </li></ul><script> RB.modules.add(rb_flexslider); </script>
  34. 34. <ul class="slider"> <li> <img src="bild-1.jpg" alt=""> <a href="/sida-1/">Reporäntan ...</a> </li></ul><ul class="slider-more"> <li> <a href="/sida-2/" data-img="bild-2.jpg">Nya sedlar ...</a> </li> <li> <a href="/sida-3/" data-img="bild-3.jpg">Penningpolitisk ...</a> </li></ul><script> RB.modules.add(rb_flexslider); </script>
  35. 35. <ul class="slider"> <li> <img src="bild-1.jpg" alt=""> <a href="/sida-1/">Reporäntan ...</a> </li></ul><ul class="slider-more"> <li> <a href="/sida-2/" data-img="bild-2.jpg">Nya sedlar ...</a> </li> <li> <a href="/sida-3/" data-img="bild-3.jpg">Penningpolitisk ...</a> </li></ul><script> RB.modules.add(rb_flexslider); </script>
  36. 36. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & bilder vid behov‣ Snåla med scriptbibliotek
  37. 37. <!DOCTYPE html><html><head> ... <script src="jquery.js"></script> <script src="popup.js"></script> <script src="jquery.slideshow.js"></script> <script src="slides.jquery.js"></script> <script src="jquery.coda-slider.js"></script> <script src="touchslider.js"></script> <script src="respond.src.js"></script> <script src="jquery.colorbox.js"></script> <script src="script.js"></script>
  38. 38. <!DOCTYPE html><html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddbhashchange history draganddrop websockets rgba hslamultiplebgs backgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimations csscolumnscssgradients no-cssreflections csstransformscsstransforms3d csstransitions fontface generatedcontentvideo audio localstorage sessionstorage webworkersapplicationcache svg inlinesvg smil svgclippaths"lang="en"><head>...
  39. 39. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & bilder vid behov‣ Snåla med scriptbibliotek‣ Färre DNS-uppslag
  40. 40. <!-- Google CDNs jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- scripts concatenated and minified via build script --><script src="js/plugins.js"></script><script src="js/main.js"></script>
  41. 41. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS‣ Hämta script & bilder vid behov‣ Snåla med scriptbibliotek‣ Färre DNS-uppslag‣ Optimera bilder ‣ PNGOUT, ImageOptim, Smush.it
  42. 42. 861 bytes513 bytes
  43. 43. TL;DL / too long; didnt listen /‣ RWD är en naturlig utveckling av hur vi bygger webb. Vi kommer inte att fortsätta prata om RWD — det kommer bara att vara en del av det vi gör‣ Våra sidor måste ladda snabbare för att hantera allt fler besökare med långsam uppkoppling
  44. 44. </tack>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×