Responsivt design
Responsivt design er i vinden som aldri før. Det har vært snakk om det i årevis, men det er først det siste året man virkelig begynner å se nettsteder ta det i bruk for fullt.
Responsivt design innebærer at man designer en nettside slik at den automatisk tilpasser seg ut i fra skjermoppløsning eller størrelse på nettleservinduet.
Bakgrunn
På slutten av 90-tallet kom WAP, mobiltilpassede sider. Mulighetene med WAP var ytterst begrensede, og det lå egentlig nærmere Tekst-TV enn World Wide Web. WAP ble aldri noen stor suksess.
På midten av 2000-tallet ble telefonene mer avanserte. Man fikk fargeskjermer, kamera og GPRS (2G). Tidligere gikk datatrafikken over GSM alene, og med med GPRS fikk man så smått raskere hastigheter. Senere kom EDGE (2,75G), en forbedret utgave av GPRS, som ga ytterligere hastighet.
Det hadde nå blitt mulig å surfe på vanlige nettsider med mobilen, men brukervennligheten var mildt sagt elendig. Da begynte man å lage mobiltilpassede versjoner av nettstedene, gjerne på et subdomene som mobil.domene.no. Disse mobiltilpassede nettsidene var et rent h*lvete å vedlikeholde, da man måtte ta høyde for alle mulige mobiltelefoner og skjermstørrelser.
I januar 2007 lanserte Apple sin iPhone, og noe senere kom de første telefonene med operativsystemet Android. Denne generasjonen telefoner, kjent som de første «smarttelefonene», revolusjonerte World Wide Web. Man fikk også 3G, som innebar mye raskere hastigheter for trådløs dataoverføring. Over tid gikk også prisene på datatrafikk ned, og det var ikke lenger noe problem å være «always on».
Det største fortrinnet med smarttelefonene var navigeringen på web. Man kunne zoome inn og ut, og innhold kunne også automatisk skaleres så det passet til skjermen. De fleste nettsider ville passe perfekt på en slik telefon uten noen ekstra tilpasninger. Det var bare et problem: Denne skaleringen gjorde at innholdet ble svært lite, nærmest uleselig, med mindre man zoomet inn og samtidig mistet det «store bildet».
Her kom responsivt webdesign inn i bildet.
Same shit, new wrapping
En nettside er bygget opp av to hoveddeler; HTML og CSS.
HTML, HyperText Markup Language, definerer selve innholdet. Det kan egentlig sammenlignes med å skrive et helt Word-dokument med kun brødtekst i Times New Roman. (Det er forresten ikke helt korrekt, da HTML faktisk kan inneholde svært mye mer enn bare brødtekst... Jeg vil bare få frem et poeng.)
CSS, Cascading Style Sheets, definerer hvordan innholdet skal se ut. CSS kan for eksempel definere at alle overskrifter skal være i blå skrift med store bokstaver, at bakgrunnsfargen skal være lys grå og at alle bilder skal ha en rosa og 10 piksler bred ramme rundt seg.
Nedenfor er dette illustrert med kun HTML til venstre, og samme HTML, men med CSS, til høyre:
Det finnes mange tilnærminger til responsivt design, men det er først og fremst «dynamisk» CSS som benyttes.
Er bredden på nettleservinduet over en viss størrelse gjelder et sett med CSS-regler. Er bredden mindre enn viss størrelse gjelder et annet sett med CSS-regler.
Slik kan man tilpasse selve utseendet på nettsidene, mens innholdet i bunn og grunn er det samme.
En annen stor fordel er at man har én URL å forholde seg til for det samme innholdet. Alternativet er å ha www.domene.no/siste-nytt, mobil.domene.no/siste-nytt og tablet.domene.no/siste-nytt. Å ha flere forskjellige URL-er for det samme innholdet skaper utfordringer om noen velger å dele mobilversjonen på for eksempel Facebook. Når noen følger denne linken kan de risikere å komme til en mobiltilpasset nettside med en stasjonær PC, og få servert en nettside som ser ganske håpløs ut. Et annet poeng er at dette går ut over søkemotoroptimaliseringen; det er bedre å ha én side blant topp 10 i søkeresultatene enn å ha to sider blant de neste 10 resultatene.
Mobile first
«Mobile First» er en strategi innenfor webutvikling som skiller seg veldig fra tidligere praksis.
Tidligere utviklet man nettsider som var tilpasset en «vanlig» skjermoppløsning. Det startet på 90-tallet med oppløsninger som 800x600, og så kom et nytt tusenår og oppløsninger som 1024x768 og oppover. Og så ble det kaos, flere og flere fikk widescreen og det dukket opp utallige forskjellige skjermoppløsninger.
Man begynte også å lage avansert funksjonalitet som var avhengig av teknologi som flash og Java, og tyngden på nettsidene krevde stadig kraftigere bredbånd.
Parallelt med dette begynte man å lage avarter av nettsidene som var tilpasset mobil, men det ble ingen enkel oppgave. Man måtte ta noe som var stort og omfattende og strippe det ned til noe lite og enkelt.
Mobile First-tankegangen gjør det motsatt: Man tar utgangspunkt i en mobiltilpasset side, liten og enkel, og så bygger man ut i fra denne nettsider som er tilpasset andre skjermoppløsninger og teknologier.
Google har i flere år brukt denne strategien for alle sine nye prosjekter. Regelen er: Kommer du til en Google-side skal den fungere på en mobil. Fungerer det ikke på mobil er ikke tjenesten klar for lansering.
HTML-koden må være tilpasset responsivt design
Det er essensielt for å oppnå responsivt design at oppbyggingen av et HTML-dokument legger til rette for dette.
Når en side vises på desktop eller tablet vil det kanskje være 2-3 spalter eller kolonner med innhold i bredden. Når den samme nettsiden og det samme innholdet vises på en mobil vil de 2-3 spaltene eller kolonnene vises under hverandre, en i bredden.
Rekkefølgen på de forskjellige spaltene eller kolonnene i HTML-strukturen bør derfor være likt som det man vil oppnå på mobil, hvis ikke vil man kunne ende opp med å måtte flytte rundt på innholdet og endre HTML-strukturen med JavaScript, noe som ikke er en god løsning.
Meta viewport
For å unngå at sidene skalerer seg automatisk, slik det for eksempel gjøres på en iPhone legger vi til denne i <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dette gjør at sidene vises i sin faktiske størrelse, og at nettleseren ikke prøver å tilpasse den ved å zoome ut.
Hvordan jeg har gjort det med Hardcode.no
Dette nettstedet har et responsivt design. Jeg har brukt «media queries» i CSS for å oppnå dette.
I praksis har jeg tre forskjellige sett med CSS-regler, selv om det meste av CSS er felles for alle tre.
Et sett benyttes for de med bredde på nettleservinduet større enn 930 piksler. Da er det et tomrom på begge sider av innholdet.
Et annet sett benyttes for de med bredde fra 620 til 930 piksler. Da flytter jeg høyre kolonne med litt diverse innhold ned og under selve innholdet på den aktuelle siden. Her er det også et tomrom på begge sider av innholdet.
Er bredden lavere enn 620 piksler angir jeg at alt innholdet skal skaleres slik at det bruker hele bredden. Bilder blir også skalert ned med CSS her. Er bredden lavere enn 320 piksler stopper jeg skaleringen og lar det heller dukke opp et horisontalt rullefelt nederst i nettleseren.
Denne skissen viser de tre utseende jeg benytter:
Media queries
Media queries i CSS innebærer at man angir regler som bare skal benyttes når visse kriterier er oppfylt. Et slikt kriterium kan være at bredden på nettleservinduet er mindre enn x antall piksler. Et annet kriterium kan være at innholdet vises via projektor på storskjerm, eller at det vises på en utskrift.
I forbindelse med responsivt design er det bredden på nettleservinduet som er av interesse.
Her er et eksempel på slik CSS med Media queries:
<style>
#detRetteElement {
width: 930px;
background: red;
color: white;
}
@media all and (max-width: 930px) {
#detRetteElement {
width: 600px;
background: green;
}
}
@media all and (max-width: 620px) {
#detRetteElement {
width: 100%;
background: blue;
}
}
</style>
Hvordan dette fungerer i praksis kan du se på denne enkle testsiden
Med litt kreativitet og sans for orden kan man med disse reglene oppnå mye. Jeg for min del viser to spalter eller kolonner med innhold når bredden på vinduet er stort. Da har venstre del float: left; og høyre del float: right;.
Når bredden er mindre bruker jeg clear: both;, slik at de opprinnelige spaltene vises under hverandre i stedet.
I praksis blir da de tre utseendene slik:
Sammenligning visuelt
Jeg avslutter med to laaange skjermdumper her. Til venstre er Hardcode.no vist i Google Chrome på en bred skjerm. Til høyre den samme siden vist i Safari på en iPhone.
Her kommer det tydeligere frem hva som skjer på en mobil; Innholdet som på desktop ligger på høyre side, legger seg nederst ved visning på mobil:
