responsive web design 2.0

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 …