LiavaagWiki

RWD og AWD (Responsive Web Design)

Responsiv nettside

Responsive nettsider tilpasser innholdet til alle typer skjermstørrelser. Dette er mulig ved at elementene på siden er knyttet til relative verdier, slik at de automatisk kan forminskes eller flyttes for å tilpasse innholdet til et bredt utvalg av enheter. Dette gjøres ved kreativ bruk av media forespørsler (engelsk media queries) i HTML5 og CSS3. Ofte reduseres antallet spalter når bredden på nettsiden minsker. Dette er særlig nyttig på håndholdte enheter som nettbrett og smarttelefoner.

RWD – Responsive Web Design

En responsiv nettside (engelsk RWD – Responsive Web Design) tilpasser innholdet til alle typer skjermstørrelser. Begrepet RWD startet med artikkelen Responsive Web Design av Ethan Marcotte på nettstedet A List Apart (De Graeve 2011). I et stadig skiftende landskapet av enheter, nettlesere, skjermstørrelser og orienteringer av enheter (landskap/portrett), foreslo artikkelen å skape fleksible, flytende og adaptive nettsteder. På en moderne nettleser kan du enkelt se hvordan RWD virker ved å reduserer størrelsen på vinduet. Ideelt skal det ikke oppstå horisontale rullemenyer i nettleseren. Under er tre viktige tekniske funksjoner i RWD, som alle må være implementert (De Graeve 2011):

  • Media Queries (medieforespørsler i CSS) og Media Query Listeners (CSS + JS)
  • Fleksibelt nettbasert layout som bruker relativ dimensjonering
  • Fleksible bilder og medier, gjennom å endre størrelsen dynamisk eller via CSS

 

RWD er et eksempel på plastisitet i et brukergrensesnitt.

AWD – Adaptive web design

Man skiller gjerne mellom responsive og adaptive webdesign (AWD). I motsetning til RWD, som bruker media forespørsler på det samme stialrket for alle skjermtyper, så bruker AWD ulike nettsider med ulike layout for den samme nettside. MediaWiki er et eksempel på adaptiv design, der det kreves et eget programtillegg, eller en egen mobilbase for mobilvennlighet. Hadde MediaWiki brukt RWD-teknikker, så hadde det hold med media forespørsler i stilarket. Selv om AWD bruker såkalt mobile separate fremfor RWD sitt mobile first konsept, så kan man på bildet under se at en adaptiv løsning kan se fint ut på desktopp, laptop, nettbrett og smarttelefon. Det er derfor omdiskutert hva som er den beste løsningen mellom AWD og RWD. Faktisk er det nå mange webdesignere som velger å kombinere relative og absolutte verdier for en bedret brukeropplevelse.

Ulemper med AWD

RWD har noen fortrinn over AWD. For det første har RWD-nettsider bedre søkemotoroptimalisering (SEO) enn AWD-nettsider. Dette av den enkle grunn at der RWD bruker det samme dokumentet for alle skjermstørrelser, så bruker AWD ulike nettsider for de ulike plattformene. Det betyr at rankingen på innholdet i en nettside faktisk må deles på de ulike nettsidene en har i adaptive webdesign. Så selv om mange mobilbrukere besøker innholdet på en mobilvennlig adaptiv nettside, så gir ikke dette mer synlighet på internett for de som søker opp det samme innholdet fra en desktopp, og vice versa. RWD derimot har det fortrinnet at et enormt antall mobilbrukere også bygger opp synligheten for alle andre brukere.

For det andre er RWD-nettsider betydelig mindre enn AWD-nettsider. Responsive nettsider med media forespørsler i stilarket måles i kilobyte. Til sammenligning kan et adaptivt design med programtillegg i for eksempel PHP fort måles i flere megabyte. Det gjør sitt til at responsive nettsider lastes ned betydelig raskere enn adaptive nettsider. Optimaliserte nettsider som lastes ned raskt har ikke bare betydelig bedre SEO-ranking enn trege nettsider, men gir også både raskere og bedre brukeropplevelse.

 

LiavaagWiki bruker MediaWiki med programtillegg for AWD

Se også

Kilder

Hentet fra «https://www.liavaag.org/wiki/index.php?title=RWD_og_AWD_(Responsive_Web_Design)&oldid=269»