Magien bak dette kalles media queries og er en ny funksjon i CSS3. For de som måtte bry seg, støttes det ikke av Internett Explorer 8 og eldre nettlesere, men det gjør lite da det vil fungere på de mest populære enhetene som iPhone og Android.

Prøv nå ved å besøke siden med mobil eller gjøre nettleservinduet ditt mindre og se hvordan innholdet automatisk tilpasser seg!

Når man utvikler responsive sider, kan man enten fokusere på mobile first, som vil si at man bygger fra de minste skjermene og opp. Fordelen med det er at man får større fokus på hva som er viktig av innholdet på siden. Eller så kan man bruke en ovenfra og ned-tilnærming, hvor man begynner å designe for desktop for så å skalere ned til mindre skjermer. Denne innføringen vil fokusere på det sistnevnte, da man ofte allerede sitter på en fullverdig side man vil tilpasse.

Tilpassing av siden

Media queries støtter en rekke forskjellige variabler, som høyde og bredde på nettleservinduet, høyde og bredde på selve enheten, om enheten er i landskapsmodus og enhetens oppløsning. Dette gjør det enkelt å tilpasse siden til forskjellige enheter basert på disse variablene. Man kan f.eks. lage en versjon tilpasset små enheter, en til tablets og netbooks, og en for laptoper og stasjonære.

Alt man trenger å gjøre for å begynne er å legge til denne kodesnutten nederst i css-filen:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

All kode som legges inn i denne kodesnutten vil da kun gjelde nettleservinduer som er 480px bred eller mindre og enheter som har en skjermstørrelse på 480px i bredden eller mindre. Her kan man som nevnt velge ut i fra mange forskjellige variabler, og man kan også ha flere slike etterhverandre, slik at siden dynamisk endrer seg etter forskjellige skjermstørrelser eller vindustørrelser.

Hvordan man velger slike bredder kommer an på situasjonen. Noen bygger nettsider basert på grid-system, og da tar man griden som utgangspunkt når man velger breddene. Dersom man ikke har noen bestemte størrelser å følge, må man rett og slett prøve seg frem, og tilpasse breddene etter hvor det er naturlig å bryte innholdet. Dette kan man enkelt gjøre ved å tilpasse størrelsen på nettleserevinduet og se hvilke elementer som går utenfor skjermbildet.

Etter man har bestemt seg for de størrelsene man ønsker, er det bare å begynne å designe for de nye formatene. Det som er kjekt er at den gamle css-en fortsatt gjelder, og man bare overstyrer de elementene man ønsker. For mobile enheter er det f.eks smart å sette bredden på innholdet til auto, slik at innholdet tilpasser seg forskjellige enheter. Her er ett eksempel:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

     #content{
          width: 100%;
     }

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

}

Her er det egentlig bare å prøve seg frem og se hva som ser bra ut. Til slutt må du legge til følgende kode i head i html-filen:

<meta name="viewport" content="width=device-width" />

Dette gjør at siden tilpasser seg bredden til mobile enheter.

Testing av siden

For å se endringene du har gjort, finnes det flere muligheter. Den første er simpleten å endre størrelsen på nettleservinduet. En annen mulighet er å bruke ProtoFluid. Her kan man se hvordan siden vil se ut på iPhone, iPad osv. Merk at den bare tilpasser høyden og bredden på vinduet, så den kan se annereldes ut på den faktiske enheten.

For en dypere innføring i dette emnet anbefaler jeg artiklene til A List Apart og Smashing Magazine. Webdesignerwall har også en god artikkel om emnet, og javascript-hacks for å få det til å fungere i Internett Explorer 8 og eldre nettlesere. Jeg svarer også gledelig på spørsmål i kommentarfeltet.