responsivt webdesign

45
Av Ingrid Nese Veen Responsivt webdesign

Upload: peanutsstavanger

Post on 26-Jan-2015

122 views

Category:

Technology


2 download

DESCRIPTION

Ingrid Nese Veen sitt foredrag på kundeseminaret "Det du trenger er en app?"

TRANSCRIPT

Page 1: Responsivt webdesign

Av Ingrid Nese Veen

Responsivt webdesign

Page 2: Responsivt webdesign

Mer enn halvparten av alle datamaskiner er ikke

datamaskiner lenger

Page 3: Responsivt webdesign

Mobile enheter vil stå for

over halvparten av all internettrafikk i løpet av de neste årene.

Page 4: Responsivt webdesign

Mobil er uten tvil den neste store dataplattformen

Page 5: Responsivt webdesign

Hva skal man støtte?

iOS? Android? Microsoft? Nettleser? …? ?

Page 6: Responsivt webdesign

Hva med de man ikke velger å støtte?

?

Page 7: Responsivt webdesign

App vs. NettinnholdUtviklet for en spesifikk enhet, kjører lokalt.

Kan åpnes på en hvilken som helst enhet med nettleser.

Page 8: Responsivt webdesign

Ulemper med apper / Fordeler med nettinnhold

•Apper er kun tilgjengelig på plattformen den er utviklet for. / Nettinnhold er tilgjengelig på alle enheter som har en nettleser.

•Bruk av apper krever mye fragmentering. / Nettinnhold krever mindre fragmentering.

•Innholdet vil ikke kunne være søkbart gjennom søkemotorer. / Nettinnhold laget med webstandarder er søkbart.

•Lenker til nettsider åpnes i en annen app (nettleser). Kan være forvirrende.

Page 9: Responsivt webdesign

Fordeler med apper / Ulemper med nettinnhold

•App kan kombinere innebygde UI-element med nettinnhold. / Nettinnhold i seg selv kan kun benytte de API’ene som er tilgjengelig gjennom nettleseren.

Page 10: Responsivt webdesign
Page 11: Responsivt webdesign

Tilgang til app vs. nettinnhold

Page 12: Responsivt webdesign

Tilpasset nettinnhold vil

uansett være nødvendig.

Page 13: Responsivt webdesign

apper kan i noen tilfeller være beste løsning.

Dersom man trenger funksjoner som nettleseren ikke støtter (Eks: Kamera, kompass, etc.)

Dersom man skal lage programvare eller spill som skal utnytte mulighetene og funksjonene til enheten.

JA,

Page 14: Responsivt webdesign

i de fleste tilfeller vil nettinnhold være den mest optimale og rimeligste løsningen for de fleste nettsteder.

Men,

Page 15: Responsivt webdesign

hvordan skal man tilpasse nettinnholdet for mobile enheter?

Så,

Page 16: Responsivt webdesign

Vi trenger en mobil nettside!” ”

Page 17: Responsivt webdesign

Separate mobile nettsider:

m.nettadresse.commobil.nettadresse.com

”Vis fullversjon”

http://m.tekna.no/

Page 18: Responsivt webdesign

Mobil-bruker

-Har det travelt-Har treg internettforbindelse-Kun interessert i raske interaksjoner

Desktop-bruker

-Har god tid-Har god internettforbindelse-Er interessert i fullversjonen av nettsiden

Page 19: Responsivt webdesign

41 prosent bruker nettbrett mens de ser på TV. 38 prosent bruker mobiltelefon (smarttelefon) mens de ser på TV.

(Kilde: Yahoo News, des 2012)

Page 20: Responsivt webdesign

Brukere med mobile enheter er altså IKKE alltid mobile.

Page 21: Responsivt webdesign

http://m.tekna.no/ http://tekna.no/

Page 22: Responsivt webdesign

Hva med nettbrett?

Hva med nye enheter med ukjente skjermstørrelser? ?

Page 23: Responsivt webdesign

Hvordan kan man levere

en god nettopplevelse som når alle mennesker

uavhengig av hvilken enhet de har?

?Spørsmålet er:

Page 24: Responsivt webdesign

Apper vil ikke være et tilfredsstillende svar på alle behov som finnes i dag.

:(

Page 25: Responsivt webdesign

Men det finnes andrealternativer!

:)

Page 26: Responsivt webdesign

Løsningen er å benytte

Responsive webdesign-teknikkernår nettinnhold skal optimaliseres. !

Page 27: Responsivt webdesign

Responsivt webdesignEn tilnærming med fokus på at nettsidens utseende skal reagere på brukerens atferd og miljø basert på skjermstørrelse, plattform og orientering (landskap/portrett).

Page 28: Responsivt webdesign

Kun en nettside å oppdatere!

Page 29: Responsivt webdesign

Ingen problem å dele lenkerIngen problemer med søkemotorer

Page 30: Responsivt webdesign

Layouten tilpasser seg hvilken som helst skjermstørrelse!

Page 31: Responsivt webdesign

Ved bruk av responsivt webdesign-tilnærmingen tilpasses CSS-filene slik at nettsiden passer hver enkelt skjermoppløsning og i ulike visningsmodus (horisontalt og vertikalt).

Med andre ord:Nettsiden skal automatisk svare på brukerens innstillinger.

Page 32: Responsivt webdesign
Page 33: Responsivt webdesign
Page 34: Responsivt webdesign
Page 35: Responsivt webdesign
Page 36: Responsivt webdesign
Page 37: Responsivt webdesign
Page 38: Responsivt webdesign
Page 39: Responsivt webdesign
Page 40: Responsivt webdesign

Responsivt webdesign fungerer best dersom det bygges nedenfra og opp – altså for mobiltelefoner først. Man fyller deretter på med mer design og funksjonalitet for større skjermer.

Små skjermer først!

Page 41: Responsivt webdesign

Lages mobilløsningene først, får man et sluttresultat som har alle nøkkelfunksjonene på plass, rensket for omveier og grensesnittrusk.

Page 42: Responsivt webdesign

Har det noenforretningsverdi ?

Page 43: Responsivt webdesign

Eksempel!

Page 44: Responsivt webdesign

• Transaksjoner på iPhone ble mer enn doblet.

• Transaksjoner på Android ble mer enn firedoblet.

Resultat

Page 45: Responsivt webdesign

Oppsummering:•Responsivt webdesign = Trygg framtid

Det er den eneste gunstige løsningen for innholdsbaserte nettsider.

•Tenk mobiltelefoner førstDet vil redusere utviklingstiden

•Keep it simple!Gjør det så enkelt som mulig for brukeren.