responsivt webdesign

Av Ingrid Nese Veen

Responsivt webdesign

Mer enn halvparten av alle datamaskiner er ikke

datamaskiner lenger

Mobile enheter vil stå for

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

Mobil er uten tvil den neste store dataplattformen

Hva skal man støtte?

iOS? Android? Microsoft? Nettleser? …? ?

Hva med de man ikke velger å støtte?

?

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

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

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.

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.

Tilgang til app vs. nettinnhold

Tilpasset nettinnhold vil

uansett være nødvendig.

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,

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

Men,

hvordan skal man tilpasse nettinnholdet for mobile enheter?

Så,

Vi trenger en mobil nettside!” ”

Separate mobile nettsider:

m.nettadresse.commobil.nettadresse.com

”Vis fullversjon”

http://m.tekna.no/

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

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

(Kilde: Yahoo News, des 2012)

Brukere med mobile enheter er altså IKKE alltid mobile.

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

Hva med nettbrett?

Hva med nye enheter med ukjente skjermstørrelser? ?

Hvordan kan man levere

en god nettopplevelse som når alle mennesker

uavhengig av hvilken enhet de har?

?Spørsmålet er:

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

:(

Men det finnes andrealternativer!

:)

Løsningen er å benytte

Responsive webdesign-teknikkernår nettinnhold skal optimaliseres. !

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).

Kun en nettside å oppdatere!

Ingen problem å dele lenkerIngen problemer med søkemotorer

Layouten tilpasser seg hvilken som helst skjermstørrelse!

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.

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!

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

Har det noenforretningsverdi ?

Eksempel!

• Transaksjoner på iPhone ble mer enn doblet.

• Transaksjoner på Android ble mer enn firedoblet.

Resultat

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.