24.04.2012

Hvem bruger en PC? Hvem bruger en iPad? Hvem bruger en smartphone? Og hvem bruger alle platforme på forskellige tidspunkter? Vi ser nærmere på, hvilke muligheder, man kan stille til rådighed for medarbejderne, og hvordan man kan gøre i praksis. For sagen er jo, at en PC ikke bare er en stor smartphone. Og at en Ipad er en ny platform på nye præmisser

Mange platforme – muligheder eller trusler?

24.04.2012

24.04.2012

24.04.2012

Løsningsmodeller

• Desktop løsning

• Desktop / Mobil / Tablet løsning

• Traditionel løsning Seperat mobil site - Device detection

• Responsive Web Design Et site der tilpasser sig brugerens browservindue

24.04.2012

Traditionel MobilløsningSeparat mobilsite - Device Detection

Websitewww.dsb.dk

Device detection

OptimeretMobile sitewww.m.dsb.dk

www.dsb.dk

www.m.dsb.dk

Ud over en alm. desktop løsning. Laves der et eller flere separate sites for at optimere oplevelsen på mobile enheder.

24.04.2012

Traditionel MobilløsningSeparat mobilsite - Device Detection

• Fordele

• Man kan sende brugeren et fuldstændig tilpasset site i forhold til den platform de befinder sig på.

• Kræver mindre planlægning i design fasen. Da man kan fokusere på en løsning af gangen.

• Ulemper

• Mere vedligeholdelse

• Finder brugeren indhold via en søgemaskine (Google) der henviser til det fulde site, kan de blive dirigeret over på et mobilesite der måske ikke har indholdet.

• Nye ukendte produkter (mobil/tablet apparater) tilpasser sig ikke automatisk.

• Problemer med deling af links fra mobil til desktop eller omvendt

• Antager at brugeren har et begrænset behov, hvilket flere undersøgelser viser ikke er rigtigt.Eksempel: http://m.dsb.dk/

24.04.2012

mcdonalds.com

24.04.2012

opentable.com

24.04.2012

DSB.dk

24.04.2012

Responsive Web DesignEt site der tilpasser sig brugerens browservindue/skærm

Website

Aflæser browservindue

Ved hjælp af fluid grids og media queries tilpasses hjemmesidens udseende sig efter apparatets browservindue/skærm.

www.energifyn.dk

www.energifyn.dk

24.04.2012

Responsive Web DesignEt site der tilpasser sig brugerens browservindue/skærm

• Fordele

• Vil også fungere på fremtidens apparater. Tilpasser sig alle skærmstørrelser. Der bruges ikke device detection.

• Vedligeholdelse ét sted.

• Mere ensartet brugeroplevelse. Brugeren får det samme indhold som på desktop.

• Ulemper

• Udfordringerne med optimering til mobil er større end ved traditionel løsning.

• Længere designfase, da der skal tages højde for flere størrelser.

• Mindre kontrol over sitets udseende, da elementer skal kunne skalere.

• Problematisk hvis der iframes indhold ind fra eksterne sites/services.

• Annoncer er problematiske på responsive sites.

24.04.2012

24.04.2012

24.04.2012

24.04.2012

“The simple guidelines is whatever you are doing

- do mobile first”

Google Charmain Eric Schmidt

24.04.2012

“We really need to shift to think about mobile first... This is a bigger shift than we saw with the personal

computing revolution”

Adobe CTO Kevin Lynch

24.04.2012

Boston Globe Starbucks Jydske Bank

Responsive Web DesignEt site der tilpasser sig brugerens viewport/skærm