responsive web design 2.0

Responsive DesignPentia morgenmøde

@PentiaDK #Pentiaevent

Sådan er vi

Sådan gør vi

Peter KræmmerPeter Dyrman Kristian Thrane

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

Øget procentdel mobile brugere

3,8 mio smartphones i Danmark

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

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

Eksempel:

PayPal mobile transaktioner

»$141 mio (2009)»$750 mio (2010)»$4 mia (2011)»$10 mia (2012)

Kilde: http://bit.ly/zZgrKu

• 76 % oplever vækst i tilgangen af mobile brugere

• Kun 3 % oplever svag vækst

• 51 % planlægger mobiltilpasning inden for max. 12 md.

Øget krav fra Google om mobil

visningKilde: http://googlewebmastercentral.blogspot.dk/2013/06/changes-in-rankings-of-smartphone_11.html

Samme site på flere platforme

» Fluid grid» Fluid media»Media queries

DEVICEAGNOSTISK

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

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

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

RWD– hvor er vi nu?» Pentia laver (næsten) kun projekter,

der også omfatter RWD» Retrofitting er populært»Øget interesse for Mobile First

Tre ting RWD har lært os om

UX

1. Tegn før du koder

Tegn ikke alle detaljer

Brug rigtige data

2. Navigation er halvdelen af

opgaven

“…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)

3. RWD er også et organisatorisk

projekt

Giv mandat

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

Når indhold spiller en større rolle

... skal dine indholdsleverandører og redaktører kunne følge med

Pause

@PentiaDK#Pentiaevent

3 erfaringer

Fleksibilitet

Skab overblik

Gestalt regler

Nærhed Lighed Helhed

Prioritering

Minimum viable product

Målsætning

Usability design

Anvendelighed

Skærmstørrelser vs indhold

Pause

Vis halve elementer

Brand& Identitet

Det lykkelige ægteskab

Tre ting RWD har lært os om frontend

1. INDHOLD ER IKKE BARE INDHOLD

Tabeller

RWD morgenmøder i Pentia

År Deltagere

2011 5

2012 25

2013 50

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)

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)

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)

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

Diagram

6%

31%

63%

RWD morgenmøde - deltagere

201120122013

Vælger 1/3

Vælger 2/3

Vælger 3/3

Tekst i billeder

Eksempel - før

Eksempel - efter

Eksempel - før

Eksempel - efter

Eksempel - før

Eksempel - efter

Adskil tekst og billeder

Video

Eksempel - før

Eksempel - efter

Løsninger

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

Iframes

Eksempel - før

Eksempel - efter

Løsninger

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

Overlay

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

Eksempel - før

Eksempel - efter

Nemid

#*!

Eksempel - før

Eksempel - efter

Løsning - abstraktion

Løsning - selvhjælp

Lyset for enden …

2. HASTIGHED ER FORRETNINGSKRITISK

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

2007

"For every 100ms increase in load time of Amazon.com sales decreased by

1%“Kohavi and Longbotham: http://bit.ly/w3TGR

2009

"Akamai Reveals 2 Seconds as the New Threshold of Acceptability for

eCommerce Web Page Response Times"

Akamai.com: http://bit.ly/Fukp9

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

2011

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

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

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

Overordnet

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

Download

Gennemsnitshastighed i Danmark

Akamai.com http://bit.ly/1d9dO4c, * gns. af omkringliggende lande

Bredbånd Mobil

8.2 Mbps 2-4 Mbps*

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

Latency

Gennemsnit

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

Bredbånd Mobil

10-100 ms 100-1000 ms

Konsekvens

Website Forspørgelser

eb.dk 325

information.dk 186

weekendavisen.dk 47

Opfattet hastighed

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

eb.dk

Efter 2,5 sekunder ...

information.dk

Efter 2,5 sekunder ...

weekendavisen.dk

Efter 2,5 sekunder ...

Hvor bør vi optimere først?

http://httparchive.org/

Billeder (60-80%)

» Prerender» Mobile first» Differentieret indlæsning

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

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

3. TEST TAGER TID

Værdibaseret testplan

Brug statistik

Løsninger

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

Lav en soft launch internt og udnyt de mange gadgetfyldte lommer

Den 10. erfaring

Tværfagligt arbejde er afgørende

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

»Organisation» Navigation» Design» Indhold» Hastighed

Tak!Se mere her:

www.pentia.dkwww.pentia360.dk

@pentiaDK