• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Design & Best Practises - VTD12
 

Responsive Design & Best Practises - VTD12

on

  • 1,100 views

 

Statistics

Views

Total Views
1,100
Views on SlideShare
1,071
Embed Views
29

Actions

Likes
1
Downloads
4
Comments
0

2 Embeds 29

http://us-w1.rockmelt.com 28
http://faavorite.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Design & Best Practises - VTD12 Responsive Design & Best Practises - VTD12 Presentation Transcript

    • 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/responsive-web-design-missing-the-point/
    • 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-the-point/
    • 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 [sic].”
    • Flexibla grids Flexibel media Media queries
    • Börjar rendera: 17 sekunderSidan laddad: 30 sekunder
    • Antal StorlekCSS 27 163 kBJavaScript 21 369 kBBilder 73 6 983 kBÖvrigt 35 49 kB(bl.a. bakgrundsbilder)Totalt 156 7 564 kB
    • 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%
    • 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
    • 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
    • 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"></script> - Modernizr, egna ...<head>
    • 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 }
    • 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 { ... }
    • <!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>
    • <!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>
    • Snabbare.‣ Färre requests ‣ Slå ihop CSS- och JS-filer ‣ DataURIs & Sprites
    • li { background: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") no-repeat left center;}
    • 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 & bilder vid behov
    • <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>
    • <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>
    • <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>
    • 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
    • <!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>
    • <!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>...
    • 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
    • <!-- 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>
    • 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
    • 861 bytes513 bytes
    • 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
    • </tack>