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

Дызайн вэб -сайта і ўстаноўка шырыні вэб -старонкі на аптымальную шырыню - гэта размова, якую варта весці. Многія з вас заўважылі, што я нядаўна змяніў шырыню дызайну свайго блога. Я высунуў шырыню старонкі да 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 для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.