Vad är den optimala webbsidans bredd?

Att utforma en webbplats och ställa in webbsidans bredd till en optimal bredd är en konversation som är värt att ha. Många av er märkte att jag nyligen ändrade bredden på min bloggs design. Jag drog ut sidans bredd till 1048 pixlar. Vissa av er kanske inte håller med om flytten - men jag ville dela med mig av statistik och anledningar till varför jag sköt temabredden så vid.

1048 pixlar var dock inte ett slumpmässigt tal.

Det var två viktiga influenser när jag utökade min sidbredd:

  • Ändra Youtube-breddYoutube erbjuder större inbäddningsstorlekar nu. Om du klickar på det lilla redskapet i sidofältet på Youtube-videosidan erbjuds alternativ för större storlekar såväl som temat. Eftersom högupplösta videor blir vanligare på Youtube ville jag integrera dessa videor i min blogg och visa dem med så mycket detaljer som jag kunde (utan att konsumera hela sidans bredd).
  • Typisk reklam finns i bredderna 125, 250 och 300 pixlar. 300 pixlar verkar dyka upp mer och mer på webbplatser för annonsintäkter och jag ville integrera dem snyggt i mitt sidofält.

Och naturligtvis finns det lite vaddering till vänster och höger om sidan, innehållet och sidofältet ... så det magiska numret var 1048 pixlar för mitt tema:

Optimal webbplatsbredd

Kontrollerade jag min läsarstatistik?

Ja självklart! Om en majoritet av mina besökare hade skärmar med lägre upplösning hade jag definitivt haft andra tankar om att utöka min sida. Bredd och procentEfter att ha lagt ut skärmupplösningarna från mitt Analytics-paket (I Google är det Besökare> Webbläsarfunktioner> Skärmupplösningar), byggde jag ett Excel-kalkylblad med resultaten och analyserade bredden från upplösningsfältet.

Google ger upplösning 1600 × 1200, så du måste ta allt från vänster om "x", multiplicera det med 1 för att göra det till ett numeriskt resultat så att du kan sortera fallande på det, gör sedan en SUMIF och se hur många besök är större än eller mindre än designbredden du tittar på.

= VÄNSTER (A2, HITTA ("x", A2,1) -1) * 1

Övergav jag de 22% av läsarna som har en mindre upplösning? Självklart inte! Det fina med en layout med ditt innehåll till vänster och din sidofält till höger är att du kan se till att ditt innehåll fortfarande ligger inom bredden för de flesta webbläsare. I det här fallet kör 99% av mina läsare mer än 640 pixlar brett, så jag är bra! Jag vill inte att de ska missa sidofältet helt, men det är sekundärt för innehållet.

9 Kommentarer

  1. 1

    Jag föreslår en hybridlayout och en CSS-containerbredd på 100%. Så länge du har en fast bredd för sidofältet kommer sidhuvudet, sidfoten och huvudinnehållsområdena att justeras för att passa skärmens återstående bredd. Fyller 100% av allas webbläsarfönster, oavsett användarens bildskärmsupplösning. Då behöver du inte räkna pixlar längre eller hålla reda på användarstatistik angående bildskärmsupplösningar.

    • 2

      Jag gillar verkligen hybridlayouter, Bob - men tyvärr spelar de inte bra ibland med det faktiska innehållet. Jag kanske är lat, men det är lättare för mig att veta att max och min är 640 pixlar på min webbplats. Att sträcka är svårt att bli gravid när jag skriver inläggen.

      Bara en personlig preferens antar jag!

  2. 3

    I huvudsak håller jag med din slutsats, men om jag använder en fast breddsinställning begränsar jag bredden till 960 pixlar.

    Man måste ta hänsyn till vertikala rullningslister och andra webbläsargenvägsfält som tar upp ytterligare bredd. Genom att hålla sig inom 960 pixlar är man säker på att det inte finns någon vänster-till-höger-rullning på en skärmupplösning på 1024 pixlar.

    Andy Ebon

  3. 4
  4. 5

    väldigt udda. I Firefox har din webbplats en horisontellrulle vid 1048 och har inte ett rent utseende förrän du kommer ut till 1090.

    Tack för den fantastiska statistiken från Googles resolutioner

  5. 6

    Eftersom du har din inställd på 1048 pixlar, orsakar din webbplats horisontella rullningslister på en 1024-skärm. Jag tror att det hade varit bättre att skumma 100px från bredden (och vadderingen) på sidofältet och innehållsområdet så att det passar på en 728 × 1024. Det är det som är bästa praxis idag.

    Det enda fallet mot detta skulle vara om analysnumren stöder det ... men eftersom du inte tillhandahöll den informationen i din artikel skulle jag säga att du är siddesign är bristfällig.

  6. 7
  7. 8

    Silly man
    Inte alla använder varje fönster på helskärm - jag skulle faktiskt satsa på att få gör det. 

    Jag har din blogg i en 80% windo ... och där är den, ett horisontellt rullningsfält

    Och vad är utanför skärmen ... kan vi se ... ingenting.

    Så din rullningslist är meningslös.

    Ett enkelt sätt att förlora läsare !!

    • 9

      Innehållet är centrerat på sidan @ heenan73: disqus, vilket ger läsaren exakt vad de behöver. Om jag tappar läsare eftersom de båda kan se innehållet OCH se en horisontell rullning ... inte säker på att det var de läsare jag letade efter. Det finns definitivt något unikt i vårt innehåll som skjuter ut det till 1217px så jag ska spåra det och fixa det. Det här inlägget skrevs faktiskt om ett tidigare tema. Tack för att du gjorde det till mig!

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.