Post on 01-Jul-2015
Responsive Design& Best Practises
Henrik Ekelöf@henrikekelof
$(this).show('fast');
$.get('/json/',callback);
Bild: Måns Sandström
/*! HTML5 Shiv */
document.createElement('article');
<!DOCTYPE html>
Flexibla grids Flexibel media Media queries
Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
DET HÄR ÄR INTE WEBBEN
Bild: 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.
Responsive Design& Best Practises
“Responsive”
“Genom att utveckla sajten i responsive design har vi säkerställt användarupplevelsen för besök via dator och smart phone [sic].”
Flexibla grids Flexibel media Media queries
Börjar rendera:
Sidan laddad:
17 sekunder
30 sekunder
Antal Storlek
CSS 27 163 kB
JavaScript 21 369 kB
Bilder 73 6 983 kB
Övrigt (bl.a. bakgrundsbilder)
35 49 kB
Totalt 156 7 564 kB
Nov 2010 Maj 2012 Ökning
CSS 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 mobilen
0%
20%
40%
60%
80%
2009 2011
74%
20%
Källa: gomez.com
Andel användare som inte återvänder till en sajt som är långsam i mobilen
0%
25%
50%
2009 2011
46%40%
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"><script src="head.js"></script>
...
<head>
- CSS med media queries- Modernizr, egna
1
3
5
7
2
4
6
8
/* Style för små skärmar och grundstyle för alla */.example { ... }
@media all and (min-width: 321px) {
/* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... }
}
@media all and (min-width: 481px) {
/* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... }
}
@media all and (min-width: 769px) {
/* Style för breda skärmar */ .example { ... }
}
/* Style för små skärmar och grundstyle för alla */.example { ... }
/* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... }
/* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... }
/* Style för breda skärmar */ .example { ... }
1
3
5
7
<!DOCTYPE html><html><head>
<!--[if (gte IE 9)|!(IE)]><!--><link rel="stylesheet" href="style.css"><script src="head.js"></script><!--<![endif]--><!--[if (lte IE 8)]><link rel="stylesheet" href="style-ie.css"><script src="head-ie.js"></script><![endif]-->
<head>
- CSS med media queries- Modernizr, egna
- CSS utan media queries- Modernizr, html5shiv, egna
<!DOCTYPE html><html><head>
<!--[if (gte IE 9)|!(IE)]><!--><link rel="stylesheet" href="style.css"><script src="head.js"></script><!--<![endif]--><!--[if (lte IE 8)]><link rel="stylesheet" href="style-ie.css"><script src="head-ie.js"></script><![endif]-->
<head><body>
...
<script src="main.js"></script></body></html>
- CSS med media queries- Modernizr, egna
- CSS utan media queries- Modernizr, html5shiv, egna
jQuery, egna
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 indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache 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 CDN's 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 bytes
513 bytes
TL;DL/ too long; didn't 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>