responsive web design 2.0
DESCRIPTION
Mobiltilpasning er en flerstrenget disciplin. I denne præsentation får du 3 gode råd fra henholdsvis UX, design og frontend. Har du ikke styr på alle tre dele, kan du ødelægge helhedsindtrykket.TRANSCRIPT
Responsive Web Design 2.0Morgenmøde i Pentia 20. maj 2014
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 %
11% kender forskellen på native apps, mobile sites og RWD ift. at have et validt beslutningsgrundlag
54% skal i gang med mobiloptimering indenfor 12 måneder
Kort om Pentia
What we do
DIGITAL STRATEGI
PROJEKTLEDELSE
UDVIKLING &INTEGRATION
UX & DESIGN
SERVICE & SUPPORT
FORRETNINGS-ANALYSE
Talere i dag
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
Hvad har vi lært efter 3 år med RWD?
Ud af top 250 er der 34 af websites, hvor under halvdelen af besøgene vises på desktop
FDIMs statistik fra januar 2014
Rankings.dk, PC vs. Non-pc
RWD
AWD
Media Queries
Fluid GridFluid Media
Progressive enhancement
MOMENT OFtruthZERO
cross device
local
affiliate marketing
t-commerce
youtility mix brand and non-brand
bids over budgetperformance
customers over clicks
social signals
Mobiloptimeret er blevet standard!
… og alligevel byder vi brugerne dette …
DEVICEAGNOSTISK
Frederiksberg.dk
+17% mobile besøgende
Afvisningsprocent fra 70% til 41%
Forbrug.dkAfvisningsprocent faldet
med 22%
Besøgsvarigheden steget med 32%
3 gode råd om UX-processenResponsive Design
Råd #1: Tag udgangspunkt i din
SERVICE
Know thy digital service
Få dine varer tilsendt uden omkostning i hele januar
Gratis forsendelse hele januar
Råd #2: Begynd med det SVÆRESTE
Pris f
or at
rette
fejl
Tid
Tegn før du koder
Tegn ikke alle detaljer
Navigation er svært
“…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)
Mobile first
Mobile first
UX? Design?Frontend?
Pris f
or at
rette
fejl
Tid
Tag de svære diskussioner her
Råd #3: Skab organisatorisk
FORANKRING
RWD afslører rod
Gode projekter drives af et formål!
Udfordringen er ikke at gøre et website, der er enkelt, responsive.
Det er at lave et website, der er enkelt.
3 essentielledesign-principper
Responsive Design
1 Fleksibilitet
2 Funktionalitet
3 Identitet
Hvad er godt design egentligt?
Form
Funktionalitet
Hvad er godt design egentligt?
Everything is designed.Few things are designed well.
Brian Reed
Mobile First eller Retro Fitting
1 Fleksibilitet
2 Funktionalitet
3 Identitet
Perception
Perception
Perception
Nærhed
Lighed
Nærhed og lighed
Figur og fundament
Perception
Figur og fundament
Perception
Figur og fundament
Fleksibilitet
eller
kontrol
Brug et visuelt formsprog
til at skabe overblik og forståelse
Overblik
1 Fleksibilitet
2 Funktionalitet
3 Identitet
Usability design
Defensive Design
Design for when things go wrong
Defensive Design
Design for when things go wrong
Touch Targets
Touch Targets
Touch Targets
The Devil is in the detail
Interaction Design
Responsive Icons
Responsive Design
taken to the extreme
Responsive Design
taken to the extreme
Skab motiverende
og funktionelle løsninger
Design is not just what it looks like and feels like. Design is how
it works.Steve Jobs
1 Fleksibilitet
2 Funktionalitet
3 Identitet
Atomic Design
Atom
Molekyle
Organisme
Miljø
Atom
Molekyle
Organisme
Miljø
Atom
Molekyle
Organisme
Miljø
Atom
Molekyle
Organisme
Miljø
Atom
Molekyle
Organisme
Miljø
Design genkendelige
og let forståelige produkter
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
Den tekniske manifestationHow to walk the talk
Fokus
Indhold: Grundstof i forandring
Hastighed: De glemte dyder
Test: Eksponentiel vækst
Model: Ny eller brugt
Indhold: Grundstof i forandring
Forståelse
Motivation
CTA
Teaser
Eksempel
Markup
Platform
Eksempel
Transformation
Usual suspects
Tabeller
År Deltagere
2011 5
2012 25
2013 40
2014 50
Tabel med få kolonner
Å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
Å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
Å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
Å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
Tabel som diagram
Deltagere
2011
2012
2013
2014
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
Iframes
Desktop
Mobil
Accept
Eksemplet …
Den lille forskel …
Feature detection
Graceful degradation
Progressiv enhancement
Modernizr
Fallbacks
Fremtidige protekoller
Hastighed: De glemte dyder
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
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
"Slow to load": 38%
2014 “69 Percent of Responsive Design Websites Fail to Deliver Acceptable Load Times on Mobile Devices”
Trilibis.com: http://goo.gl/YMpmde
Fjenden Latency
Download
CPU
Midlet Få elementer
Strategisk indlæsning
Målbare kriterier
Målet Performancebudget
Hastighed
Elementer
Caching
Stil krav!
Tools Google PageSpeed Insigths
WebPagetest
HTTPArchive
Måling
Benchmark
Test: Eksponentiel vækst
Værdibaseret test
Formel
Frekvens +
konverteringIndsats
= Testværd
i
Lovkra
v
Brug statistikker
Test user stories
Med partner
Automatiseret test
Og på egen hånd
Din browser
Emulatorer
Browserstack.com
Hands-on
Model: Ny eller brugt?
Valg af model
Responsive retrofitting
Mobile first
Teknisk fundament
Ressourcer
Eksterne krav
CMS
Budget
Redaktionelt workflow
Indholdsmæssig arv
Retrofitting
Mobile first
Mobile first
Husk
IA
UX
DesignFrontend
Backend
Spørgsmål …