Responsive Web Design 2.0
description
Transcript of Responsive Web Design 2.0
![Page 1: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/1.jpg)
Responsive DesignPentia morgenmøde
@PentiaDK #Pentiaevent
![Page 2: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/2.jpg)
Sådan er vi
![Page 3: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/3.jpg)
Sådan gør vi
![Page 4: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/4.jpg)
Peter KræmmerPeter Dyrman Kristian Thrane
![Page 5: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/5.jpg)
Hvad har vi lært efter 3 år med Responsive Design?
![Page 6: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/6.jpg)
Øget procentdel mobile brugere
![Page 7: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/7.jpg)
3,8 mio smartphones i Danmark
Kilde: http://bit.ly/173j43r
![Page 8: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/8.jpg)
Vi bruger mobilen til mere» Telefonen er den mest populære e-mail-klient» 40% af alle tweets kommer fra mobilen» 31% af alle danskere har købt noget via en smartphone
Kilder: http://bit.ly/l1UxGH, http://bit.ly/9C1X33 og http://bit.ly/15Q7ARh
![Page 9: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/9.jpg)
Eksempel:
PayPal mobile transaktioner
»$141 mio (2009)»$750 mio (2010)»$4 mia (2011)»$10 mia (2012)
Kilde: http://bit.ly/zZgrKu
![Page 10: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/10.jpg)
• 76 % oplever vækst i tilgangen af mobile brugere
• Kun 3 % oplever svag vækst
• 51 % planlægger mobiltilpasning inden for max. 12 md.
![Page 11: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/11.jpg)
Øget krav fra Google om mobil
visningKilde: http://googlewebmastercentral.blogspot.dk/2013/06/changes-in-rankings-of-smartphone_11.html
![Page 12: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/12.jpg)
![Page 13: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/13.jpg)
Samme site på flere platforme
» Fluid grid» Fluid media»Media queries
![Page 14: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/14.jpg)
DEVICEAGNOSTISK
![Page 15: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/15.jpg)
Frederiksberg.dk» +17% mobile besøgende» Afvisningsprocent faldet fra 70% til 41%
![Page 16: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/16.jpg)
Forbrug.dk» Afvisningsprocent faldet med 22%» Besøgsvarigheden steget med 32%
![Page 17: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/17.jpg)
I gang med RWD» Retrofitting»Mobile first» RWD eller AWD?
![Page 18: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/19.jpg)
RWD– hvor er vi nu?» Pentia laver (næsten) kun projekter,
der også omfatter RWD» Retrofitting er populært»Øget interesse for Mobile First
![Page 20: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/20.jpg)
Tre ting RWD har lært os om
UX
![Page 21: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/21.jpg)
1. Tegn før du koder
![Page 22: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/23.jpg)
![Page 24: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/25.jpg)
Tegn ikke alle detaljer
![Page 26: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/26.jpg)
Brug rigtige data
![Page 27: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/27.jpg)
2. Navigation er halvdelen af
opgaven
![Page 28: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/28.jpg)
“…make sure that (1) the user can figure out what to do, and (2) the user can tell what is
going on.”
Donald Norman (Psychology of Everyday Things)
![Page 29: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/29.jpg)
![Page 30: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/30.jpg)
![Page 31: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/31.jpg)
![Page 32: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/32.jpg)
![Page 33: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/33.jpg)
![Page 34: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/34.jpg)
![Page 35: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/35.jpg)
![Page 36: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/36.jpg)
![Page 37: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/37.jpg)
![Page 38: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/38.jpg)
![Page 39: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/39.jpg)
![Page 40: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/40.jpg)
![Page 41: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/41.jpg)
![Page 42: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/42.jpg)
![Page 43: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/44.jpg)
3. RWD er også et organisatorisk
projekt
![Page 45: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/45.jpg)
![Page 46: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/46.jpg)
Giv mandat
![Page 47: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/47.jpg)
RWD afslører rod»Prioritering er alt»Kompleksitet bliver sat på prøve
![Page 48: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/48.jpg)
Når indhold spiller en større rolle
... skal dine indholdsleverandører og redaktører kunne følge med
![Page 49: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/49.jpg)
Pause
@PentiaDK#Pentiaevent
![Page 50: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/50.jpg)
3 erfaringer
![Page 51: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/51.jpg)
![Page 52: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/52.jpg)
Fleksibilitet
![Page 53: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/53.jpg)
![Page 54: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/54.jpg)
![Page 55: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/55.jpg)
![Page 56: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/56.jpg)
![Page 57: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/57.jpg)
![Page 58: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/58.jpg)
![Page 59: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/59.jpg)
![Page 60: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/60.jpg)
Skab overblik
![Page 61: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/61.jpg)
Gestalt regler
Nærhed Lighed Helhed
![Page 62: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/62.jpg)
![Page 63: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/63.jpg)
![Page 64: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/64.jpg)
Prioritering
![Page 65: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/65.jpg)
Minimum viable product
![Page 66: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/66.jpg)
![Page 67: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/67.jpg)
![Page 68: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/68.jpg)
![Page 69: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/69.jpg)
Målsætning
![Page 70: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/70.jpg)
Usability design
![Page 71: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/71.jpg)
![Page 72: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/72.jpg)
Anvendelighed
![Page 73: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/73.jpg)
![Page 74: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/74.jpg)
![Page 75: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/75.jpg)
![Page 76: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/76.jpg)
![Page 77: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/77.jpg)
Skærmstørrelser vs indhold
![Page 78: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/78.jpg)
Pause
![Page 79: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/79.jpg)
Vis halve elementer
![Page 80: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/80.jpg)
![Page 81: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/81.jpg)
Brand& Identitet
![Page 82: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/82.jpg)
![Page 83: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/83.jpg)
Det lykkelige ægteskab
![Page 84: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/84.jpg)
![Page 85: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/85.jpg)
![Page 86: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/86.jpg)
![Page 87: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/87.jpg)
Tre ting RWD har lært os om frontend
![Page 88: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/88.jpg)
1. INDHOLD ER IKKE BARE INDHOLD
![Page 89: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/89.jpg)
![Page 90: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/90.jpg)
Tabeller
![Page 91: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/91.jpg)
RWD morgenmøder i Pentia
År Deltagere
2011 5
2012 25
2013 50
![Page 92: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/92.jpg)
Tabel med flere kolonner
År Deltagere Lokaler Slides Spørgsmål
2011 5 Frontend fredagsbar 0 1000
2012 25 Pentias mødelokaler 50 8
2013 50 Odd Fellow Palæet 131 10 (est)
![Page 93: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/93.jpg)
Tabel med endnu flere kolonner
År Deltagere Lokaler Slides SpørgsmålAntal RWD implementeringer
Mobil præsentation Pinlige pauser
2011 5Frontend fredagsbar 0 1000 2 Nej 0
2012 25Pentias mødelokaler 50 5 8 Nej 2
2013 50 Odd Fellow Palæet 131 10 (est) 15 (est) Ja 1 (est)
![Page 94: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/94.jpg)
Tabel med scroll
År Deltagere Lokaler Slides Spørgsmål Pinlige pauserMobil præsentation Pinlige pauser
2011 5Frontend fredagsbar 0 1000 15 Nej 0
2012 25Pentias mødelokaler 50 5 2 Nej 2
2013 50 Odd Fellow Palæet 131 10 (est) 4 (est) Ja 1 (est)
![Page 95: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/95.jpg)
GentagelseÅr 2011
Deltagere 5
Lokaler Frontend fredagsbar
Slides 0
Spørgsmål 1000
Antal RWD implementeringer 2
Mobil præsentation Nej
Pinlige pauser 0
År 2012
Deltagere 25
Lokaler Pentias mødelokaler
Slides 50
Spørgsmål 5
Antal RWD implementeringer 8
Mobil præsentation Nej
Pinlige pauser 2
![Page 96: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/96.jpg)
Diagram
6%
31%
63%
RWD morgenmøde - deltagere
201120122013
![Page 97: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/97.jpg)
Vælger 1/3
![Page 98: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/98.jpg)
Vælger 2/3
![Page 99: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/99.jpg)
Vælger 3/3
![Page 100: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/100.jpg)
Tekst i billeder
![Page 101: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/101.jpg)
Eksempel - før
![Page 102: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/102.jpg)
Eksempel - efter
![Page 103: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/103.jpg)
Eksempel - før
![Page 104: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/104.jpg)
Eksempel - efter
![Page 105: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/105.jpg)
Eksempel - før
![Page 106: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/106.jpg)
Eksempel - efter
![Page 107: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/107.jpg)
Adskil tekst og billeder
![Page 108: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/108.jpg)
Video
![Page 109: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/109.jpg)
Eksempel - før
![Page 110: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/110.jpg)
Eksempel - efter
![Page 111: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/111.jpg)
Løsninger
» Brug moderne implementeringer» Brug etablerede services» YouTube» Vimeo» 23
![Page 112: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/112.jpg)
Iframes
![Page 113: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/113.jpg)
Eksempel - før
![Page 114: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/114.jpg)
Eksempel - efter
![Page 115: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/115.jpg)
Løsninger
» Gør partnerindhold responsivt» Lav en egentlig integration af data» Vis i eget vindue
![Page 116: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/116.jpg)
Overlay
… modal, popup og vindue-oven-på-indhold
![Page 117: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/117.jpg)
Eksempel - før
![Page 118: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/118.jpg)
Eksempel - efter
![Page 119: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/119.jpg)
Nemid
#*!
![Page 120: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/120.jpg)
Eksempel - før
![Page 121: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/121.jpg)
Eksempel - efter
![Page 122: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/122.jpg)
Løsning - abstraktion
![Page 123: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/123.jpg)
Løsning - selvhjælp
![Page 124: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/124.jpg)
Lyset for enden …
![Page 125: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/125.jpg)
2. HASTIGHED ER FORRETNINGSKRITISK
![Page 126: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/126.jpg)
2006
"Four seconds is the maximum length of time an average online shopper will
wait for a Web page to load before potentially abandoning a retail site“
Akamai.com: http://bit.ly/1ztCh
![Page 127: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/127.jpg)
2007
"For every 100ms increase in load time of Amazon.com sales decreased by
1%“Kohavi and Longbotham: http://bit.ly/w3TGR
![Page 128: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/128.jpg)
2009
"Akamai Reveals 2 Seconds as the New Threshold of Acceptability for
eCommerce Web Page Response Times"
Akamai.com: http://bit.ly/Fukp9
![Page 129: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/129.jpg)
2010
"We've decided to take site speed into account in our search rankings"
Google.com: http://bit.ly/19eNlN4 and Carbon60.com: http://bit.ly/15v8dSS
![Page 130: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/130.jpg)
2011
"Most common problem accessing websites on your mobile phone?“
Bruce Lawson: http://bit.ly/A3PhF7
![Page 131: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/131.jpg)
2011
• "Slow to load": 38%• "Crashed/received an error": 18%• "Formatting made it difficult to read and use": 15%
• Bruce Lawson: http://bit.ly/A3PhF7
![Page 132: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/132.jpg)
Overordnet
» Download – størrelsen af elementerne» Latency – reaktionstid per element
![Page 133: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/133.jpg)
Download
Gennemsnitshastighed i Danmark
Akamai.com http://bit.ly/1d9dO4c, * gns. af omkringliggende lande
Bredbånd Mobil
8.2 Mbps 2-4 Mbps*
![Page 134: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/134.jpg)
Konsekvens
Website Vægt MB Tid sekunder
eb.dk 3.2 13.9
information.dk 2.1 6.1
weekendenavisen.dk 0.3 6.3
![Page 135: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/135.jpg)
Latency
Gennemsnit
Ilya Grigorik: http://bit.ly/MM010B
Bredbånd Mobil
10-100 ms 100-1000 ms
![Page 136: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/136.jpg)
Konsekvens
Website Forspørgelser
eb.dk 325
information.dk 186
weekendavisen.dk 47
![Page 137: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/137.jpg)
Opfattet hastighed
"hvor hurtigt kan brugeren læse eller gøre noget?"
![Page 138: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/138.jpg)
eb.dk
Efter 2,5 sekunder ...
![Page 139: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/139.jpg)
information.dk
Efter 2,5 sekunder ...
![Page 140: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/140.jpg)
weekendavisen.dk
Efter 2,5 sekunder ...
![Page 141: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/141.jpg)
Hvor bør vi optimere først?
![Page 143: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/143.jpg)
Billeder (60-80%)
» Prerender» Mobile first» Differentieret indlæsning
![Page 144: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/144.jpg)
Scripts og styles (10-20%) Differentieret indlæsning Komprimering Caching
![Page 145: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/145.jpg)
Værktøjer Google PageSpeed Insigths Akamai Mobitest Webpagetest.org Bustoppested i regnvejr
![Page 146: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/146.jpg)
3. TEST TAGER TID
![Page 147: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/147.jpg)
Værdibaseret testplan
![Page 148: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/148.jpg)
Brug statistik
![Page 149: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/149.jpg)
Løsninger
» Åbne ny fane» Gøre partnerindhold responsivt» Integrere indhold via webservice
![Page 150: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/150.jpg)
![Page 151: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/151.jpg)
Lav en soft launch internt og udnyt de mange gadgetfyldte lommer
![Page 152: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/152.jpg)
![Page 153: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/153.jpg)
![Page 154: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/154.jpg)
Den 10. erfaring
![Page 155: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/155.jpg)
Tværfagligt arbejde er afgørende
![Page 156: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/156.jpg)
Gode råd, før I starter med RWD
»Organisation» Navigation» Design» Indhold» Hastighed
![Page 157: Responsive Web Design 2.0](https://reader038.fdocuments.net/reader038/viewer/2022110115/548de25eb47959041b8b4637/html5/thumbnails/157.jpg)
Tak!Se mere her:
www.pentia.dkwww.pentia360.dk
@pentiaDK