Alt, hvad du har brug for at vide om responsivt design og skærmopløsning

Estimeret læsetid: 11 minutter

Det tager kun 0.05 sekunder for besøgende at danne sig en mening om din hjemmeside, og en stor del af førstehåndsindtrykket handler om design.

Mange mennesker benytter flere enheder og skærme dagligt, og derfor er det naturligt, at der vil være forskellige meninger om, hvordan din hjemmeside ser ud og fungerer.

En nøgle til at optimere de forskellige oplevelser er at forstå skærmopløsningen – den er nemlig afgørende for, hvordan din hjemmeside eller webshop fremstår på de forskellige skærme, som dine kunder bruger.

I denne artikel vil vi se nærmere på det grundlæggende i skærmopløsning og responsivt design og give vores bud på, hvorfor koncepterne er afgørende for optimering af din UX og konverteringsrate – og hvorfor det derfor er vigtigt for dig at forstå dem.

Hvad er skærmopløsning?

Skærmopløsning refererer til det antal af pixels, der vises på en skærm, og bliver ofte omtalt som:

(horisontale pixels) x (vertikale pixels)

For eksempel er 1920x1080 den mest anvendte skærmopløsning for stationære computere. Det vil altså sige, at skærmen viser 1920 pixels horisontalt og 1080 pixels vertikalt.

Skærme med høj opløsning viser flere pixels (og derfor flere elementer på hjemmesiden) end skærme med lavere opløsning.

Skærmopløsningens mål må dog ikke forveksles med størrelse, der refererer til skærmens fysiske størrelse (eksempelvis bredde x længde i tommer). Enheder med samme skærmstørrelse kan altså have forskellig opløsning, og på samme måde kan forskellige skærmstørrelser vise samme opløsning.

Skærmens størrelse påvirker dog den optimale skærmopløsning for en enhed - en mindre skærm har nemlig brug for færre pixels (lavere opløsning) for korrekt visning af elementer, mens en større skærm skal kunne vise en højere opløsning for at sikre skarpe billeder og andre visuelle elementer.

Skærmindstillinger og skærmopløsning

Forskellige enheder har forskellige præ-konfigurerede indstillinger, som har indflydelse på, hvordan din hjemmeside eller webshop vises.

For eksempel kan en mellemstor bærbar computer normalt vise 1920x1080 pixels - den samme opløsning som de fleste almindelige stationære skærme. Da en bærbar computer har en mindre skærmstørrelse, vil en 1920x1080-opløsning gøre elementer ‘mindre’ på skærmen, og det påvirker brugervenligheden og læsbarheden.

For at løse problemet "zoomes" de fleste bærbare computere til en anbefalet indstilling, der passer til skærmens størrelse. Det gør elementerne større og teksten mere læsbar.

I eksemplet på standardindstillingerne ovenfor har den bærbare computer en opløsning på 1920x1080, men er indstillet til en anbefalet skala på 150%. På den måde vises elementer på skærmen korrekt i forhold til den fysiske skærmstørrelse (cirka 12,2x7 tommer).

^{(Den bærbare computer fra eksemplet ovenfor).}

For at kende eksemplets aktuelle skærmopløsning kan du bruge formlen:

Skærmopløsning / (skalering/100)

Så: 1920 horisontale pixels / (150/100)

= 1920 / 1.5 = 1280.

Og 1080 vertikale pixels / (150/100)

= 1080 / 1.5 = 720.

I vores eksempel viser den bærbare computer 1280 pixels vandret (dvs. langs bredden) og 720 pixels lodret (dvs. langs længden uden at scrolle), skaleret til 150% fra den oprindelige opløsning på 1920x1080.

Det er også vigtigt at bemærke, at da den oprindelige opløsning er højere, er det zoomede display også meget skarpere sammenlignet med en skærm med en standardopløsning på 1280x720 på 100%, på grund af densiteten af pixels.

Her er den samme bærbare computer i 100% skalering (bemærk, hvordan elementerne på siden er mindre).

Responsivt design

Responsivt design er standardmetoden til design af hjemmesider i dag.

En responsiv hjemmeside betyder dybest set, at den responderer på den enhed, den bliver vist på. Den justerer altså layout, placering og størrelse af indholdet og elementerne i overensstemmelse med enheden, så siden ser godt ud uanset, hvilken skærm den bliver vist på.

Breakpoints

En standardimplementering af responsivt design gør det muligt for en hjemmeside automatisk at skalere og tilpasse sig den skærm, den vises på. Det betyder, at uanset om siden vises på en skærm med høj eller lav opløsning, vil layoutet og den relative placering af elementer på siden være mere eller mindre ens.

Det gælder generelt for en række skærme med kun enkelte størrelsesforskelle - for eksempel en desktop og en bærbar computer. Men når du går fra stor til lille (eksempelvis som fra et skrivebord til en smartphone), er der visse punkter, hvor sidelayoutet skal justeres.

Et layout med to kolonner kan passe fint til større skærme, men når du begynder at skalere ned, vil kolonnebredderne på et tidspunkt være for snævre til at indholdet vises korrekt. Derfor er det nødvendigt at ændre layoutet til kun én kolonne.

^{(Eksempel med to kolonner)}

^{(Den samme side på en mobil-skærm ændret til én kolonne).}

I responsivt design er der såkaldte "breakpoints", der markerer det punkt, hvor en opdatering i layout er nødvendig for at opretholde en god brugeroplevelse.

Der tages normalt højde for “breakpoints”, når designet skifter fra desktop til tablet eller mobil.

I dette eksempel på en desktop-visning er teksten relativt stor, og der er meget plads til elementerne på siden.

Når du begynder at skalere ned til mindre størrelser eller lavere opløsninger, er det nødvendigt med responsivt design for at sikre, at skriftstørrelsen og billederne også bliver mindre. Det sikrer opretholdelse af layoutets generelle udseende, og du undgår en grænseflade, hvor teksten bliver for stor, og skærmen bliver overfyldt med “for store” elementer.

Lad os se desktop-layoutet ovenfor i en tablet-opløsning:

Mens dette eksempel på tablet-layout er responsivt i den forstand, at det er nedskaleret korrekt for at passe til den mindre skærmstørrelse, er der specifikke problemer med det, der kan påvirke brugeroplevelsen (se noter i skærmbilledet).

Her er en opdatering af layout nødvendig.

I dette eksempel er elementerne blevet omarrangeret en smule - uden at det generelle designkoncept er ændret - så det bedre passer til enheden og skærmopløsningen.

Det er gjort ved at tilføje et breakpoint ved 768x1024 opløsninger (og derunder).

Hvordan vælger du, hvilke breakpoints du skal tilføje?

De mest ideelle breakpoints for dit design afhænger både af din hjemmesides indhold og en række andre elementer. Din webdesigner og udvikler skal kontrollere, hvordan din hjemmeside ser ud, når den skaleres op eller ned til forskellige opløsninger. På den måde kan man beslutte, hvornår der er behov for at justere layoutet.

Som nævnt ovenfor er de normale breakpoinst:

Desktop

• 1920x1080 (standard desktop-monitorer)
• 1440x1280 (almindelig opløsning på Macbooks)
• 1280x720 (mindre bærbare computere)

Tablet

• 1024x768 (landskabsmodel)
• 768x1024 (portrætmodel)

Mobil

• 375x667 (iPhone 6s og lignende størrelser)

I nogle tilfælde kan du endda tilføje “mindre vigtige” breakpoints, hvor det ikke er nødvendigt at lave store ændringer af det overordnede layout, men hvor din designer og/eller frontend-udvikler med fordel kan justere mindre ting som “padding”, marginer eller skriftstørrelse. Derved opnår du bedre UI/UX.

Kend dine brugeres top-skærmopløsning

For bedre at designe til dine faktiske brugere, er det en fordel at kende de enheder og skærmopløsninger, som bruges til at besøge din hjemmeside eller webshop. Med de oplysninger kan du optimere dit design til den skærmopløsning, der bruges af flest besøgende. Hvis du har en Google Analytics-konto, er det ret nemt at finde ud af.

(Kilde: juli 2020 - Engelsk Analytics):

1. Fra dit Analytics dashboard, gå til Audience > Technology > Browser & OS
2. Klik “Secondary dimension” dropdown-menuen og søg “Screen resolution”, klik derefter tilføj i din menu.
3. For at sortere efter mest populære, skal du blot klikke på “Users” kolonnen.
4. Du kan forbedre dine data yderligere ved at vælge et datointerval i øverste højre hjørne. Et års data er et godt referencepunkt.

^{(Analytics data-eksempel på top skærmopløsninger).}

Forstå Retina-skærme

Retina er et udtryk, der er opfundet af Apple for skærmopløsningen på dets enheder.

I en nøddeskal har en Retina-skærm dobbelt så mange pixels (vandret og lodret), så den i bund og grund har fire gange det antal pixels som en ikke-Retina skærm. Desuden fordobles hvert element også i størrelse, så det har samme størrelse som på en ikke-Retina skærm, men er meget skarpere. (Tænk på det som et Windows-skrivebord ved 200% zoomet skærm).

I forhold til responsivt design er der ingen speciel layoutovervejelse for Retina-skærme, da deres skærme viser den samme basisopløsning som dens ikke-Retina modstykker.

Faktorer du bør overveje med responsivt design

Det er overflødigt at sige, at det ikke er muligt at få din hjemmeside til at se 100 procent ens ud på tværs af forskellige skærmopløsninger. Men pointen med responsivt design er ikke at sikre, at din hjemmeside altid ser ud på samme måde, men snarere, at den er optimeret til det bedste udseende og den bedste brugeroplevelse uanset enhed, skærmopløsninger og skærmstørrelser.

Her er nogle vigtige ting, du bør tjekke:

1. Er de vigtigste elementer synlige på den synlige del af skærmen (over folden) på de forskellige skærmstørrelser, du har optimeret til?Eftersom ikke alle brugere scroller hele vejen ned på en side, skal du såvidt muligt sørge for, at alle vigtige oplysninger altid er synlige over folden på de forskellige skærmstørrelser, du ønsker at understøtte.
2. Er din tekst let at læse? Juster skriftstørrelse og tekstboks for at optimere læsbarheden. Ifølge Google indeholder en ideel kolonne 70 til 80 tegn per linje, så når en tekstboks tillader at overgå dette tal, bør du overveje at tilføje et breakpoint.

Er du interesseret i at vide mere? Kontakt os i dag – vores projektledere er klar til at hjælpe dig.