Hvordan lage en nettside som automatisk tilpasser seg forskjellige skjermstørrelser og mobile enheter
Jeg har brukt noen timer til å tilpasse bloggen forskjellige skjermstørrelser, og det begynner å bli ganske bra. Du kan teste det ut nå ved å enten besøke bloggen med en mobil eller gjøre nettleservinduet ditt mindre og se hvordan innholdet automatisk tilpasser seg.
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.
Tilpassing av siden
Dette er litt tekst som beskriver neste seksjon
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.
Her kan man velge ut i fra mange forskjellige variabler, og man kan også ha flere slike etterhverandreAll 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.
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.
Testing av siden
Dette er litt tekst som beskriver neste seksjon
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.
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.
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.
Resultatet av arbeidet
Dette er en avsluttning av skrivetFor å 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.