To hjemmesider kan have helt det samme indhold og give helt forskellige resultater. Den ene er nem at finde rundt på og læses klart. Den anden virker spredt og svær at følge. Indholdet er det samme. Layoutet er ikke. Hjemmesidens layout er den usynlige ramme, der afgør, om indholdet rammer, eller om det bliver overset.
Hjemmesidens layout er den måde, indholdet er arrangeret og struktureret på en side. Det afgør, hvor elementerne placeres, hvordan de forholder sig til hinanden, og i hvilken rækkefølge en besøgende møder dem. Et godt layout guider besøgende naturligt gennem indholdet. Et dårligt får dem til at arbejde for at finde det, de skal bruge.
Layout er ikke det samme som design. Design dækker, hvordan tingene ser ud: farver, skrifttyper og visuel stil. Layout dækker, hvor tingene placeres, og hvordan de er organiseret. En side kan se smuk ud og alligevel have et layout, der forvirrer besøgende, eller se enkel ud og have et layout, der virker perfekt.
Hvad er de vigtigste layouttyper?
Layout med én kolonne
Et layout med én kolonne stabler alt indhold lodret i én kolonne midt på siden. Det er det enkleste layout og det mest mobilvenlige, fordi det ikke kræver tilpasning, når en bred skærm bliver til en smal. Blogartikler, indholdssider med lange tekster og dokumentation bruger ofte layout med én kolonne, fordi den lineære læserækkefølge passer til, hvordan det indhold læses.
Layout med to kolonner
Et layout med to kolonner deler siden i to områder side om side. Den mest almindelige version placerer hovedindholdet i en bredere venstre kolonne og supplerende indhold, som en sidemenu med navigation eller relaterede links, i en smallere højre kolonne. Layout med to kolonner virker godt på sider med et tydeligt primært indholdsområde, der har gavn af støttende indhold ved siden af.
Gitterlayout
Et gitterlayout organiserer indhold i et struktureret system af rækker og kolonner. Produktlister, portfoliogallerier og blogoversigter bruger ofte gitre, fordi de lader flere elementer af samme vigtighed blive vist ensartet. Gitterets visuelle regelmæssighed gør det nemt at skimme. Udfordringen er at sikre, at gitteret klapper fornuftigt sammen på mobil, hvor elementer typisk skal gå fra tre eller fire kolonner til en eller to.
Layout i fuld bredde
Et layout i fuld bredde strækker afsnit ud over hele browservinduets bredde. Heltesektioner, baggrundsbilleder og adskillere mellem afsnit bruger ofte fuld bredde for at skabe visuel effekt og adskille indholdsområder. Indholdet i en sektion i fuld bredde er som regel begrænset til en læsbar maksimal bredde, så baggrunden strækker sig fra kant til kant, mens teksten ikke gør.
Magasinlayout
Et magasinlayout bruger en asymmetrisk ordning af indholdsblokke i forskellige størrelser, ligesom trykte magasiner organiserer redaktionelt indhold. Det bruges på nyhedssider og indholdstunge platforme, hvor flere historier af forskellig vigtighed skal vises sammen. Den visuelle variation i et magasinlayout skaber hierarki gennem størrelse og position, men det kræver omhyggeligt design for ikke at virke kaotisk.
Kortlayout
Et kortlayout viser indhold i enkelte afgrænsede blokke, hver med en ensartet opbygning: et billede, en titel, en kort beskrivelse og nogle gange et link eller en handling. Kort er modulære, hvilket gør dem nemme at skimme og nemme at flytte rundt på. De virker godt til produkter, blogindlæg, teammedlemmer, ydelser og alle indholdstyper, hvor mange elementer af samme slags skal vises sammen.
Hvordan vælger du det rigtige layout til en side?
Det rigtige layout afhænger af sidens formål og af, hvordan besøgende vil bruge indholdet.
Sider, hvor besøgende læser fra start til slut, som artikler, guides eller trin for trin-sider, virker bedst med layout med én kolonne eller enkelt layout med to kolonner, der følger en tydelig lineær vej. Sider, hvor besøgende kigger rundt og vælger mellem muligheder, som produktlister eller ydelsesoversigter, virker godt med gitter- eller kortlayout, så besøgende kan sammenligne elementer med et blik.
Sider, der skal gøre et stærkt førstehåndsindtryk, som forsider og landingpages, har gavn af sektioner i fuld bredde for visuel effekt kombineret med afgrænsede kolonner til læsbart indhold. Layoutet skal passe til indholdstypen: et gitterlayout til en lang artikel giver den forkerte læseoplevelse, ligesom et layout med én kolonne til et produktkatalog gør det unødvendigt svært at kigge rundt.
Artiklen om sådan designer du en forside, der virker dækker, hvordan du strukturerer layoutvalg specifikt til forsider, hvor det betyder mest at få det rigtigt.
Hvordan virker layout på mobil?
Hvert layout med flere kolonner på computer har brug for en mobilversion, hvor kolonnerne stables lodret. Et produktgitter med tre kolonner bliver til et gitter med en eller to kolonner. Et layout med to kolonner og sidemenu klapper sammen til én kolonne. Spørgsmålet er ikke, om layoutet skal tilpasses mobil, men hvordan man gør det uden at miste læserækkefølgen eller det visuelle hierarki.
Rækkefølgen, når kolonner klapper sammen, betyder noget. Når et layout med to kolonner stables på mobil, vises den venstre kolonne typisk over den højre. Hvis sidemenuens indhold vises før hovedindholdet, når layoutet klapper sammen, går mobiloplevelsen i stykker. Når du tester layoutet på en rigtig telefon, før du udgiver, opdager du de problemer, som sjældent kan ses i forhåndsvisninger på computer.
Nogle layoutvalg, der virker på computer, bør overvejes helt forfra til mobil. Et komplekst magasinlayout med fem forskellige indholdsstørrelser skal måske forenkles til et kortgitter med to kolonner på mobil for at forblive brugbart. Artiklen om sådan gør du en hjemmeside mobilvenlig dækker alle overvejelser om layout og design til mindre skærme.
Hvordan påvirker layout det visuelle hierarki?
Layout og visuelt hierarki arbejder sammen. Layoutet giver strukturen: hvor afsnit placeres, hvor mange kolonner der er, og hvordan indholdsblokke er arrangeret. Det visuelle hierarki giver vægten: hvilke elementer i den struktur der bliver bemærket først, næst og sidst.
Et layout, der placerer det vigtigste indhold øverst og i det største område, gør, at det visuelle hierarki kommer til at virke naturligt. Et layout, der gemmer vigtigt indhold i en sidemenu eller placerer det under mindre vigtigt indhold, arbejder imod hierarkiet, uanset hvordan de enkelte elementer er stylet. Når layoutet er i orden først, bliver det markant nemmere at skabe et klart visuelt hierarki. Artiklen om hvad visuelt hierarki er forklarer, hvordan værktøjerne til fremhævelse, størrelse, kontrast og afstand virker i ethvert layout.
Hvordan påvirker layout SEO?
Layout påvirker primært SEO gennem den brugeroplevelse, det skaber. En side med et klart, logisk layout holder besøgende længere på siden og mindsker risikoen for, at de straks forlader den. Disse adfærdssignaler betyder noget for søgemaskiner over tid.
Layout påvirker også, hvordan søgemaskiner læser sidens indholdsstruktur. Indhold, der står tidligt i sidens HTML, vægtes typisk tungere end indhold, der står sent, selv om det visuelle layout får det til at se lige fremtrædende ud. At placere de vigtigste overskrifter og det vigtigste indhold øverst i sidens kilde, ikke kun visuelt, passer til, hvordan søgemaskiner behandler sider. Artiklen om hvad SEO er dækker de tekniske faktorer og indholdsfaktorer, der påvirker, hvordan sider rangerer.
Sådan klarer WEMASY layout
WEMASYs hjemmesidebygger har et afsnitsbaseret layoutsystem, hvor du vælger mellem et bibliotek af færdige layoutblokke til hvert afsnit af siden. Layout med én kolonne, to kolonner, gitter, fuld bredde og kort findes alle som afsnit, du kan trække på plads. Hver layoutblok tilpasser sig automatisk til mobil, klapper kolonner sammen og justerer afstande uden separat mobilopsætning. Den visuelle editor viser både computer- og mobilvisning, så du kan tjekke, at layoutet virker på tværs af enheder, før du udgiver.
Se, hvad der er med, hos WEMASYs hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Hvad er det mest almindelige hjemmesidelayout?
Det mest almindelige layout til virksomhedshjemmesider kombinerer en heltesektion i fuld bredde øverst med et indholdsområde med flere kolonner eller kort under den og en sidefod med én kolonne. Den struktur giver forsiden visuel effekt øverst, fleksibilitet til funktionsafsnit i midten og et fast holdepunkt nederst. På enkelte sider er layout med én kolonne det mest almindelige til indholdsfokuserede sider som blogartikler og ydelsesbeskrivelser. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Hvad er et wireframe, og hvordan hænger det sammen med layout?
Et wireframe er en forenklet tegning af en sides layout med få detaljer, der viser, hvor indholdsblokke, navigation og vigtige elementer skal placeres. Det laves, før der træffes nogen visuelle designbeslutninger, og fokuserer udelukkende på struktur og placering af indhold. Wireframes bruges til at planlægge og teste layoutbeslutninger uden at blive forstyrret af farver, skrifttyper eller billeder. For en virksomhedsejer, der bruger en hjemmesidebygger, fungerer den skabelon, du vælger, i praksis som et wireframe med design lagt oven på.
Skal alle sider på en hjemmeside bruge det samme layout?
Ikke nødvendigvis, men de skal føles ensartede. En forside, en blogartikel og en produktlisteside har forskellige indholdstyper og formål, så de har gavn af layouts, der passer til hver. Det, der bør være ensartet, er sidehoved, navigation, sidefod og den generelle visuelle stil. Inden for de ensartede elementer kan layoutet af indholdsområdet variere, så det passer til sidens formål. Målet er, at hjemmesiden føles sammenhængende, ikke at hver side er opbygget ens.
Hvad er et responsivt gitterlayout?
Et responsivt gitterlayout er en gitterstruktur, der ændrer antallet af kolonner efter den tilgængelige skærmbredde. På en bred computerskærm kan det vise fire kolonner. På en tablet går det ned til to. På en telefon klapper det sammen til én. Gitteret tilpasser sig skærmstørrelsen automatisk uden at kræve separate designs til hver enhed. De fleste moderne hjemmesidebyggere bruger responsive gitre som standard, så layoutet justeres korrekt uden manuel opsætning for hvert brudpunkt.
Hvordan påvirker valget af layout sidens indlæsningshastighed?
Selve layoutet har minimal indflydelse på indlæsningshastigheden. Det, der påvirker hastigheden, er indholdet i layoutet: billeder, videoer, scripts og skrifttyper. Et komplekst gitterlayout med optimerede billeder indlæses hurtigere end et enkelt layout med én kolonne med uoptimerede billeder. Når det er sagt, kan layouts med mange baggrundsbilleder i fuld bredde eller parallaksescrolling øge indlæsningstiden, hvis billederne ikke er komprimeret ordentligt. Layoutet er beholderen. Det, der ligger i den, afgør hastigheden.