Upload
pentia360
View
250
Download
0
Embed Size (px)
DESCRIPTION
Hvad har de seneste tre år lært os om RWD? Vi får gode råd fra UX, Design og Frontend
Citation preview
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