Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design & Best Practises - VTD12

946

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive Design & Best Practises
  • 2. Henrik Ekelöf @henrikekelof
  • 3. http://www.riksbank.se/
  • 4. $(this).show(fast);
  • 5. $.get(/json/,callback);
  • 6. Bild: Måns Sandström
  • 7. /*! HTML5 Shiv */document.createElement(article);
  • 8. <!DOCTYPE html>
  • 9. Flexibla grids Flexibel media Media queries
  • 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. Det här är webben.Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  • 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. Responsive Design & Best Practises
  • 14. “Responsive”
  • 15. “Genom att utveckla sajten i responsive designhar vi säkerställt användarupplevelsen förbesök via dator och smart phone [sic].”
  • 16. Flexibla grids Flexibel media Media queries
  • 17. Börjar rendera: 17 sekunderSidan laddad: 30 sekunder
  • 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. 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. 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. 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. Vad kan vi göra för att fåsidorna att ladda snabbare?
  • 23. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer
  • 24. <!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"> - CSS med media queries <script src="head.js"></script> - Modernizr, egna ...<head>
  • 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. 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. <!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. <!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. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites
  • 30. li { background: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") no-repeat left center;}
  • 31. Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites‣ gzip:a HTML, CSS & JS
  • 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. <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. <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. <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. 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. <!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. <!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. 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. <!-- 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. 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. 861 bytes513 bytes
  • 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. </tack>

×