Responsivt design revisited

Adaptivt vs. responsivt design

Først litt om ulike måter å tenke på når du skal lage nettsider som fungerer på flere enheter. Det er hovedsakelig to alternativer: En adaptiv nettside gir deg ulike utgaver av nettsiden alt etter hvilken enhet du bruker, mens en responsiv side bruker den samme utgaven uansett enhet, men endrer størrelser og stokker om på elementer avhengig av skjermbredde.

Hørtes dette gresk ut? Går du inn på www.dna.no på PCen din (desktop), og forminsker vinduet, ser du at siden ikke er responsiv. Går du inn på samme siden fra smarttelefonen din, vil du derimot få en mobiltilpasset versjon av siden. Dette er dermed en adaptiv side. Prøver du det samme med www.frp.no , vil du se at nettsiden justerer seg etter skjermbredden også på desktop, altså er det en responsiv side.

En adaptiv side kan være en billigere løsning (og enkelte mener jo at billigst = best?), fordi du tilpasser siden kun til noen angitte enheter (typisk desktop, ipad, iphone). Da kan du f.eks ha alle bilder og elementer i tre faste størrelser, og tada – du er ferdig. Utvikler du siden responsivt, er det derimot ”uendelig” med størrelser å tenke på, fordi størrelsene er ”flytende” og justerer seg etter størrelsen på nettleser-vinduet. Her kan du se et godt eksempel på dette. En åpenbar fordel med dette er at man ikke trenger designe for en spesifikk skjermstørrelse, og dermed kan man være mer fleksibel med tanke på ulike enheter og fremtidige enheter. Et responsivt design bruker gjerne også grids i bunnen, for å holde bedre kontroll på layout i ulike størrelser.

Selv om responsivt design gjerne er flytende, pleier man også definere ulike ”brekkpunkter” hvor plasseringen av elementer vil endres, f.eks at innholdet listes mer vertikalt ved små skjermbredder (som mobil).

Generelt kan man si at responsivt design er å foretrekke foran adaptivt, men det er også et spørsmål om hva du har behov for. Enkelte nettaviser velger f.eks en adaptiv løsning, fordi man da kan bygge opp innholdet på en annen måte for mobile enheter, og bruke andre annonser.

Henger du med? La oss for all del bli litt mer tekniske:

Grids

For å få bedre kontroll over innholdet, kan man definere et sett grids (rutenett) å strukturere innholdet etter. Slik sørger man også for at innholdet ”står på linje” visuelt sett.

Du kan selvsagt bygge et slikt grids-oppsett selv, men hvorfor finne opp hjulet på nytt? Det fins allerede flere gode verktøy som forenkler dette arbeidet. Ta en titt på Foundation, Gridpak, Golden Grid System, eller Bootstrap.

Slike grids-verktøy fungerer slik at du ved hjelp av enkel html-kode kan definere rader og kolonner i oppsettet, og hvor mye av radens bredde en kolonne skal bruke. Verktøyet du legger ved siden gjør dette så om til (responsive) grids.

<div class="row">
 <div class="col-lg-8">8</div>
  <div class="col-lg-4">4</div>
</div>
<div class="row">
  <div class="col-lg-4">4</div>
  <div class="col-lg-4">4</div>
  <div class="col-lg-4">4</div>
</div>

(Eksempel fra Bootstrap)

I fremtiden vil vi nok se at grids løses kun ved bruk av CSS, uten behov for ekstra verktøy. Såkalte «Flexbox» i CSS3 er allerede støttet i de nyeste nettleserne inklusiv Internet Explorer 10, men mangelen på bakoverkompabilitet betyr at dette blir vanskelig å bruke i praksis foreløpig. Les mer om Flexbox her.

Men hva med bildene mine?

Responsive nettsider blir ikke fullt så bra, om ikke også bildene du tok av deg selv foran speilet på badet også blir responsive med fleksibel størrelse. Den enkleste løsningen er å angi at bilder skal ha en maks-bredde på 100% og sette automatisk høyde slik at bildet skalerer proporsjonalt:

img {
max-width: 100%;
height: auto;
}

Sånn, det var det, da kan du ta en velfortjent pils… eller kan du det? Neida. Det er nemlig noen flere ting man i det minste må ha tenkt over. For det første – er det lurt at mobile enheter med begrenset båndbredde laster ned de samme bildene som desktop, og bare skalerer de ned? Eller er det smartere å bruke mindre versjoner av store bilder, ved bruk av mindre enheter? Og hva med Retina Display, som har dobbel pikseltetthet, slik at bildene av deg foran speilet fremstår enda mer uskarpe enn de egentlig er?

Den ideelle løsningen er å ha tre versjoner av alle bilder: Små bilder, normal størrelse (1x), og dobbelt størrelse (2x) for Retina. For Retina kan du da bare laste opp et bilde i dobbel størrelse, og la det skalere ned 50% slik at det blir dobbelt pikseltetthet. Hvilken størrelse du bruker på bildene i de ulike skjermbreddene er noe du typisk løser med CSS-kode og media queries.

Det fins også stadig flere verktøy som automatiserer dette noe, og laster bilder basert på hvilken enhet du sitter på, uten at du må spesifisere alt manuelt. HiSRC er en jQuery-plugin som lager tre størrelser av alle bilder, og basert på din enhets størrelse og nettverks-hastighet, viser det bildet som er mest passende.

Sencha.io er en snedig tredjeparts-løsning som det kan være verdt å se mer på. Den bruker egne servere til å endre størrelse på bildet ditt og gi brukeren det bildet som passer best. Alt ved hjelp av en enkel liten modifisering av html-koden:

<img src="http://src.sencha.io/http://www.mitt-domene.no/bilder/tupe.jpg" alt="Bilde av min tupé" />

Nøkkelen her er det første tillegget på adressen, «http://src.sencha.io/». Ulempen med denne løsningen er at bildene dine blir avhengig av en tredjeparts nedetid og tekniske leveranse.

Det fins også en haug andre ulike løsninger for bildebruk – noen som bruker HTML5-attributter for å angi bildestørrelser, CSS, eller javascript-løsninger. Det viktigste er likevel å være bevisst utfordringene, slik at du kan vurdere hva som er hensiktsmessig på din nettside.

Innspill?

Hvilke løsninger bruker du? Mener du at andre løsninger fungerer bedre? Vet du bedre? Slå deg løs i kommentarfeltet nedenfor!