Når man bygger en hjemmeside, er instinktet at fylde plads. Tilføj endnu et afsnit, endnu en funktionsboks, endnu en linje tekst. Det instinkt, der giver bedre hjemmesider, er det modsatte: lad der være luft. Whitespace er ikke tomt rum. Det er det, der gør alt andet på siden læsbart, troværdigt og nemt at handle på.
Whitespace i design er de tomme områder mellem og omkring elementer på en side. Det omfatter afstanden mellem tekstlinjer, polstringen inde i en knap, mellemrummet mellem en overskrift og afsnittet under den og margenerne omkring afsnit. Intet af det er spildt. Alt det arbejder.
Navnet er lidt misvisende: whitespace behøver ikke være hvidt. Det er ethvert område på en side, der ikke er optaget af indhold. En mørk baggrund med god afstand mellem afsnittene bruger whitespace lige så effektivt som en hvid baggrund.
Hvorfor er whitespace vigtigt på en hjemmeside?
Whitespace påvirker, hvordan besøgende opfatter og tager imod indhold. Sider med god afstand føles nemmere at læse, mere professionelle og mere troværdige. Sider med lidt afstand føles rodede og sværere at finde rundt på, uanset hvor godt indholdet er.
Den kognitive grund er enkel. Når elementer ligger tæt, skal hjernen arbejde hårdere for at se, hvor det ene slutter, og det andet begynder. Når elementer har luft omkring sig, bevæger øjet sig naturligt gennem siden uden anstrengelse. Mindre indsats fra den besøgende betyder mere opmærksomhed til selve indholdet og opfordringerne til handling.
Whitespace fortæller også noget om brandets position. Premium- og luksusbrands bruger konsekvent mere whitespace end budget- eller prisfokuserede brands. Sammenhængen mellem god afstand og kvalitet sidder dybt. En virksomhedshjemmeside, der ser trang ud, signalerer noget utilsigtet om brandet, uanset hvad teksten siger.
Hvilke typer whitespace findes der i webdesign?
Makro-whitespace
Makro-whitespace er den store afstand mellem sidens hovedafsnit. Mellemrummet mellem heltesektionen og funktionssektionen, margenerne på hver side af indholdet, afstanden mellem det sidste afsnit og sidefoden. Makro-whitespace giver siden dens overordnede luft og afgør, hvor åbent eller tæt layoutet føles ved første blik.
Mikro-whitespace
Mikro-whitespace er den lille afstand inde i indholdet: afstanden mellem tekstlinjer (linjehøjde), mellemrummet mellem en etiket og dens indtastningsfelt i en formular, polstringen inde i en knap. Mikro-whitespace afgør, hvor læsbare de enkelte elementer er. Et afsnit med stram linjeafstand er sværere at læse end det samme afsnit med rigelig afstand, selv om skriftstørrelsen er den samme.
Aktivt whitespace
Aktivt whitespace er plads, der er placeret bevidst for at lede opmærksomheden eller skabe fremhævelse. En god portion plads omkring en knap med opfordring til handling isolerer den for eksempel visuelt og får den til at skille sig ud fra indholdet omkring. Her bruges whitespace som et designværktøj og ikke kun som luft.
Passivt whitespace
Passivt whitespace er den naturlige plads, der er omkring indhold som følge af layoutet og ikke som en bevidst designbeslutning. Mellemrummet mellem enden af et afsnit og kanten af indholdskolonnen, pladsen nederst på en side før sidefoden. Det er nødvendigt, men ikke strategisk.
Hvor meget whitespace er nok?
Der er ingen fast regel, men den mest almindelige fejl er at bruge for lidt frem for for meget. Er du i tvivl, så øg afstanden og se, om siden føles bedre. Det gør den næsten altid.
Hvor meget whitespace der virker, afhænger af indholdstypen og målgruppen. En dokumentationsside til tekniske brugere kan være tættere end en forside til almindelige besøgende. En side med et luksusprodukt har brug for mere luft end et sammenligningsskema. Den rette mængde er den, der gør indholdet nemmest at læse og de vigtigste elementer nemmest at få øje på.
En praktisk test: Hvis du knibber øjnene sammen, og alt flyder sammen, er der ikke nok whitespace. Hvis dit øje med det samme finder overskriften og opfordringen til handling, når du ser på siden som helhed, virker afstanden. Artiklen om hvad visuelt hierarki er forklarer, hvordan afstand arbejder sammen med størrelse, farve og kontrast for at lede den besøgendes øje.
Almindelige fejl med whitespace på virksomhedshjemmesider
Afsnit, der er proppet sammen uden visuel adskillelse, er det hyppigste problem. Når heltesektionen, funktionssektionen, udtalelserne og opfordringen til handling løber sammen uden luft, kan besøgende ikke se, hvor ét emne slutter, og et andet begynder. At tilføje lodret afstand mellem afsnit er som regel den enkeltstående ændring, der forbedrer en rodet forside mest.
Stram linjeafstand i brødteksten gør afsnit sværere at læse, især på mobil, hvor linjerne er kortere, og øjet oftere skal skifte retning. En linjehøjde på mindst 1,5 gange skriftstørrelsen er den udbredte standard for læsbarhed på nettet.
Knapper med for lidt polstring føles små og er svære at trykke på. En knap, der teknisk set har den rigtige størrelse, men har minimal polstring omkring teksten, ser visuelt mindre ud, end den er, og får færre klik. Rigelig polstring får knapper til at føles vigtige og nemme at handle på.
Indhold, der løber fra kant til kant uden sidemargener, er ubehageligt at læse og får en side til at se ufærdig ud. Ethvert indholdsområde har gavn af en ensartet margen, der holder teksten væk fra skærmens kanter, især på mobil. Artiklen om sådan gør du en hjemmeside mobilvenlig dækker afstand som en del af de bredere overvejelser om mobildesign.
Hvordan påvirker whitespace SEO?
Whitespace påvirker SEO indirekte gennem de signaler om brugeroplevelsen, det skaber. Sider, der er nemmere at læse, har lavere afvisningsrate og længere tid på siden. Disse adfærdssignaler fortæller søgemaskiner, at siden tjener sine besøgende godt, og det bidrager til placeringen over tid.
Sidehastighed er også relevant. Whitespace i sig selv har ingen filstørrelse, så mere afstand gør ikke en side langsommere. Men de designvalg, der nogle gange følger med tætte layouts, store billeder tæt på hinanden, tunge animationer mellem afsnit og for meget indhold, kan alle påvirke indlæsningstiden. Et renere og mere luftigt layout er ofte også et hurtigere layout. Artiklen om hvad SEO er dækker, hvordan brugeroplevelse og teknisk ydeevne hænger sammen med placering i søgeresultater.
Sådan klarer WEMASY whitespace
Skabelonerne i WEMASYs hjemmesidebygger er bygget med ensartede standardafstande, der giver et læsbart, professionelt layout uden manuel opsætning. Polstring i afsnit, linjehøjder og afstand mellem elementer er sat til værdier, der virker på tværs af enheder. Med den visuelle editor kan du justere afstanden i enkelte afsnit, når standarden ikke passer til dit indhold, så du har kontrol uden at skulle starte forfra.
Se, hvad der er med, hos WEMASYs hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Betyder mere whitespace mindre indhold?
Ikke nødvendigvis. Whitespace handler om afstand mellem og omkring elementer, ikke om at fjerne indhold. Du kan have en indholdsrig side, der stadig bruger whitespace effektivt, ved at gruppere relateret indhold tydeligt, give afsnit plads til at ånde og ikke forsøge at vise alt på én gang. Opfattelsen af, at mere whitespace betyder at fjerne indhold, er en af grundene til, at virksomhedshjemmesider ender med at blive for tætte. Mere whitespace betyder som regel bedre organiseret indhold, ikke mindre af det. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Er whitespace vigtigt på mobil?
Ja, og nok endda mere end på computer. På en lille skærm er indhold, der er for tæt, sværere at læse og sværere at ramme præcist. Trykflader har brug for afstand omkring sig for at virke pålideligt. Linjehøjder skal være rigelige, så korte linjer med ombrudt tekst stadig kan læses. Den mindre skærmbredde på mobil betyder, at hver afstandsbeslutning påvirker oplevelsen mere direkte end på et bredt computerlayout. Tjek al afstand på en rigtig telefon, før du udgiver.
Kan whitespace gøre min hjemmeside langsom?
Nej. Whitespace er CSS-afstand, som ikke har nogen meningsfuld filstørrelse. Mere polstring, margen eller linjehøjde på en side øger ikke indlæsningstiden. Det, der kan påvirke indlæsningstiden, er det indhold, der fylder pladsen: store billeder, indlejrede videoer og tunge scripts. Et luftigt layout med optimeret indhold indlæses lige så hurtigt som et tæt layout med det samme indhold og føles som regel markant bedre at bruge.
Hvordan ved jeg, om min hjemmeside har for lidt whitespace?
Det tydeligste tegn er, at siden føles optaget eller svær at læse, når du ser på den som helhed. Konkrete tegn er tekst, der løber tæt på skærmens kant, afsnit der flyder sammen uden et tydeligt skel, knapper der ser små ud, selv om de teknisk set er store nok, og afsnit der er trættende at læse. At vise siden til en, der ikke har set den før, og se, hvor deres øje går først, er en af de mest pålidelige måder at finde problemer med whitespace, for når man kender indholdet, kan man ikke se, at det er for tæt.
Hvad er forskellen på padding og margin i webdesign?
Padding er pladsen inde i et element, mellem dets indhold og dets kant. Margin er pladsen uden for et element, mellem det og elementerne omkring det. I praksis bidrager begge til whitespace. Polstringen inde i en knap afgør, hvor meget plads der er omkring knappens tekst. Marginen under en overskrift afgør, hvor tæt det næste afsnit ligger. Begge egenskaber justeres for at skabe den afstand, der gør en side læsbar og velorganiseret.