responsive web design 2.0

157
Responsive Design Pentia morgenmøde @PentiaDK #Pentiaevent

Upload: pentia360

Post on 15-Dec-2014

249 views

Category:

Documents


0 download

DESCRIPTION

Hvad har de seneste tre år lært os om RWD? Vi får gode råd fra UX, Design og Frontend

TRANSCRIPT

Page 1: Responsive Web Design 2.0

Responsive DesignPentia morgenmøde

@PentiaDK #Pentiaevent

Page 2: Responsive Web Design 2.0

Sådan er vi

Page 3: Responsive Web Design 2.0

Sådan gør vi

Page 4: Responsive Web Design 2.0

Peter KræmmerPeter Dyrman Kristian Thrane

Page 5: Responsive Web Design 2.0

Hvad har vi lært efter 3 år med Responsive Design?

Page 6: Responsive Web Design 2.0

Øget procentdel mobile brugere

Page 7: Responsive Web Design 2.0

3,8 mio smartphones i Danmark

Kilde: http://bit.ly/173j43r

Page 8: Responsive Web Design 2.0

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

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

• 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

Ø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
Page 13: Responsive Web Design 2.0

Samme site på flere platforme

» Fluid grid» Fluid media»Media queries

Page 14: Responsive Web Design 2.0

DEVICEAGNOSTISK

Page 15: Responsive Web Design 2.0

Frederiksberg.dk» +17% mobile besøgende» Afvisningsprocent faldet fra 70% til 41%

Page 16: Responsive Web Design 2.0

Forbrug.dk» Afvisningsprocent faldet med 22%» Besøgsvarigheden steget med 32%

Page 17: Responsive Web Design 2.0

I gang med RWD» Retrofitting»Mobile first» RWD eller AWD?

Page 18: Responsive Web Design 2.0
Page 19: Responsive Web Design 2.0

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

Tre ting RWD har lært os om

UX

Page 21: Responsive Web Design 2.0

1. Tegn før du koder

Page 22: Responsive Web Design 2.0
Page 23: Responsive Web Design 2.0
Page 24: Responsive Web Design 2.0
Page 25: Responsive Web Design 2.0

Tegn ikke alle detaljer

Page 26: Responsive Web Design 2.0

Brug rigtige data

Page 27: Responsive Web Design 2.0

2. Navigation er halvdelen af

opgaven

Page 28: Responsive Web Design 2.0

“…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
Page 30: Responsive Web Design 2.0
Page 31: Responsive Web Design 2.0
Page 32: Responsive Web Design 2.0
Page 33: Responsive Web Design 2.0
Page 34: Responsive Web Design 2.0
Page 35: Responsive Web Design 2.0
Page 36: Responsive Web Design 2.0
Page 37: Responsive Web Design 2.0
Page 38: Responsive Web Design 2.0
Page 39: Responsive Web Design 2.0
Page 40: Responsive Web Design 2.0
Page 41: Responsive Web Design 2.0
Page 42: Responsive Web Design 2.0
Page 43: Responsive Web Design 2.0
Page 44: Responsive Web Design 2.0

3. RWD er også et organisatorisk

projekt

Page 45: Responsive Web Design 2.0
Page 46: Responsive Web Design 2.0

Giv mandat

Page 47: Responsive Web Design 2.0

RWD afslører rod»Prioritering er alt»Kompleksitet bliver sat på prøve

Page 48: Responsive Web Design 2.0

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

Pause

@PentiaDK#Pentiaevent

Page 50: Responsive Web Design 2.0

3 erfaringer

Page 51: Responsive Web Design 2.0
Page 52: Responsive Web Design 2.0

Fleksibilitet

Page 53: Responsive Web Design 2.0
Page 54: Responsive Web Design 2.0
Page 55: Responsive Web Design 2.0
Page 56: Responsive Web Design 2.0
Page 57: Responsive Web Design 2.0
Page 58: Responsive Web Design 2.0
Page 59: Responsive Web Design 2.0
Page 60: Responsive Web Design 2.0

Skab overblik

Page 61: Responsive Web Design 2.0

Gestalt regler

Nærhed Lighed Helhed

Page 62: Responsive Web Design 2.0
Page 63: Responsive Web Design 2.0
Page 64: Responsive Web Design 2.0

Prioritering

Page 65: Responsive Web Design 2.0

Minimum viable product

Page 66: Responsive Web Design 2.0
Page 67: Responsive Web Design 2.0
Page 68: Responsive Web Design 2.0
Page 69: Responsive Web Design 2.0

Målsætning

Page 70: Responsive Web Design 2.0

Usability design

Page 71: Responsive Web Design 2.0
Page 72: Responsive Web Design 2.0

Anvendelighed

Page 73: Responsive Web Design 2.0
Page 74: Responsive Web Design 2.0
Page 75: Responsive Web Design 2.0
Page 76: Responsive Web Design 2.0
Page 77: Responsive Web Design 2.0

Skærmstørrelser vs indhold

Page 78: Responsive Web Design 2.0

Pause

Page 79: Responsive Web Design 2.0

Vis halve elementer

Page 80: Responsive Web Design 2.0
Page 81: Responsive Web Design 2.0

Brand& Identitet

Page 82: Responsive Web Design 2.0
Page 83: Responsive Web Design 2.0

Det lykkelige ægteskab

Page 84: Responsive Web Design 2.0
Page 85: Responsive Web Design 2.0
Page 86: Responsive Web Design 2.0
Page 87: Responsive Web Design 2.0

Tre ting RWD har lært os om frontend

Page 88: Responsive Web Design 2.0

1. INDHOLD ER IKKE BARE INDHOLD

Page 89: Responsive Web Design 2.0
Page 90: Responsive Web Design 2.0

Tabeller

Page 91: Responsive Web Design 2.0

RWD morgenmøder i Pentia

År Deltagere

2011 5

2012 25

2013 50

Page 92: Responsive Web Design 2.0

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

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

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

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

Diagram

6%

31%

63%

RWD morgenmøde - deltagere

201120122013

Page 97: Responsive Web Design 2.0

Vælger 1/3

Page 98: Responsive Web Design 2.0

Vælger 2/3

Page 99: Responsive Web Design 2.0

Vælger 3/3

Page 100: Responsive Web Design 2.0

Tekst i billeder

Page 101: Responsive Web Design 2.0

Eksempel - før

Page 102: Responsive Web Design 2.0

Eksempel - efter

Page 103: Responsive Web Design 2.0

Eksempel - før

Page 104: Responsive Web Design 2.0

Eksempel - efter

Page 105: Responsive Web Design 2.0

Eksempel - før

Page 106: Responsive Web Design 2.0

Eksempel - efter

Page 107: Responsive Web Design 2.0

Adskil tekst og billeder

Page 108: Responsive Web Design 2.0

Video

Page 109: Responsive Web Design 2.0

Eksempel - før

Page 110: Responsive Web Design 2.0

Eksempel - efter

Page 111: Responsive Web Design 2.0

Løsninger

» Brug moderne implementeringer» Brug etablerede services» YouTube» Vimeo» 23

Page 112: Responsive Web Design 2.0

Iframes

Page 113: Responsive Web Design 2.0

Eksempel - før

Page 114: Responsive Web Design 2.0

Eksempel - efter

Page 115: Responsive Web Design 2.0

Løsninger

» Gør partnerindhold responsivt» Lav en egentlig integration af data» Vis i eget vindue

Page 116: Responsive Web Design 2.0

Overlay

… modal, popup og vindue-oven-på-indhold

Page 117: Responsive Web Design 2.0

Eksempel - før

Page 118: Responsive Web Design 2.0

Eksempel - efter

Page 119: Responsive Web Design 2.0

Nemid

#*!

Page 120: Responsive Web Design 2.0

Eksempel - før

Page 121: Responsive Web Design 2.0

Eksempel - efter

Page 122: Responsive Web Design 2.0

Løsning - abstraktion

Page 123: Responsive Web Design 2.0

Løsning - selvhjælp

Page 124: Responsive Web Design 2.0

Lyset for enden …

Page 125: Responsive Web Design 2.0

2. HASTIGHED ER FORRETNINGSKRITISK

Page 126: Responsive Web Design 2.0

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

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

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

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

2011

"Most common problem accessing websites on your mobile phone?“

Bruce Lawson: http://bit.ly/A3PhF7

Page 131: Responsive Web Design 2.0

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

Overordnet

» Download – størrelsen af elementerne» Latency – reaktionstid per element

Page 133: Responsive Web Design 2.0

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

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

Latency

Gennemsnit

Ilya Grigorik: http://bit.ly/MM010B

Bredbånd Mobil

10-100 ms 100-1000 ms

Page 136: Responsive Web Design 2.0

Konsekvens

Website Forspørgelser

eb.dk 325

information.dk 186

weekendavisen.dk 47

Page 137: Responsive Web Design 2.0

Opfattet hastighed

"hvor hurtigt kan brugeren læse eller gøre noget?"

Page 138: Responsive Web Design 2.0

eb.dk

Efter 2,5 sekunder ...

Page 139: Responsive Web Design 2.0

information.dk

Efter 2,5 sekunder ...

Page 140: Responsive Web Design 2.0

weekendavisen.dk

Efter 2,5 sekunder ...

Page 141: Responsive Web Design 2.0

Hvor bør vi optimere først?

Page 142: Responsive Web Design 2.0

http://httparchive.org/

Page 143: Responsive Web Design 2.0

Billeder (60-80%)

» Prerender» Mobile first» Differentieret indlæsning

Page 144: Responsive Web Design 2.0

Scripts og styles (10-20%) Differentieret indlæsning Komprimering Caching

Page 145: Responsive Web Design 2.0

Værktøjer Google PageSpeed Insigths Akamai Mobitest Webpagetest.org Bustoppested i regnvejr

Page 146: Responsive Web Design 2.0

3. TEST TAGER TID

Page 147: Responsive Web Design 2.0

Værdibaseret testplan

Page 148: Responsive Web Design 2.0

Brug statistik

Page 149: Responsive Web Design 2.0

Løsninger

» Åbne ny fane» Gøre partnerindhold responsivt» Integrere indhold via webservice

Page 150: Responsive Web Design 2.0
Page 151: Responsive Web Design 2.0

Lav en soft launch internt og udnyt de mange gadgetfyldte lommer

Page 152: Responsive Web Design 2.0
Page 153: Responsive Web Design 2.0
Page 154: Responsive Web Design 2.0

Den 10. erfaring

Page 155: Responsive Web Design 2.0

Tværfagligt arbejde er afgørende

Page 156: Responsive Web Design 2.0

Gode råd, før I starter med RWD

»Organisation» Navigation» Design» Indhold» Hastighed

Page 157: Responsive Web Design 2.0

Tak!Se mere her:

www.pentia.dkwww.pentia360.dk

@pentiaDK