Optimalisere websider for mobile enheter

The Boston Globe, eksempel på skalering basert på skjermoppløsningen

The Boston Globe, eksempel på skalering basert på skjermoppløsningen

Har du tenkt på hvordan websiten din vises på en smarttelefon eller et lesebrett? For mange er det nok fortsatt slik at websiten er tilpasset tradisjonelle skjermstørrelser, mens visning på enheter med mindre skjermer ikke er noe man har brukt ressurser på. Kanskje har du vurdert det, men tenkt at det sikkert er altfor mye jobb og for kostbart å gjøre slike tilpassninger?

Om du er en av mange som ennå ikke har gjort noe for å tilpasse dine websider for ulike skjermoppløsninger og enheter er det nå på tide å ta tak i dette. Å ikke gjøre noe betyr at du ignorerer en stor andel av kundene dine, en andel som bare vil øke i tiden fremover.

Enkelte rapporter sier at vi innen 2013 vil være i en situasjon hvor andelen besøkende på nettsider via mobiltelefon/lesebrett vil overgå tradisjonell PC, andre rapporter hevder dette skiftet vil skje i 2015. Uansett når dette skjer, det som er helt sikkert er at andelen besøkende via mobil/lesebrett på din webside øker for hver dag, så hvorfor ikke gi kundene dine en god opplevelse uansett plattform og skjermoppløsning allerede i dag?

Hvilke muligheter har vi?

  • Vi kan lage en native app (iOS, Android, Windows Phone 7 osv): dette egner seg godt for oppgavebaserte eller plattform-spesifikke situasjoner. Kan fort være tidkrevende og kostbart og krever kompetanse for utvikling mot ulike plattformer.
  • Vi kan lage separate websider tilpasset mobil: gir deg frihet til å designe for mobil plattform. Du kan benytte deg av mobil-spesifikke rammeverk. Kan være tidkrevende og kostbart. Innebærer “device sniffing” (hva slags enhet er det kunden bruker) og redirects (er det en mobil enhet – send bruker til mobiltilpasset side ala m.domene.no, ipad.domene.no osv).
  • Vi kan tilby mobil-spesifikk CSS via Media Queries: god måte for å sikre at innhold er enkelt tilgjengelig på alle plattformer, med utgangspunkt i den samme websiden. Ofte det beste valget med tanke på tid og budsjett i tillegg til at du kan bruke mye av kunnskapen du allerede besitter og ikke trenger å lære deg et nytt programmeringsspråk. At det er den samme websiten som skaleres for alle enheter er også fordelaktig med tanke på vedlikehold og oppdateringer.

En app eller en egen mobiltilpasset utgave av websiten kan i mange tilfeller være både riktig og nyttig. Men, i veldig mange tilfeller vil du ikke ha mulighet til å gjøre dette, særlig med tanke på de kostnadsrammene du må forholde deg til, og i mange tilfeller vil det heller ikke være ønskelig.

Hvorfor bruke Media Queries?

Media Queries med CSS3

Media Queries med CSS3

Bruk av Media Queries og muligheten til å tilpasse/skalere websiden avhengig av skjermoppløsning kan være den enkleste, raskeste og billigste måten å gjøre det på. Ved å bruke Media Queries vil du ikke måtte utvikle flere separate prosjekter for å kunne tilby brukere av ulike enheter en god opplevelse. Det er den samme websiten du tilbyr brukerne, enten de besøker siden din via en Mac/PC, iPad, iPhone, Android eller hvilken som helst annen enhet. Du sørger imidlertid for å skalere sidene og tilpasse visningen til den enheten kunden din benytter.

Dette gjør utviklingen raskere og billigere, vedlikehold enklere (du publiserer fortsatt kun til en website), og du slipper å sende brukeren til en spesialtilpasset versjon av websiten.

Qross lanserer kurs i hvordan optimalisere websider for mobile enheter

Qross lanserer nå kurset Optimalisere websider for mobile enheter, et kurs hvor du lærer nettopp om mobile strategier, media queries og hvordan du på enklest mulig måte kan gi brukerne dine en god opplevelse av dine websider, også på mobile enheter.

Les mer om kurset her: Optimalisere websider for mobile enheter.

Om Hans Aamodt

Daglig leder, Qross Kurssenter AS. Rangert innen Topp 10 i verden av Adobe Dreamweaver-instruktører og startet som Adobe-sertifisert instruktør allerede i 2000. Jobber til daglig som instruktør og konsulent innen Adobe Dreamweaver, Captivate, HTML(5), CSS(3), WordPress, Contribute, Muse, Google Analytics, sosiale medier m.m. E-post: kurs@qross.no
Dette innlegget ble publisert i Android, CSS3, Dreamweaver, HTML5, iOS, iPad, iPhone, Webdesign og merket med , , , , , , . Bokmerk permalenken.

En kommentar til Optimalisere websider for mobile enheter

  1. Hans Aamodt sier:

    Sjekk ut denne siden for en rekke glimrende eksempler på bruk av Media Queries: http://mediaqueri.es/

Legg igjen et svar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

*

Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>