Responsive Design & Best Practises - VTD12

Responsive Design& Best Practises

Henrik Ekelöf@henrikekelof

http://www.riksbank.se/

http://www.riksbank.se

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

Bild: Brad Frost Lånad från: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

DET HÄR ÄR INTE WEBBEN

http://www.alistapart.com/articles/responsive-web-design/



Det här är webben.




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 { ... }

}


/* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... }

}


/* 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

<link rel="stylesheet" href="style.css"><script src="head.js"></script>

<head>


- CSS utan media queries- Modernizr, html5shiv, egna

<link rel="stylesheet" href="style.css"><script src="head.js"></script>

<head><body>

...

<script src="main.js"></script></body></html>


- CSS utan media queries- Modernizr, html5shiv, egna

jQuery, egna



‣ DataURIs & Sprites

li { background: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") no-repeat left center;}




‣ 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>






‣ 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>

...







‣ Färre DNS-uppslag

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="js/plugins.js"></script><script src="js/main.js"></script>







‣ 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>

Responsive Design & Best Practises - VTD12

Technology

Transcript of Responsive Design & Best Practises - VTD12