Hvad er den optimale webside-bredde?

At designe et websted og indstille websides bredde til en optimal bredde er en samtale, der er værd at have. Mange af jer bemærkede, at jeg for nylig ændrede bredden på min blogs design. Jeg skubbede sidebredden ud til 1048 pixels. Nogle af jer er muligvis uenige i træk - men jeg ville dele nogle statistikker og grunde til, hvorfor jeg skubbede temabredden så bredt.

1048 pixels var dog ikke et tilfældigt tal.

Der var to vigtige indflydelser på at udvide min sidebredde:

  • Skift Youtube-breddeYoutube tilbyder større indlejringsstørrelser nu. Hvis du klikker på det lille gear i sidebjælken på Youtube-videosiden, tilbydes du muligheder for større størrelser såvel som temaet. Da videoer med højere definition bliver almindeligt sted på Youtube, ville jeg indarbejde disse videoer i min blog og vise dem med så mange detaljer som muligt (uden at forbruge hele sidebredden).
  • Typisk reklame kommer i bredder på 125, 250 og 300 pixelbredder. 300 pixels ser ud til at dukke op mere og mere på annonceindtægtswebsteder, og jeg ville inkorporere dem pænt i mit sidebjælke.

Og selvfølgelig er der noget polstring til venstre og højre for siden, indholdet og sidebjælken ... så det magiske tal var 1048 pixels for mit tema:

Optimal webstedsbredde

Kontrollerede jeg mine læserstatistikker?

Ja selvfølgelig! Hvis et flertal af mine besøgende kørte skærme med lavere opløsning, ville jeg helt sikkert have haft andre tanker om at udvide min side. Bredde og procentdelEfter at have udsendt skærmopløsningerne fra min Analytics-pakke (I Google er det besøgende> Browserfunktioner> Skærmopløsninger), byggede jeg et Excel-regneark med resultaterne og parsede bredden fra opløsningsfeltet.

Google giver opløsning som 1600 × 1200, så du skal tage alt fra venstre for "x", gange det med 1 for at gøre det til et numerisk resultat, så du kan sortere faldende på det, så lav et SUMIF og se hvor mange besøg er større end eller mindre end den designbredde, du ser på.

= VENSTRE (A2, FIND ("x", A2,1) -1) * 1

Forladte jeg de 22% af læserne, der kører en mindre opløsning? Selvfølgelig ikke! Det pæne ved et layout med dit indhold til venstre og dit sidebjælke til højre er, at du kan sikre, at dit indhold stadig er inden for bredden af ​​de fleste browsere. I dette tilfælde kører 99% af mine læsere mere end 640 pixels i bredden, så jeg er god! Jeg vil ikke have dem til helt at savne sidebjælken, men det er sekundært i forhold til indholdet.

9 Kommentarer

  1. 1

    Jeg foreslår et hybridlayout og en CSS-containerbredde på 100%. Så længe du har en fast bredde til sidebjælken, justeres sidehovedet, sidefoden og hovedindholdsområderne, så de passer til skærmens resterende bredde. Udfylder 100% af alles browservindue, uanset brugerens skærmopløsning. Derefter behøver du ikke tælle pixels mere eller holde styr på brugerstatistikker vedrørende skærmopløsninger.

    • 2

      I really like hybrid layouts, Bob – but unfortunately they don’t play well sometimes with the actual content. Maybe I’m lazy, but it’s easier for me to know that max and min are 640px in my site. Stretching is difficult to conceive when I’m writing the posts.

      Bare en personlig præference antager jeg!

  2. 3

    I det væsentlige er jeg enig i din konklusion, men hvis jeg bruger en fast breddeopsætning, begrænser jeg bredden til 960 pixels.

    Man skal tage højde for lodrette rullepaneler og andre browsergenvejsbjælker, der optager yderligere bredde. Ved at holde sig inden for 960 pixels er man sikker på, at der ikke er nogen venstre-til-højre-rulle på en skærmopløsning på 1024 pixelbredde.

    Andy Ebon

  3. 4
  4. 5

    meget mærkeligt. I Firefox har dit websted en horisontrullebjælke ved 1048 og har ikke et rent udseende, før du kommer ud til 1090.

    Tak for den gode statistik fra Googles opløsninger

  5. 6

    Since you've got your <div id="page"> set to 1048px, your site causes horizontal scroll bars on a 1024 screen. I think it would have been better to skim a 100px off the width (and padding) of your sidebar and content area so it fits on a 728×1024. That's what is best practice today.

    Den eneste sag mod dette ville være, hvis analysetallene understøtter det ... men da du ikke leverede disse data i din artikel, vil jeg sige, at du er sidedesign er mangelfuld.

  6. 7
  7. 8

    Fjollet mand
    Ikke alle bruger hvert vindue på fuld skærm - faktisk vil jeg satse på, at få gør. 

    Jeg har din blog i en 80% windo ... og der er den, en vandret rullebjælke

    Og hvad der er væk fra skærmen ... lader os se ... intet.

    Så din rullebjælke er meningsløs.

    En nem måde at miste læsere på !!

    • 9

      Indholdet er centreret på siden @ heenan73: disqus, hvilket giver læseren nøjagtigt det, de har brug for. Hvis jeg mister læsere, fordi de begge kan se indholdet OG se en vandret rullepanel ... ikke sikker på, at de var de læsere, jeg ledte efter. Der er bestemt noget unikt inden for vores indhold, der skubber det ud til 1217px, så jeg skal spore det og rette det. Dette indlæg blev faktisk skrevet om et tidligere tema. Tak, fordi du gjorde mig opmærksom på det!

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.