Рекомендована роздільна здатність веб-сайту (ширина та висота)? [зачинено]

Чи є стандарт щодо загальної роздільної здатності веб-сайту?

Ми орієнтовані на нові монітори, можливо, принаймні шириною 1280 пікселів, але висота може змінюватися, і кожен браузер може мати різну висоту панелі інструментів.

Чи є якийсь стандарт до цього?

Пора в ці дні:

Оптимізуйте для 1024x768 . Для більшості сайтів це охопить більшість відвідувачів. Більшість журналів показують, що 92-99% ваших відвідувань буде більше 1024. Хоча 1280 все частіше зустрічається, є ще 1024, а деякі нижче цього. Оптимізуйте це, але не ігноруйте інших.

1024 = ~ 960 . Облік смуг прокрутки, краї вікон тощо означає, що реальна ширина екрана 1024x768 становить приблизно 960 пікселів . Деякі інструменти базуються на трохи менших розмірах, близько 940 . Це ширина контейнера за замовчуванням у завантажувальній системі Twitter .

Не дизайнуйте для одного розміру . Розміри вікон варіюються. Не вважайте, що розмір екрана дорівнює розміру Windows. Дизайн для розумного мінімуму, але припустимо, що він буде коригуватися.

Використовуйте гнучку конструкцію та рідкі макети . Використовуйте макети, які регулюються, коли розмір вікна буде змінено. Люди роблять це багато, особливо на великих моніторах. Це просто хороша практика CSS. Існує кілька фронтальних рамок, які підтримують це.

Ставтесь до мобільних як до першокласного громадянина . Ви постійно отримуєте більше трафіку з мобільних пристроїв. Вони вводять ще більше розмірів екрану. Ви все ще можете оптимізувати для 960, але використання чуйних методів веб-дизайну означає, що ваша сторінка буде коригуватися залежно від розміру екрана.

Відображення інформації браузера журналу . Ви можете отримати фактичні цифри з цього приводу. Я знайшов деякі номери тут і тут і тут . Ви також можете налаштувати свій сайт для збору тих же даних.

Користувач буде прокручувати, тому не хвилюйтесь над висотою . Старий аргумент полягав у тому, що користувачі не будуть прокручувати, і що-небудь важливе повинно бути "вище згину" Це було перевернуто років тому. Користувачі багато прокручують .

Докладніше про роздільну здатність екрана:

• Дозвіл екрана та макет сторінки
• Найкраща роздільна здатність екрана для створення веб-сайтів
• Дизайн для розміру браузера - не розмір екрана

Детальніше про чуйний дизайн:

• Чуйний веб-дизайн (2010 р., 25 травня), Етан Маркотт, A List Apart.
• Чуйний веб-дизайн у Вікіпедії
• Шаблони компонування на декількох пристроях (2012, 14 березня) Люк Врублевський. Каталогізує найпопулярніші зразки адаптивних макетів на екрані з декількома пристроями.

Інструменти та фронтальні рамки для чуйного дизайну та рідких макетів:

• Twitter Bootstrap
• Фонд Зурб
• 50 фантастичних інструментів для чуйного веб-дизайну (2012, 24 квітня) Denise Jacobs та Peter Gasston

Думаю, погана ідея. Вся суть у відділенні вмісту від макета полягала в тому, щоб ваша веб-сторінка відображалася в будь-якому веб-переглядачі.

Введення штучних обмежень, таких як мінімальний розмір екрана, обмежить ваш ринок.

Сказавши це, я вважаю, що кожен робочий стіл повинен мати змогу відображати 1024x768. А як щодо браузерів, які працюють на iPhone або інших пристроях, що захищають екран, або навіть тих, які не використовують весь робочий стіл для браузера?

Відповідаючи на ваше конкретне запитання, ні, я не вірю, що в браузерах існує якийсь стандарт для мінімальної або загальної області відображення.

Змусити свого користувача прокручувати горизонтально - це серйозне переступ інтерфейсу користувача. Якщо ви спеціально не створюєте веб-сайт для населення з відомим розміром екрана, ви найбезпечніше гарантуєте, що ваш дизайн працює з екранами розміром до 800 пікселів (приблизно 8% населення веб-серфінгу, якщо пам'ять служить мені правильно). Це розумно зробити так, щоб він добре адаптувався до великих екранів, але не ціною людей, які все ще займаються серфінгом у 800x600.

Ось ще одна річ, яку слід також врахувати: не кожен запускає свій браузер у повноекранному режимі (я цього не роблю). Тож ідея, що якщо гаразд проектувати для конкретного (і великого) "розміру екрана", справді не працює з кількох причин.

Оновлення 15.12.2010: Коли я вперше відповів на це запитання, 800 пікселів була відповідна відповідь. Однак у цей момент я б рекомендував 1024 пікселів у ширину (або 960, як хтось інший вказує). Технологія марширує на ...

Ось статистика відображення браузера у 2008 році: http://www.w3schools.com/browsers/browsers_display.asp

Близько 50% користувачів все ще використовують 1024x768. Якщо ви хочете, щоб ваш сайт добре виглядав у високій роздільній здатності, використовуйте гнучку верстку.

насправді є галузеві стандарти на ширину (ну, як мінімум, відповідно до yahoo). Їх підтримувані ширини - 750, 950, 974, 100%

Ці ширини мають переваги для їх заздалегідь заданих сіток (макетів стовпців), які добре співпадають із стандартними розмірами для реклами, якби ви включали будь-яку.

Цікаву розмову теж варто переглянути.

див. Базу ЮІ

Ось дивовижний інструмент: розмір браузера Google Labs

Я б сказав, що слід очікувати, що користувачі матимуть монітор з роздільною здатністю 800x600. Уряді Канади є стандарти, які перераховують це як одну з вимог. Хоча це може здатися низьким для когось із фантазійним широкоекранним монітором, пам’ятайте, що не у всіх є гарний монітор. Я досі знаю багато людей, які працюють у 1024x768. І зовсім не рідкість натрапити на когось, хто працює в 800х600, особливо в дешевих веб-кафе під час подорожі. Крім того, приємно мати, якщо ви не хочете, щоб це вікно вашого браузера було зроблено на весь екран. Ви можете зробити сайт ширшим на ширших моніторах, але не примушуйте користувачів прокручувати горизонтально. Колись. Ще однією перевагою підтримки нижчих роздільних можливостей є те, що ваш сайт буде працювати на мобільних телефонах, а Nintendo Wii набагато простіше.

Примітка до вашої, щонайменше, 1280 завширшки, я б сказав, що це за борт. Більшість 17-ти і навіть моїх 19-дюймових нешироких моніторів підтримують лише максимальну роздільну здатність 1280x1024. А 14-дюймовий широкоекранний ноутбук, який я зараз набираю, становить лише 1280 пікселів. Я б сказав, що найбільша мінімальна роздільна здатність, до якої слід прагнути, - це 1024x768, але 800x600 було б ідеально.

На сьогодні всі відповіді говорять про монітори настільних ПК, але я використовую переповнення стека на своєму iPhone, і я не думаю, що вам слід виключати будь-яку мобільну платформу, орієнтуючись на 1024 або 1280 горизонтальних пікселів. Позначте свою сторінку, щоб веб-переглядач знав, що все це означає, і зробити її корисною стане безкоштовно навіть на читачах екрану та іншому наборі, про який ви ще не думали.

Краще не орієнтуватися на якусь конкретну роздільну здатність, а легко адаптуватися до багатьох різних резолюцій.

Настанови, які ми використовуємо, які, здається, досить широко використовуються та підкріплені цифрами, отриманими від Google Analytics, - це створити сайт так, щоб він працював на екрані, шириною 1024 пікселів та висоті 768 пікселів (1024x768 та 1280x800 - найпоширеніші рішення, які ми бачимо, і складають щонайменше 70% усього трафіку).

Ось чому ви бачите багато сайтів (цей включений), які використовують центральний стовпчик шириною приблизно 1000 пікселів і найважливіший вміст у верхній 500-600 пікселів, так що він знаходиться вище згину при перегляді на екранах такого розміру.

Використання макета шириною 1000 пікселів працює досить добре на розмірах екрана шириною до приблизно 1680 пікселів (як правило, таких високих, як ви побачите на ноутбуках, крім великих 17-дюймових), але на 1920 пікселів почнете виглядати трохи нерозумно широкі (комп’ютери високого класу, як правило, робочі станції), однак ці дуже високі дозволи не приносять великого відсотка трафіку в загальному Інтернеті - 2% або менше (з іншого боку, якщо у вас є спеціалізована аудиторія, як цей сайт , цифра з високою роздільною здатністю може бути дещо вищою).

Хоча найкраща ширина може бути до 1024, вам доведеться регулювати висоту для облікового запису для різних налаштувань браузера (панель навігації, панель інструментів закладок, панель інструментів статусу тощо) та обліковий запис параметрів панелі завдань. Це швидко знизить 768 до приблизно 550.

Незалежно від розміру цільового веб-переглядача, обов’язково вкажіть простір для панелей інструментів веб-переглядача, панелей стану та смуг прокрутки, як зазначено вище. Internet Explorer (IME) часто має понад 100 пікселів вертикального простору на панелях інструментів і панелях стану. Як правило, якщо я знімаю 1024 x 768, я б спробував створити конструкцію шириною близько 960 - 980 пікселів і висотою 600 пікс. Таким чином ви вміщуєте прокрутку, якщо потрібно, і трохи приємного білого простору (якщо дизайн вимагає цього). Я настійно рекомендую сітки YUI для тих випадків, коли вам потрібно націлити конкретні розміри:

Сітка YUI

У дизайнерів багато питань, що стосуються не тільки ширини, але і висоти, щоб "тримати все вище складки". Ось одна відповідь, яку я дав нещодавно -

Що стосується ширини, я не дизайнер, але я читав, що ширина 960 пікселів - це шлях, який потрібно пройти в наші дні, оскільки він може бути розділений на стовпці, які добре виглядають, і добре вписуються в більшість дисплеїв. Якщо можете, спроектуйте рідкий макет - але це не завжди практично залежно від вашого дизайнера, ваших навичок CSS, зображень та кількості тексту.

(Ви завжди хочете, щоб у кожному рядку було 65-80 символів, висота рядка - приблизно 1,15). Це оптимальна ширина стовпця для тексту, і це було доведено набагато швидше і приємніше для читання, ніж дуже широкі або вузькі стовпці)

Що стосується "верхньої частини", я просто застережуюсь від використання будь-якої такої концепції в Інтернеті. Горизонтального прокручування можна і слід уникати, але вертикальне прокручування - це те, чого не можна уникнути на 100%. Все, що я можу вам сказати, - це те, що на дисплеї 1024x768 (принаймні 95% користувачів мають те чи вище), ви повинні бути в порядку з фіксованим високим блоком 600px. Але є багато різних форматів відображення, хром браузера може займати багато місця, і не кожен максимізує вікно браузера.

Ось деякі інші сайти, які говорять про те, що більш-менш те саме - але планувати отримати абсолютно все, що виходить за «складку» для всіх, важко, тому що тоді ви можете мати лише 400 пікс.

І, нарешті, хороша довга стаття, яка детально описується (я розміщую більше, але ТАК каже, що я занадто нуб) - Як створити розміри браузера - baekdal.com

Я особисто завжди дотримувався максимальної ширини 1000 пікселів з центром у середині сторінки (через поле зліва / справа: авто).

Якщо ви працюєте на що-небудь менше 1024x768, настав час оновити. Серйозно. Це майже 2010 рік. Ви можете придбати вигідні монітори з ЖК-дисплеєм з рідною роздільною здатністю 1280x1024.

Я б запропонував вам переглянути медіа-запити. Це корисне нове доповнення до CSS, яке насправді має стільки сенсу, ви б задумалися, чому це раніше не було реалізовано. В основному це дозволяє націлювати атрибути веб-переглядача (такі як максимальна та мінімальна ширини) безпосередньо за допомогою CSS та розв'язувати звідти код макета. Подібно до створення таблиць стилів друку, ви можете створювати макети робочого столу та мобільних пристроїв паралельно в одному файлі, який запускає дупу для розвитку.

Хоча гнучкі або рідкі макети трохи не реструктурують дизайн, наприклад, якщо ви використовуєте фонові зображення, які повинні відповідати фоновому зображенню тіла.

Я б скоріше створив різні макети css для сайту та застосував би їх, залежно від роздільної здатності користувача, або якщо це неможливо (ще не вникав у це), зробив би це вибір.

Добре, я бачу тут багато дезінформації. Для початку створення веб-сторінки з певною роздільною здатністю, наприклад, 800x600, робить цю сторінку візуалізованою належним чином, використовуючи лише цю роздільну здатність! Коли ця сама сторінка відображається на чужому ноутбуці чи домашньому моніторі ПК, сторінка відображатиметься за допомогою поточної роздільної здатності екрана, а не роздільної здатності, яку ви використовували при розробці сторінки. Не створюйте веб-сторінки для однієї конкретної роздільної здатності! Занадто багато різних співвідношень сторін та роздільної здатності екрана, щоб очікувати сценарію "один розмір, який підходить усім", що для веб-дизайну не існує. Ось таке рішення: Використовуйте CSS3 Media Queries, щоб створити код, що адаптується до роздільної здатності. Ось приклад:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Дивіться, що ми тільки що зробили, це вказати 3 набори стилів, які відображаються з різною роздільною здатністю. У нашому прикладі, якщо роздільна здатність екрана перевищує 800 пікселів, замість цього буде виконуватися CSS для 1024. Так само, якби екран, який відображав вміст, був 1224px, 1280 виконується з 1224 більше, ніж 1024. Сайт, над яким я зараз працюю, функціонує з усіма роздільними здатностями 800x600 до 1920x1080. Ще слід пам’ятати, що не всі монітори з однаковою роздільною здатністю мають екрани однакового розміру. Ви можете помістити ноутбуки 15,4 поряд, при цьому обидва виглядають однаково, обидва могли мати різну роздільну здатність, оскільки не всі пікселі однакового розміру на різних РК-екранах. Отже, використовуйте медіа-запити та починайте створювати свій веб-сайт із екрана ноутбука з високою роздільною здатністю, зокрема 1280+. Також, створити кожен медіа-запит, використовуючи іншу роздільну здатність на своєму ноутбуці. Ви можете скористатися налаштуваннями роздільної здатності в Windows, щоб відрегулювати 800x600 та створити медіа-запит у цьому розділі, а потім переключитися на 1024x768 та створити інший медіа-запит на це Res. Я міг би продовжувати і продовжувати, але я думаю, ви, хлопці, повинні зрозуміти.

ОНОВЛЕННЯ: Ось посилання на використання медіа-запитів, що допоможе пояснити більше, інноваційний веб-дизайн для мобільних пристроїв із медіа-запитами

У цьому підручнику буде показано, як створити дизайн для всіх пристроїв. Також є підручники для медіа-запитів. Я розробив цілий сайт для візуалізації на всіх пристроях, на всіх екранах та всіх роздільних рішеннях, не використовуючи піддомен, а лише CSS! Я все ще працюю над підтримкою планшетів та смартфонів. Цей сайт ідеально відображається на будь-якому ноутбуці або вашому РК-телевізорі 50 дюймів, і багато сторінок відмінно працюють на всіх мобільних пристроях. Якщо ви розмістите весь код на своїй сторінці, то ваші сторінки швидко завантажуються! Також не забудьте звернути увагу на обговорення у цій статті про CSS "background-size: cover;" або "містять" властивості, вони зроблять вашу фонову графіку текучою та зможуть ідеально відтворювати при будь-якій роздільній здатності.

Дотримуйтесь посібників щодо сайтів, і ви можете створити єдину веб-сторінку, яка відображає все і все!

Спробуйте націлити 1024 як мінімальну ширину. Спробуйте, як це виглядає на 800, але не турбуйтеся занадто сильно, щоб це працювало. У 800x600 майже жоден з основних веб-сайтів не працює, тому у людей, які працюють над цією резолюцією, все одно будуть виникати проблеми.

Якщо ви збираєтеся шукати рідкий макет, переконайтеся, що текст не надто широкий , тому що, коли рядки занадто довгі, їх стає важко читати. Це основна причина, чому більшість веб-сайтів мають фіксовану ширину.

Я націлюю монітори на 1024 пікселів (але не використовую 100% цього простору). Я відмовився від тих, хто має 800x600. Я вважаю за краще покарати кількох застарілим обладнанням, змусивши їх прокручувати, якщо потрібно, проти того, щоб покарати всіх новим обладнанням, витрачаючи місце.

Я думаю, це залежить від вашої аудиторії, але і від характеру вашої програми.

Зрештою, це не питання стандартів чи найкращих практик розмітки, а краще знання вашої аудиторії та переконання, що ваш веб-сайт робить те, що ви хочете.

Важливіше враховувати ширину вікна перегляду браузера, а не роздільну здатність екрана - ви не можете припустити, що кожен піксель на дисплеї буде виділятися для браузера (і навіть якщо він є, ви повинні відняти хром браузера). Якщо у вас є доступ до аналітики, яка повідомляє про ширину браузера ( nb ширина браузера, а не роздільна здатність екрана), тоді зверніть дуже пильну увагу.

Приємно намагатися розмістити якомога ширший діапазон оглядів, але є деякі обмеження. Деякі проблеми можна вирішити за допомогою CSS-типів , а деякі - не. Деякі з них можна обробити за допомогою рідинних макетів. Але макети рідини не можуть працювати у будь-яких ситуаціях, залежно від типу інформації, яка відображається, довжини рядка, зручності читання тощо. Деякі макети рідини не працюють на широких екранах. Більшість ламаються при розмірі нижче певної ширини тощо.

Настільки, як я особисто хотів би створити для оглядових вікон ~ 960 пікселів і вище, ви не завжди можете це зробити. Тож у деяких випадках все-таки найбезпечніше розробити оглядові огляди <= 760 пікселів або близько того (широкий дисплей 800 пікселів, максимально збільшений) - хоча час, коли ми нарешті можемо скинути це обмеження раз і назавжди - принаймні для робочого столу - дуже швидко наближається.

Де перетворення - це проблема - і у вас є фіксований розмір ширини - вам краще мати притягнуту вагому причину розміщувати все, що потрібно натиснути користувачеві, щоб касовий апарат перейшов "ка-чинг" кудись на схід від 760-х пікселів.

Діто для первинної навігації.

Нарешті, протестуйте свій макет у всьому, до чого ви можете потрапити. Великий. Маленький. Настільний. Ручний. Твори. Замінника немає.

Я щойно взяв вибірку роздільної здатності екрана з усіх клієнтських сайтів, до яких я маю доступ, сюди входить більше 20 сайтів з більш ніж 8 галузей. Ось результати:
alt текст http://unkwndesign.com/so/percentScreenResolutions.png
Виходячи з цього, я б сказав, що гарантує, що це добре виглядає на 1024x768, оскільки це більшість з дальнього пострілу. Також не хвилюйтеся про висоту, але намагайтеся уникати більшості сторінок більше 1-2 друкованих сторінок за розміром шрифту за замовчуванням, більшість людей не хочуть читати сторінку так довго, і якщо користувач встановлює панель інструментів, яка займає вертикальний простір, мої особисті переваги полягають у тому, що це їхня проблема, але я не думаю, що це велика справа.

* зауважте, відсоток додає до 100,05% через округлення.

Майте на увазі, що чим вище роздільна здатність, тим менше ймовірність того, що веб-браузер буде максимальним.

А деякі веб-переглядачі також мають бічні смуги.

Це залежить від того, що ви хочете відобразити, але я хотів би зі схемою змінної ширини, яка не розбивається приблизно на 800-900 ширини.

Висота насправді не є проблемою.

sbeam сказав, що "ви завжди хочете, щоб у вас було 65-80 символів на рядок". Це не правда. Наприклад, у Вікіпедії може бути 180 символів на рядок. Або малося на увазі певний веб-сайт?