Webbplatslayout följer en av två olika tillvägagångssätt:
- Layout med fast bredd: Dessa är layouter där bredden på hela sidan ställs in med ett specifikt numeriskt värde.
- Flytande layouter: Dessa är layouter där bredden på hela sidan är flexibel beroende på hur bred tittarens webbläsare är.
Det finns goda skäl för att använda båda layoutmetoderna, men utan att förstå båda släktingarna fördelar och brister med varje metod kan du inte fatta ett bra beslut om vilken du ska använda för din webb sida.
Layout med fast bredd
Fasta layouter är layouter som börjar med en viss storlek enligt webbdesignern. De förblir den bredden, oavsett storleken på webbläsarfönstret som visar sidan. Layouter med fast bredd gör det möjligt för en designer mer direkt kontroll över hur sidan kommer att se ut i de flesta situationer. De föredras ofta av designers med tryckbakgrund, eftersom de gör det möjligt för designern att göra små justeringar av layouten och få dem att vara konsekventa i webbläsare och datorer.
Flytande layouter
Flytande layouter är layouter som baseras på procentandelar av det aktuella webbläsarfönstrets storlek. De böjer sig med fönstrets storlek, även om den aktuella tittaren ändrar sin webbläsarstorlek när han tittar på webbplatsen. Flytande breddlayouter möjliggör en effektiv användning av utrymmet som tillhandahålls av ett visst webbläsarfönster eller skärmupplösning. De föredras ofta av designers som har mycket information n att komma över på så lite utrymme som möjligt eftersom de förblir enhetliga i storlek och relativa sidovikt oavsett vem som tittar på sida.
Vad är på spel?
Din hemsidedesign påverkar din webbplatsens lyhördhet och anpassningsförmåga. Beroende på vilken du väljer kan dina läsares förmåga att skanna din text, hitta vad de letar efter eller ibland till och med använda din webbplats hjälpas eller hindras. Din webbplats övergripande varumärkesidentitet kan också vara i riskzonen, särskilt om dina varumärkesstandarder följer en logikmodell för första tryck.
Fördelar med layouter med fast bredd
En layout med fast bredd är till hjälp under vissa omständigheter.
- En layout med fast bredd gör att designern kan bygga sidor som ser identiska ut oavsett vem som tittar på dem.
- Element med fast bredd, till exempel bilder, kommer inte att överväldiga text på mindre bildskärmar eftersom bredden på hela sidan kommer att inkludera dessa element.
- Skanningslängden påverkas inte av stora segment av text, oavsett hur bred webbläsaren är.
Fördelar med flytande layouter
En flytande layout fungerar bäst under andra omständigheter.
- En layout med flytande bredd expanderar och drar sig samman för att fylla det tillgängliga utrymmet.
- Alla tillgängliga fastigheter används, så att designern kan visa mer innehåll på större bildskärmar, men ändå vara hållbar på mindre skärmar.
- Flytande layouter ger konsistens i relativa bredder, vilket gör att en sida kan svara mer dynamiskt på kundpåtagna begränsningar som större teckenstorlekar.
Nackdelar med layouter med fast bredd
Ett fast format är dock inte utan kostnader.
- Layout med fast bredd tvingar horisontell rullning i mindre webbläsarfönster. De flesta gillar inte att rulla horisontellt.
- De lämnar stora vita ytor i större bildskärmar, vilket resulterar i mycket oanvänt utrymme och mer rullning vertikalt än vad som annars skulle vara nödvändigt.
- Layouter med fast bredd hanterar inte kundändringar i teckenstorlekar särskilt bra. För små ökningar av teckenstorleken kan de vara okej, men för större ökningar kan layouten äventyras.
Nackdelar med flytande layouter
Flytande layouter är också utan nackdelar.
- Flytande layouter möjliggör mycket liten exakt kontroll över bredden på de olika elementen på sidan.
- De kan resultera i textkolumner som är antingen för breda för att skanna bekvämt eller i mindre webbläsare för små för att orden ska visas tydligt.
- Vätskelayoutfel när ett element med fast bredd, t.ex. en bild, placeras i en vätskekolonn. Om kolumnen återges utan tillräckligt med utrymme för bilden kommer vissa webbläsare att öka kolumnbredden, bortser från designerns instruktioner, medan andra webbläsare tvingar överlappningar i text och bilder för att uppnå rätt procentsatser.
Layoutpreferens och blandade tillvägagångssätt
Vissa designers föredrar att blanda dessa koncept. De gillar inte att använda flytande layouter för stora textblock, eftersom den strukturen gör texten antingen oläslig på en liten bildskärm eller oskannbar på en stor. Så de brukar göra sidans huvudkolumner till en fast bredd, men göra sidhuvuden, sidfot och sidor kolumner mer flexibla för att ta upp kvarvarande fastigheter och inte förlora kapaciteten för större webbläsare.
Vissa webbplatser använder skript för att bestämma din webbläsares fönsterstorlek och ändra sedan visningselementen därefter. Om du till exempel öppnar en sådan webbplats i ett mycket stort fönster kan du få en extra kolumn med länkar på vänster sida som besökare med mindre skärmar kanske inte ser. Text som omsluter reklam beror också på hur brett ditt webbläsarfönster är. Om den är tillräckligt bred kommer webbplatsen att lägga in texten runt den, annars visas artikeltexten under annonsen. Medan de flesta webbplatser inte behöver denna nivå av komplexitet, visar det ett sätt att dra nytta av större skärmar utan att påverka skärmen på mindre skärmar.