Morgenbooster / Responsive Design 2.0 - Mobile Revolution / 21. august
Responsive Web Design 2.0
description
Transcript of Responsive Web Design 2.0
![Page 1: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/1.jpg)
Responsive Web Design 2.0Morgenmøde i Pentia 20. maj 2014
![Page 2: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/2.jpg)
64 % oplever klar stigende vækst af mobile brugere
64%20%
16%
Hvor stor er væksten af mobilebrugere som tilgår jeres website?
Stødt eller stærkvækst
Svag eller moderatvækst
Har ikke tal påvækst
Svarprocent: 78,8 %
![Page 3: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/3.jpg)
11% kender forskellen på native apps, mobile sites og RWD ift. at have et validt beslutningsgrundlag
![Page 4: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/4.jpg)
54% skal i gang med mobiloptimering indenfor 12 måneder
![Page 5: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/5.jpg)
Kort om Pentia
![Page 6: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/6.jpg)
What we do
DIGITAL STRATEGI
PROJEKTLEDELSE
UDVIKLING &INTEGRATION
UX & DESIGN
SERVICE & SUPPORT
FORRETNINGS-ANALYSE
![Page 7: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/10.jpg)
Talere i dag
![Page 11: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/11.jpg)
Dagens program
Responsive Design – hvor er vi?
3 erfaringer fra UX
3 erfaringer fra Design
Pause
3 erfaringer fra Frontend
Afrunding
09:05-09:15
09:15-09:45
09:45-10:20
10:20-10:30
10:30-10:55
10:55-11:00
![Page 12: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/12.jpg)
Hvad har vi lært efter 3 år med RWD?
![Page 13: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/13.jpg)
Ud af top 250 er der 34 af websites, hvor under halvdelen af besøgene vises på desktop
FDIMs statistik fra januar 2014
![Page 14: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/14.jpg)
Rankings.dk, PC vs. Non-pc
![Page 15: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/15.jpg)
RWD
AWD
Media Queries
Fluid GridFluid Media
Progressive enhancement
![Page 16: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/17.jpg)
![Page 18: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/19.jpg)
MOMENT OFtruthZERO
cross device
local
affiliate marketing
t-commerce
youtility mix brand and non-brand
bids over budgetperformance
customers over clicks
social signals
![Page 20: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/20.jpg)
Mobiloptimeret er blevet standard!
… og alligevel byder vi brugerne dette …
![Page 21: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/21.jpg)
![Page 22: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/23.jpg)
![Page 24: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/25.jpg)
DEVICEAGNOSTISK
![Page 26: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/26.jpg)
Frederiksberg.dk
+17% mobile besøgende
Afvisningsprocent fra 70% til 41%
![Page 27: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/27.jpg)
Forbrug.dkAfvisningsprocent faldet
med 22%
Besøgsvarigheden steget med 32%
![Page 28: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/28.jpg)
3 gode råd om UX-processenResponsive Design
![Page 29: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/29.jpg)
Råd #1: Tag udgangspunkt i din
SERVICE
![Page 30: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/30.jpg)
![Page 31: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/31.jpg)
![Page 32: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/32.jpg)
![Page 33: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/33.jpg)
Know thy digital service
![Page 34: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/34.jpg)
![Page 35: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/35.jpg)
![Page 36: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/36.jpg)
![Page 37: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/37.jpg)
![Page 38: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/38.jpg)
Få dine varer tilsendt uden omkostning i hele januar
Gratis forsendelse hele januar
![Page 39: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/39.jpg)
Råd #2: Begynd med det SVÆRESTE
![Page 40: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/40.jpg)
Pris f
or at
rette
fejl
Tid
![Page 41: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/41.jpg)
Tegn før du koder
![Page 42: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/42.jpg)
![Page 43: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/43.jpg)
Tegn ikke alle detaljer
![Page 44: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/44.jpg)
![Page 45: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/45.jpg)
![Page 46: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/46.jpg)
Navigation er svært
![Page 47: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/47.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 48: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/48.jpg)
![Page 49: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/49.jpg)
![Page 50: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/50.jpg)
![Page 51: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/51.jpg)
![Page 52: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/52.jpg)
Mobile first
![Page 53: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/53.jpg)
![Page 54: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/54.jpg)
Mobile first
UX? Design?Frontend?
![Page 55: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/55.jpg)
Pris f
or at
rette
fejl
Tid
Tag de svære diskussioner her
![Page 56: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/56.jpg)
Råd #3: Skab organisatorisk
FORANKRING
![Page 57: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/57.jpg)
![Page 58: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/58.jpg)
![Page 59: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/59.jpg)
![Page 60: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/60.jpg)
RWD afslører rod
![Page 61: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/61.jpg)
Gode projekter drives af et formål!
![Page 62: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/62.jpg)
Udfordringen er ikke at gøre et website, der er enkelt, responsive.
Det er at lave et website, der er enkelt.
![Page 63: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/63.jpg)
3 essentielledesign-principper
Responsive Design
![Page 64: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/64.jpg)
1 Fleksibilitet
2 Funktionalitet
3 Identitet
![Page 65: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/65.jpg)
Hvad er godt design egentligt?
![Page 66: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/66.jpg)
Form
Funktionalitet
Hvad er godt design egentligt?
![Page 67: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/67.jpg)
Everything is designed.Few things are designed well.
Brian Reed
![Page 68: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/68.jpg)
Mobile First eller Retro Fitting
![Page 69: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/69.jpg)
![Page 70: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/70.jpg)
1 Fleksibilitet
2 Funktionalitet
3 Identitet
![Page 71: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/71.jpg)
![Page 72: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/72.jpg)
![Page 73: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/73.jpg)
![Page 74: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/74.jpg)
![Page 75: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/75.jpg)
![Page 76: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/76.jpg)
![Page 77: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/77.jpg)
![Page 78: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/78.jpg)
![Page 79: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/79.jpg)
![Page 80: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/80.jpg)
![Page 81: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/81.jpg)
![Page 82: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/82.jpg)
![Page 83: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/83.jpg)
Perception
![Page 84: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/84.jpg)
Perception
![Page 85: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/85.jpg)
Perception
Nærhed
Lighed
![Page 86: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/86.jpg)
Nærhed og lighed
![Page 87: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/87.jpg)
Figur og fundament
Perception
![Page 88: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/88.jpg)
Figur og fundament
Perception
![Page 89: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/89.jpg)
Figur og fundament
![Page 90: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/90.jpg)
Fleksibilitet
eller
kontrol
![Page 91: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/91.jpg)
![Page 92: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/92.jpg)
![Page 93: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/93.jpg)
Brug et visuelt formsprog
til at skabe overblik og forståelse
![Page 94: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/94.jpg)
Overblik
![Page 95: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/95.jpg)
1 Fleksibilitet
2 Funktionalitet
3 Identitet
![Page 96: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/96.jpg)
Usability design
![Page 97: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/97.jpg)
Defensive Design
Design for when things go wrong
![Page 98: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/98.jpg)
Defensive Design
Design for when things go wrong
![Page 99: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/99.jpg)
![Page 100: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/100.jpg)
Touch Targets
![Page 101: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/101.jpg)
Touch Targets
![Page 102: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/102.jpg)
Touch Targets
![Page 103: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/103.jpg)
The Devil is in the detail
Interaction Design
![Page 104: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/104.jpg)
![Page 105: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/105.jpg)
![Page 106: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/106.jpg)
![Page 107: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/107.jpg)
![Page 108: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/108.jpg)
![Page 109: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/109.jpg)
![Page 110: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/110.jpg)
![Page 111: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/111.jpg)
![Page 112: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/112.jpg)
Responsive Icons
![Page 113: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/113.jpg)
Responsive Design
taken to the extreme
![Page 114: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/114.jpg)
Responsive Design
taken to the extreme
![Page 115: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/115.jpg)
![Page 116: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/116.jpg)
Skab motiverende
og funktionelle løsninger
![Page 117: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/117.jpg)
Design is not just what it looks like and feels like. Design is how
it works.Steve Jobs
![Page 118: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/118.jpg)
1 Fleksibilitet
2 Funktionalitet
3 Identitet
![Page 119: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/119.jpg)
Atomic Design
![Page 120: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/120.jpg)
Atom
Molekyle
Organisme
Miljø
![Page 121: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/121.jpg)
Atom
Molekyle
Organisme
Miljø
![Page 122: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/122.jpg)
Atom
Molekyle
Organisme
Miljø
![Page 123: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/123.jpg)
Atom
Molekyle
Organisme
Miljø
![Page 124: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/124.jpg)
Atom
Molekyle
Organisme
Miljø
![Page 125: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/125.jpg)
![Page 126: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/126.jpg)
![Page 127: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/127.jpg)
Design genkendelige
og let forståelige produkter
![Page 128: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/128.jpg)
Fleksibilitet• Brug de rette værktøjer til at skabe overblik
• Begræns fleksibiliteten og behold brugervenligheden
Funktionalitet• Design brugbare og funktionelle løsninger
• Små detaljer gør en stor forskel
Identitet• Design genkendelige og let forståelige produkter
![Page 129: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/129.jpg)
Den tekniske manifestationHow to walk the talk
![Page 130: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/130.jpg)
Fokus
Indhold: Grundstof i forandring
Hastighed: De glemte dyder
Test: Eksponentiel vækst
Model: Ny eller brugt
![Page 131: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/131.jpg)
Indhold: Grundstof i forandring
![Page 132: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/132.jpg)
Forståelse
Motivation
CTA
Teaser
![Page 133: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/133.jpg)
Eksempel
![Page 134: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/134.jpg)
Markup
![Page 135: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/135.jpg)
Platform
![Page 136: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/136.jpg)
Eksempel
![Page 137: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/137.jpg)
Transformation
![Page 138: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/138.jpg)
Usual suspects
![Page 139: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/139.jpg)
Tabeller
![Page 140: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/140.jpg)
År Deltagere
2011 5
2012 25
2013 40
2014 50
Tabel med få kolonner
![Page 141: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/141.jpg)
År Deltagere Lokaler Slides
2011 5 Fredagsbar 3
2012 25 Pentia i Store Kongensgade 10
2013 40 Odd Fellow Palæet 30
2014 50 Pentia på Bryggen 50
Tabel med flere kolonner
![Page 142: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/142.jpg)
År Deltagere Lokaler Slides Spørgsmål
2011 5 Fredagsbar 3 998
2012 25 Pentia i Store Kongensgade 10 12
2013 40 Odd Fellow Palæet 30 15
2014 50 Pentia på Bryggen 50 18
Tabel med endnu flere kolonner
![Page 143: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/143.jpg)
År Deltagere Lokaler Slides Spørgsmål
2011 5 Fredagsbar 3 998
2012 25 Pentia i Store Kongensgade 10 12
2013 40 Odd Fellow Palæet 30 15
2014 50 Pentia på Bryggen 50 18
Tabel med horisontal scroll
![Page 144: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/144.jpg)
År 2011
Deltagere 5
Lokaler Fredagsbar
Slides 3
Spørgsmål 998
År 2012
Deltagere 25
Lokaler Pentia i Store Kongensgade
Slides 10
Spørgsmål 12
År 2013
Tabel med vertikal scroll
![Page 145: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/145.jpg)
Tabel som diagram
Deltagere
2011
2012
2013
2014
![Page 146: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/146.jpg)
Tabel med valg
År Deltagere Lokaler Slides Spørgsmål
2011 5 Fredagsbar 3 998
2012 25 Pentia i Store Kongensgade 10 12
2013 40 Odd Fellow Palæet 30 15
2014 50 Pentia på Bryggen 50 18
![Page 147: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/147.jpg)
Iframes
![Page 148: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/148.jpg)
Desktop
![Page 149: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/149.jpg)
Mobil
![Page 150: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/150.jpg)
Accept
![Page 151: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/151.jpg)
Eksemplet …
![Page 152: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/152.jpg)
![Page 153: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/153.jpg)
![Page 154: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/154.jpg)
Den lille forskel …
![Page 155: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/155.jpg)
Feature detection
![Page 156: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/156.jpg)
Graceful degradation
![Page 157: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/157.jpg)
Progressiv enhancement
Modernizr
Fallbacks
Fremtidige protekoller
![Page 158: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/158.jpg)
Hastighed: De glemte dyder
![Page 159: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/159.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 160: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/160.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 161: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/161.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 162: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/162.jpg)
2011 "Most common problem accessing websites on your mobile phone?“
Bruce Lawson: http://bit.ly/A3PhF7
"Slow to load": 38%
![Page 163: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/163.jpg)
2014 “69 Percent of Responsive Design Websites Fail to Deliver Acceptable Load Times on Mobile Devices”
Trilibis.com: http://goo.gl/YMpmde
![Page 164: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/164.jpg)
Fjenden Latency
Download
CPU
![Page 165: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/165.jpg)
Midlet Få elementer
Strategisk indlæsning
Målbare kriterier
![Page 166: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/166.jpg)
Målet Performancebudget
Hastighed
Elementer
Caching
Stil krav!
![Page 167: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/167.jpg)
Tools Google PageSpeed Insigths
WebPagetest
HTTPArchive
![Page 168: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/168.jpg)
Måling
![Page 169: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/169.jpg)
Benchmark
![Page 170: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/170.jpg)
Test: Eksponentiel vækst
![Page 171: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/171.jpg)
![Page 172: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/172.jpg)
Værdibaseret test
![Page 173: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/173.jpg)
Formel
Frekvens +
konverteringIndsats
= Testværd
i
Lovkra
v
![Page 174: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/174.jpg)
Brug statistikker
![Page 175: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/175.jpg)
Test user stories
![Page 176: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/176.jpg)
![Page 177: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/177.jpg)
Med partner
![Page 178: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/178.jpg)
Automatiseret test
![Page 179: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/179.jpg)
Og på egen hånd
![Page 180: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/180.jpg)
Din browser
![Page 181: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/181.jpg)
Emulatorer
![Page 182: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/182.jpg)
Browserstack.com
![Page 183: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/183.jpg)
Hands-on
![Page 184: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/184.jpg)
Model: Ny eller brugt?
![Page 185: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/185.jpg)
Valg af model
![Page 186: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/186.jpg)
Responsive retrofitting
![Page 187: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/187.jpg)
Mobile first
![Page 188: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/188.jpg)
Teknisk fundament
Ressourcer
Eksterne krav
CMS
Budget
Redaktionelt workflow
Indholdsmæssig arv
![Page 189: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/189.jpg)
Retrofitting
![Page 190: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/190.jpg)
Mobile first
![Page 191: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/191.jpg)
Mobile first
![Page 192: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/192.jpg)
Husk
![Page 193: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/193.jpg)
IA
UX
DesignFrontend
Backend
![Page 194: Responsive Web Design 2.0](https://reader033.fdocuments.net/reader033/viewer/2022042813/54935808ac7959222e8b4842/html5/thumbnails/194.jpg)
Spørgsmål …