Hvad er Responsive Web Design?

(6) Kommentarer9. marts 2012 under Convert, Konverteringsoptimering

Hvad er Responsive Web Design?
4.33(86.67%) 9 votes

Nutidens internetbrugere benytter i mindre grad kun computere, når de browser. I løbet af de seneste par år er antallet af tablet- og smartphone-brugere eksploderet. Antallet af verdensomspændende smartphone forsendelser har netop overgået forsendelser af PC’ere. Dette har sat krav til virksomheder og designere, da websites gerne skulle vises optimalt på flere forskellige platforme. Spørgsmålet er, om din virksomheds website er optimeret til dette?

Den nye standard

Du kender det sikkert; ikke-mobile websites hvor du skal zoome og scrolle med fingrene på din mobile platform, indtil teksten er stor nok til at læse, og derved bliver zoomet for meget til, at du har et reelt overblik. En tilgang til dette problem hedder Responsive Web Design (RWD), og betyder i al sin enkelhed, at websitet justerer sig, til den skærmstørrelse brugeren anvender. Dette gør sig især gældende med smartphones og tablets, der kan vendes både vertikalt og horisontalt, og dermed ændrer opløsning på splitsekunder.

Det sidste år har der været meget snak omkring RWD, og intet tyder på, at det skulle ende som en døgnflue. Jeg vil påstå, at RWD er kommet for at blive, og snart anses som en standart inden for webdesign og -udvikling – specielt den hastige udvikling, af nye platforme og opløsninger, taget i betragtning.

Hvorfor er Responsive Web Design anderledes?

RWD består af tre overordnede elementer: En flydende struktur, fleksible billeder og medieforespørgsler. Dette er ikke at forveksle med Adaptive Design, som ikke indeholder flydende struktur og fleksible billeder, men hovedsageligt bruges til at tweake eksisterende sider.

  • Flydende struktur

Den flydende struktur gør sig gældende, når vi snakker skærmopløsning. På en stor widescreen kan dit website f.eks. fylde 4 kolonner i bredden, hvilket kan reduceres til 2 kolonner på en tablet, eller 1 kolonne på en smartphone (se billede). Dit indhold bliver altså distribueret fleksibelt i forhold til den givne opløsning, til forskel fra det traditionelle design hvor man ender med en ekstra horisontal scroll-bar, så snart website-opløsningen overskrider skærmopløsningen.


Dette eksempel er lavet af Ethan Marcotte – forfatteren til bogen “Responsive Web Design”. Det viser hvordan samme website tilpasser sig forskellige opløsninger.
Screenshot 1.: visning på stor widescreen. Screenshot 2.: visning på bærbar computerskærm. Screenshot 3.: visning på smartphone.
  • Fleksible billeder

Når dit indhold bliver distribueret på færre kolonner, er det vigtigt, at dine billeder følger med i størrelsen, da de ellers vil ende med at fylde hele skærmen. Billederne skaleres sammen med opløsningen, så de (på trods af en ellers høj opløsning) stadig vises proportionelt med resten af siden, selvom man browser på en smartphone.

  • Medieforespørgsler

Medieforespørgsler opsætter nogle betingelser for sidevisningen. Når du åbner et website på din smartphone, kan man f.eks. sætte nogle betingelser for, hvad der skal vises alt efter opløsningen. Hvis skærmopløsningen er 480 pixels bred (som på de fleste smartphones) eller derunder, kan man sørge for kun at vise visse, relevante, ting. Det kunne f.eks. være, at man ville fjerne banner reklamerne på mobile platforme, men vise dem på større stationære skærme, eller som i eksemplet for oven; fjerne billedet i toppen hvis det ikke har relevans på en lille skærm.

Er Responsive Web Design det rigtige for dig?

Før din virksomhed kaster sig ud i et website baseret på Responsive Web Design, er det en god idé, at overveje præcis, hvad du vil have ud af ændringen. Bare fordi det er en ny teknologi, er det ikke sikkert det passer dine præferencer, både hvad angår tid, budget og brug.

Her er en række ting du bør overveje:

  • Vil det tilslutte sig dit websites overordnede mål?
  • Forventer dine brugere den samme oplevelse og indhold, når de besøger dit website på en mobil enhed, som på en computer?
  • Har du ressourcer nok, til at ændre dit website radikalt?

Ting der taler for, at du skifter til en side med RWD:

  • En løsning til det hele – Det er unægteligt smart at du ikke behøver at skræddersy flere versioner af dit website, til samtlige platforme og opløsninger der findes. Én version til alle platforme. Det gør det mere smidigt for brugeren, og lettere at vedligeholde for dig senere.
  • Slip for forskellige links – Et af problemerne ved at have et separat mobilsite og et desktop website, er evnen til at dele links med andre. Der er ingen garanti for, at et delt mobil site bliver set på en mobil enhed, af dem der klikker på linket, og omvendt. Dette kan give vidt forskellige oplevelser af dit website.
  • Mange opløsninger – Selv hvis tilfældet var, at dit website kun blev set på computere, er det ikke engang sikkert at opløsningen ville passe. Mange folk benytter sig ikke af fullscreen i browseren når de har vinduer åbne, men med RWD slipper man alligevel for den ekstra horisontale scrollbar hvis opløsningen ikke lige passer.
  • Design til mobil først – Luke Wroblewski har fremsat nogle overordnede grunde til at designe til mobil før desktop. Dette er i praksis et generelt design krav når det kommer til RWD, og samtidig er det kun de mest relevante ting, med fokus på brugervenlighed, der kommer på dit website.

Ting der taler imod RWD på dit website:

  • Udviklingstid og ressourcer – At lave sit website “responsive” er forholdsvis komplekst. Har din virksomhed tid til at implementere det inden for givne deadlines, og har du ressourcerne til at gøre det, eller skal du hyre eksterne udviklere?
  • Browser kompatibilitet – Med HTML5 og CSS3 er det blevet meget lettere at lave responsive websites, men der findes stadig en del kompatibilitets problemer når du benytter dig af disse sprog, og du kan derfor være tvunget til at benytte alternative metoder – hvilket leder til et nyt problem…
  • Loading tider – Internet forbindelsen på mobile enheder, er noget langsommere og mere ustabile, end på computere. RWD kræver samtidig flere server-kald pga. kryds-platform og kryds-browser kompatibilitets problemer. At ændre på medier (f.eks skalering af billede størrelse) kræver også ekstra server kald, ellers vil skalering af store billeder kræve ekstra loading tid. Dette skyldes at en smartphone stadig skal loade billedet som 700×700 pixels selvom det kun bliver vist på en 320×480 smartphone skærm, og hvis du har flere af den slags billeder på dit site, kan dette tage lang tid på en mobil forbindelse.
  • Forskellige sites, til forskellige mål – Ofte vil målet med et mobilsite (typisk en specifik kampagne eller information)  ikke være det samme som med ens overordnede website (oftest generel information og dybere struktur). Derfor kan der også være fordele i at holde indholdet af de to versioner adskilt.
  • Billedeskalerings restriktioner – Skalerbare billeder er en stor del af RWD, dette kan dog blive et problem i forhold til reklamer. Det er værd at tænke over de mange standart mål der findes for web-reklame, herunder banner reklamer, da en skalering eller beskæring af disse kan medføre en forvrængning

Som med alle andre beslutninger, er det vigtigt at gøre op, om det vil komme dig til gode. Det samme gælder for designet af dit website, og det er derfor vigtigt at klarlægge præcis hvilke mål og funktioner, dit website skal opfylde.

Om forfatteren

Tobias

Inbound Copywriter

Tobias hjælper Inbound Teamet med grafik, at skrive blogindlæg og udforme infographics.
Se profil ›

Hvad er Responsive Web Design?
4.33(86.67%) 9 votes

Tags: , , , ,

Kommentarer

  1. Lars siger: 11. april 2012

    Til udviklerne eller de teknisk interesserede har Brandon Satrom skrevet en kode-orienteret beskrivelse af hvordan responsive web design kan implementeres: http://atco.re/HKbrzB

  2. Mads Møller siger: 3. maj 2012

    Hej Tobias
    Kan du sige hvad forskellen er mellem Responsive og Adaptive design. Jeg synes du forklarer Responsive meget fint, men er det forskelligt til Adaptive?

  3. Bo Møller siger: 20. juni 2012

    Godt indlæg igen!

    Responsive er uden tvivl virkelig fedt, men i nogle tilfælde giver det også god mening at lave forskellige sites til forskellige platforme – altså ikke kun baseret på browser-størrelse, men også afhængig af platform.

    Jeg kan rigtig godt lide jeres liste af “ting der taler imod RWD”.

  4. 5 markedsførings udfordringer siger: 15. marts 2013

    […] og indholdet skal tilpasses direkte til platformene. En løsning til dette kan være via responsive design eller ved at skabe native mobil […]

  5. […] anbefaling til visning af dit website på mobile platforme er at have et website, der er “responsive” (dvs. ét domæne til alle typer enheder). Dog kan det være en ressourcekrævende process, at […]

  6. […] kan enten lave et separat mobilsite eller benytte dig af responsivt webdesign. Her er det vigtigt at tænke på de mobile SEO-fordele, der kan være ved de forskellige […]

Få den ultimative guide til Landingpage optimering

Vi giver dig den ultimative guide til at optimere dine landingpages. Guiden gennemgår bl.a. de otte mest givende steder at optimerer samt et helt afsnit omkring optimering af sider til Mobil.

Følg Atcore


Recommend on Google

Mød Atcore

Atcore er specialiseret i at optimere digitale forretninger. Vi hjælper dig med at få mest muligt trafik til din forretning, sikrer at flere besøgende foretager værdiskabende handlinger, og skaber loyale kunder. Vi er et senior Team med de rette ambitioner og erfaringer, til at skabe en succes sammen med dig!

Mød dit Atcore Team