"Responsive webdesign" og "Mobile first" – hva er det?

Publisert: 19.12.2012
Responsive design - illustrasjon: spectra.no

Responsive design betyr at websiden bruker såkalte media queries for automatisk å tilpasse designet til skjermens størrelse. Tilpasningen kan skje trinnvis, trinnløst (fluid) eller i en kombinasjon av disse. Hvis du har en moderne nettleser, kan du ta tak i nettleservinduet og gjøre det smalere. Da vil du se at denne siden tilpasser seg.

Tanken er at man skal få en god opplevelse, enten man bruker en PC, et nettbrett eller en smart-telefon. En god opplevelse oppnår man som regel ved å begrense behovet for å forflytte seg (skrolle) horisontalt og sørge for at teksten er leselige på flere plattformer uten å måtte forstørre (zoome). Ulike antall piksler i bredden på skjermen eller nettleservinduet utløser ulike endringer i designet. Det betyr at elementer som bilder og blokker forandrer posisjon, skjules, vises og skaleres. På den måten kan også innhold ha ulik prioritering på ulike enheter. 

Man kan si at sidens design responderer og tilpasser seg brukerens skjermstørrelse (skjermoppløsning). Derav begrepet "Responsive". En trinnvis tilpasning til skjermen omtales ofte også som Adaptive, mens det ofte forventes at et Responsive design skal tilpasse seg mer glidende/trinnløst (eng. fluid).

Responsive design var listet som nr 2 i artikkelen "Top Web Design Trends for 2012" i magasinet .net - et av de største og viktigste magasiner for webdesignere og -utviklere. Mange autoriteter innenfor webdesign mener derimot at responsive design ikke er en trend, men heller webdesign gjort riktig. Mobile enheter utgjør en større og større del av antall besøkende, så responsive design er kommet for å bli.

Mobile first

"Mobile first" er en tilnærming som stammer fra før "responsive design" ble tatt i bruk. I stedet for å forsøke å rette på eller pynte på sider for visning i mindre avanserte nettlesere, valgte man å ta utgangspunkt i de enkleste nettleserne som ikke forsto CSS og Javascript, og bygge videre på dette. Også etter at man har fått avanserte måter å skille ulike platformer og nettlesere på, har dette vist seg å være en god tilnærming. Ut fra en veldig enkel struktur forbedrer man designet for smart-telefoner og vanlige PCer, i stedet for å forsøke å lage ulike tilpasninger for enklere nettlesere.

Web

Vi lager websider og publiseringsløsninger for web.

Grafisk Profil

Vi utvikler logo og andre elementer i bedriftens grafiske profil.

Produksjon

Vi produserer annonser, brosjyrer, kundeaviser og alt innen trykksaker.

Prosjekt

Vi setter sammen et team av ulik spisskompetanse for håndtere store og små prosjekter