Jaká je optimální šířka webové stránky?

Designing a web site and setting the web page width to an optimal width is a conversation worth having. Many of you noticed that I recently changed the width of my blog’s design. I pushed the page width out to 1048 pixels. Some of you may disagree with the move – but I wanted to share some stats and reasons on why I pushed the theme width so wide.

1048 pixelů však nebylo náhodné číslo.

Při rozšiřování mé šířky stránky byly dva klíčové vlivy:

  • Změňte šířku YoutubeYoutube offers larger embed sizes now. If you click the small gear on the sidebar of the Youtube video page, you’re offered options for larger sizes as well as the theme. Since higher definition videos are becoming common place on Youtube, I wanted to incorporate those videos into my blog and display them with as much detail as I could (without consuming the entire page width).
  • Typická reklama se dodává v šířkách 125, 250 a 300 pixelů. Zdá se, že 300 pixelů se na stránkách s výnosy z reklam objevuje stále více a já jsem je chtěl úhledně začlenit do mého postranního panelu.

And of course, there’s some padding to the left and right of the page, the content, and the sidebar… so the magic number was 1048 pixels for my theme:

Optimální šířka webových stránek

Zkontroloval jsem své statistiky čtenáře?

Ano, samozřejmě! Pokud většina mých návštěvníků provozovala obrazovky s nižším rozlišením, určitě bych měl o rozšíření své stránky další myšlenky. Šířka a procentoAfter outputting the screen resolutions from my Analytics package (In Google it’s Visitors > Browser Capabilities > Screen Resolutions), I built an Excel spreadsheet of the results and parsed out the width from the resolution field.

Google poskytuje rozlišení 1600 1200 × 1 XNUMX, takže je třeba vzít vše zleva od znaku „x“, vynásobit ho číslem XNUMX a vytvořit z něj číselný výsledek, abyste jej mohli seřadit sestupně, provést SUMIF a zjistit, kolik návštěv jsou větší nebo menší než šířka návrhu, na kterou se díváte.

= VLEVO (A2; FIND ("x"; A2,1) -1) * 1

Did I abandon the 22% of readers who are running a smaller resolution? Of course not! The nice thing about a layout with your content left and your sidebar right is that you can ensure that your content is still within the width of the majority of browsers. In this case, 99% of my readers are running greater than 640 pixels wide, so I’m good! I don’t want them to totally miss the sidebar, but that’s secondary to the content.

9 Komentáře

  1. 1

    Navrhuji hybridní rozložení a šířku kontejneru CSS 100%. Pokud máte pro boční panel pevnou šířku, oblasti záhlaví, zápatí a hlavního obsahu se přizpůsobí zbývající šířce obrazovky. Vyplní 100% okna prohlížeče každého, bez ohledu na rozlišení monitoru uživatele. Pak už nemusíte počítat pixely ani sledovat uživatelské statistiky týkající se rozlišení monitorů.

    • 2

      Moc se mi líbí hybridní rozvržení, Bobe - ale bohužel se někdy nehrají dobře se skutečným obsahem. Možná jsem líný, ale je pro mě snazší vědět, že na mém webu jsou maximální a minimální hodnoty 640 pixelů. Když píšu příspěvky, je těžké si představit protahování.

      Myslím, že jen osobní preference!

  2. 3

    V zásadě souhlasím s vaším závěrem, ale pokud používám nastavení pevné šířky, omezím šířku na 960 pixelů.

    Jeden musí počítat se svislými posuvníky a dalšími pruhy zkratek prohlížeče, které zabírají další šířku. Tím, že zůstane v rozmezí 960 pixelů, je zajištěno, že při rozlišení obrazovky o šířce 1024 pixelů nedochází k posouvání zleva doprava.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Od té doby, co máš nastaveno na 1048 pixelů, váš web způsobí na obrazovce 1024 vodorovné posuvníky. Myslím, že by bylo lepší odříznout 100px ze šířky (a polstrování) postranního panelu a oblasti obsahu, aby se vešel na 728 × 1024. To je dnes nejlepší praxe.

    Jediným případem proti tomu by bylo, kdyby to analytická čísla podporovala ... ale protože jste ve svém článku tyto údaje neposkytli, řekl bych, že váš návrh stránky je chybný.

  6. 7
  7. 8

    Hloupý muž
    Ne každý používá každé okno na celou obrazovku - ve skutečnosti bych se vsadil, že jen málo z nich. 

    Mám váš blog v 80% větru ... a je to, vodorovný posuvník

    A co je mimo obrazovku ... uvidíme ... nic.

    Váš posuvník je tedy zbytečný.

    Jeden snadný způsob, jak přijít o čtenáře !!

    • 9

      Obsah je soustředěn na stránce @ heenan73: disqus a poskytuje čtenáři přesně to, co potřebuje. Pokud ztrácím čtenáře, protože oba mohou vidět obsah A vidět vodorovný posuvník ... nejsem si jistý, zda jsou čtenáři, které hledám. V našem obsahu je určitě něco jedinečného, ​​co ho posouvá na 1217px, takže to budu sledovat a opravit. Tento příspěvek byl vlastně napsán o předchozím tématu. Děkuji, že jste mě na to upozornili!

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.