Якая аптымальная шырыня вэб-старонкі?

Дызайн вэб-сайта і ўстаноўка шырыні вэб-старонкі на аптымальную шырыню - гэта размова, якую варта весці. Шмат хто з вас заўважыў, што я нядаўна змяніў шырыню дызайну свайго блога. Я павялічыў шырыню старонкі да 1048 пікселяў. Некаторыя з вас могуць не пагадзіцца з гэтым крокам, але я хацеў бы падзяліцца статыстыкай і прычынамі таго, чаму я так шырока рассунуў тэму.

1048 пікселяў, аднак, не было выпадковай лічбай.

На пашырэнне маёй шырыні старонкі ўплывалі два ключавыя фактары:

  • Зменіце шырыню YoutubeЗараз Youtube прапануе большыя памеры ўбудавання. Калі вы націснеце маленькую шасцярню на бакавой панэлі старонкі відэа на Youtube, вам будуць прапанаваны варыянты большага памеру, а таксама тэмы. Паколькі відэа высокай выразнасці становяцца агульным месцам на Youtube, я хацеў уключыць гэтыя відэа ў свой блог і адлюстраваць іх з максімальна падрабязнай інфармацыяй (не займаючы ўсёй шырыні старонкі).
  • Тыповая рэклама шырынёй 125, 250 і 300 пікселяў. Здаецца, 300 пікселяў з'яўляюцца на сайтах з даходамі ад рэкламы, і я хацеў акуратна ўключыць іх у бакавую панэль.

І, вядома, ёсць некаторыя абіўкі злева і справа ад старонкі, змест і бакавая панэль ... таму магічная лічба складала 1048 пікселяў для маёй тэмы:

Аптымальная шырыня вэб-сайта

Я правяраў статыстыку чытачоў?

Так, канечне! Калі б большасць маіх наведвальнікаў працавалі на экранах з нізкім дазволам, я б напэўна задумаўся аб пашырэнні сваёй старонкі. Шырыня і працэнтПасля вываду дазволу экрана з майго пакета Analytics (у Google гэта Наведвальнікі> Магчымасці аглядальніка> Дазвол экрана), я стварыў табліцу вынікаў Excel і разабраў шырыню з поля дазволу.

Google забяспечвае дазвол 1600 × 1200, таму вам трэба ўзяць усё злева ад "х", памножыць на 1, каб атрымаўся лічбавы вынік, каб вы маглі сартаваць па змяншэнні па ім, потым зрабіць SUMIF і паглядзець, колькі наведванняў больш альбо меншая за праектную шырыню, на якую вы глядзіце.

= НАЛІВА (A2, FIND ("x", A2,1) -1) * 1

Ці кінуў я 22% чытачоў, якія маюць меншую рэзалюцыю? Канешне не! Прыемная рэч у макеце з вашым змесцівам злева і бакавой панэллю справа ў тым, што вы можаце пераканацца, што ваш змест усё яшчэ знаходзіцца ў шырыні большасці аглядальнікаў. У гэтым выпадку ў 99% маіх чытачоў шырыня перавышае 640 пікселяў, так што я добра! Я не хачу, каб яны цалкам сумавалі па бакавой панэлі, але гэта другаснае ўтрыманне.

9 Каментары

  1. 1

    Я прапаную гібрыдную кампаноўку і CSS-кантэйнер шырынёй 100%. Пакуль у вас ёсць фіксаваная шырыня для бакавой панэлі, калонтытул, ніжні калонтытул і асноўныя ўчасткі змесціва будуць падладжвацца пад астатнюю шырыню экрана. Запаўняе 100% акно аглядальніка ўсіх, незалежна ад дазволу манітора карыстальніка. Тады вам не трэба больш лічыць пікселі альбо адсочваць статыстыку карыстальнікаў адносна дазволу манітора.

    • 2

      Мне вельмі падабаюцца гібрыдныя макеты, Боб, але, на жаль, яны часам дрэнна гуляюць з рэальным зместам. Магчыма, я гультай, але мне лягчэй ведаць, што максімум і мін складаюць 640 пікс. На маім сайце. Расцяжэнне цяжка задумаць, калі я пішу паведамленні.

      Проста асабістыя перавагі, я мяркую!

  2. 3

    Па сутнасці, я згодны з вашай высновай, але калі я выкарыстоўваю ўстаноўку з фіксаванай шырынёй, я абмяжоўваю шырыню да 960 пікселяў.

    Трэба ўлічваць вертыкальныя паласы пракруткі і іншыя панэлі хуткага доступу, якія займаюць дадатковую шырыню. Застаючыся ў межах 960 пікселяў, можна пераканацца ў адсутнасці пракруткі злева направа на дазволе экрана шырынёй 1024 пікселі.

    Эндзі Эбон

  3. 4
  4. 5

    вельмі дзіўна. У Firefox ваш сайт мае панэль пракруткі horiz на 1048 і не мае чыстага выгляду, пакуль вы не выйдзеце на 1090.

    Дзякуй за выдатную статыстыку, хоць і ад рэзалюцый Google

  5. 6

    Так як вы атрымалі сваё усталяваны ў 1048px, ваш сайт выклікае гарызантальныя паласы пракруткі на экране 1024. Я думаю, што было б лепш пазбавіцца ад 100px шырыні (і пракладкі) вашай бакавой панэлі і вобласці змесціва, каб яна адпавядала 728 × 1024. Гэта лепшая практыка сёння.

    Адзіны выпадак супраць гэтага быў бы, калі б лічбы аналітыкі гэта падтрымлівалі ... але паколькі вы не далі гэтых дадзеных у сваім артыкуле, я б сказаў, што ваш дызайн старонкі няправільны.

  6. 7
  7. 8

    Дурны чалавек
    Не ўсе выкарыстоўваюць кожнае акно ў поўнаэкранным рэжыме - на самай справе, я б паспрачаўся, што мала хто робіць. 

    У мяне ёсць блог у 80% Віндо ... і вось ён, гарызантальная паласа пракруткі

    А тое, што па-за экранам ... дазваляе ўбачыць ... нічога.

    Такім чынам, ваша паласа пракруткі бессэнсоўная.

    Адзін просты спосаб згубіць чытачоў !!

    • 9

      Змест сканцэнтраваны на старонцы @ heenan73: disqus, падаючы чытачу менавіта тое, што ім трэба. Калі я губляю чытачоў, таму што яны абодва бачаць змест І бачаць гарызантальную паласу пракруткі ... не ўпэўнены, што гэта былі тыя чытачы, якіх я шукаю. У нашым змесце, безумоўна, ёсць нешта ўнікальнае, што падштурхоўвае яго да 1217px, таму я збіраюся гэта адсачыць і выправіць. Гэта паведамленне было напісана на тэму папярэдняй тэмы. Дзякуй за ўвагу!

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.