Responsiv webdesign

Uttrykket "Responsive Webdesign" ble lansert for webdesignere flest med Ethan Marcotte's artikkel i nettmagasinet A List Apart i mai, 2010. Utfordringen som var utgangspunktet for artikkelen er de ulike måtene nettsider blir lest på, med skjermstørrelser som hovedutfordring. Selv jobber jeg på en 24" bredskjem på kontoret, en bitteliten laptop hjemme, og leser nyheter på min iPhone. En "normalt" designet nettside vil se vidt forskjellig ut på de forskjellige skjermene.

Ethan mener at siden han som designer ikke kan vite noe som helst om hvordan hans design blir brukt, er han nødt til å legge til rette for de mest sannsynlige scenarioene. Ved å gjøre nettsidene "responsive". Dette oppnår vi ved å gi nettleseren forskjellige regler for visning av innholdet ettersom hvor bredt vinduet i nettleseren er. Dette er en forholdsvis enkel og godt dokumentert metode, som gir nettleseren denne informasjonen:

• Dersom vinduet i nettleseren er maksimum 960 pixler bredt > vis innholdet i 4 kolonner
• Dersom vinuduet er maksimum 700 pixler bredt > vis innholdet i 2 kolonner
• Og dersom vinduet er 480 pixler bredt > vis innholdet i 1 kolonne og menyen som en drop-down

Prøv å endre bredden på din nettlesers vindu nå, så ser du hva dette betyr i praksis!

Se flere eksempler her

Dette er ikke det samme som en "iPhone-versjon" av nettsiden din, men en fullverdig visning av nettsiden som er tilpasset det miljøet du ser den i. En mobilversjon av en nettside er i det hele tatt en veldig dårlig ide. Det finnes flere meninger om akkurat det, men opinionslederne (og vi i Apasje) argumenterer sterkt imot å ha en egen versjon av nettsidene tilpasset mobil, eks: http://m.dt.no/. Selv om det finnes en link til å se "fullversjon" av nettsidene, er det tatt et valg for deg, uten at du er blitt spurt.

Ved siden av at du utestenges fra "fullversjonens" innhold, er det andre - åpenbare - problemet selve URL'en til sidene. I dag deles linker i uendelig mange situasjoner som f.eks. via e-post, sosiale medier som Twitter og Facebook, og vet du hvordan de linkene vil bli brukt? Nei, det vet du ikke... Så dersom jeg deler mobil.domene.no/artikkel med deg, og du klikker på linken på din stasjonære PC, vil du få opp en smal, unnselig sak i hjørnet av skjermen din. Dersom du deler domene.no/artikkel med meg, og jeg trykker på linken på min iPhone, er det ikke engang sikkert at nettsiden finner artikkelen.

Mer enn tilpassing

Men uttrykket "Responsive webdesign" gjelder så mye mer enn å tilpasse designet forskjellige skjermstørrelser. Det handler også om å bygge:

• solide løsninger som er tilgjengelig for svaksynte og blinde
• nettsider som leses korrekt og optimalt av søkemotorer
• nettsider som enkelt kan oppdateres og vedlikeholdes i fremtiden
• å se på internett som et levende medium som stadig utvikler seg!