Существует ли какой-либо стандарт общего разрешения веб-сайтов?
Мы нацелены на более новые мониторы, возможно, шириной не менее 1280 пикселей, но высота может варьироваться, и каждый браузер может иметь разную высоту панели инструментов.
Есть ли какой-то стандарт для этого?
Совет в эти дни таков:
Оптимизировать для разрешения 1024 x 768. Для большинства сайтов это будет охватывать большинство посетителей. Большинство журналов показывают, что 92-99% ваших посещений будут иметь ширину более 1024. В то время как 1280 становится все более распространенным, все еще есть много на 1024, а некоторые и ниже. Оптимизируйте для этого, но не игнорируйте другие.
1024 = ~960. Учет полос прокрутки, краев окон и т. д. означает, что реальная ширина экрана 1024x768 составляет около 960 пикселей. Некоторые инструменты основаны на немного меньшем размере, около 940. Это ширина контейнера по умолчанию в бутстрапе Twitter.
Не ориентируйтесь на один размер. Размеры окон разные. Не думайте, что размер экрана равен размеру окна. Разработайте разумный минимум, но предполагайте, что он будет корректироваться.
Используйте адаптивный дизайн и гибкие макеты. Используйте макеты, которые будут корректироваться при изменении размера окна. Люди делают это часто, особенно на больших мониторах. Это просто хорошая практика CSS. Есть несколько интерфейсных фреймворков, поддерживающих это.
Относитесь к мобильным устройствам как к первоклассному гражданину. Вы постоянно получаете больше трафика с мобильных устройств. Они представляют еще больше размеров экрана. Вы по-прежнему можете оптимизировать для 960, но использование адаптивных методов веб-дизайна означает, что ваша страница будет корректироваться в зависимости от размера экрана.
Записывать информацию об отображении в браузере. Вы можете получить реальные цифры об этом. Я нашел несколько номеров здесь и здесь и здесь. Вы также можете настроить свой сайт для сбора тех же данных.
Пользователь будет прокручивать, так что не беспокойтесь о высоте. Старый аргумент заключался в том, что пользователи не будут прокручивать страницу, а все важное должно быть «вверху страницы». Это было отменено много лет назад. Пользователи много прокручивают.
Подробнее о разрешениях экрана:
Подробнее об адаптивном дизайне:
Инструменты и интерфейсные фреймворки для адаптивного дизайна и гибких макетов:
Плохая идея, я считаю. Весь смысл отделения контента от макета заключался в том, чтобы ваша веб-страница отображалась в любом браузере.
Введение искусственных ограничений, таких как минимальный размер экрана, ограничит ваш рынок.
Сказав это, я считаю, что каждый рабочий стол должен иметь возможность отображать 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%.
Есть преимущества этой ширины для их предопределенных сеток (макетов столбцов), которые хорошо работают со стандартными размерами для рекламы, если вы должны были их включить.
Интересный разговор тоже стоит посмотреть.
см. базу YUI
Вот отличный инструмент: размер браузера Google Labs.
Я бы сказал, что вы должны ожидать, что у пользователей будет только монитор с разрешением 800x600. У правительства Канады есть стандарты, в которых это указано как одно из требований. Хотя это может показаться низким для кого-то с модным широкоэкранным монитором, помните, что не у всех есть хороший монитор. Я до сих пор знаю многих людей, использующих разрешение 1024x768. И совсем не редкость встретить кого-то, кто работает в 800x600, особенно в дешевых интернет-кафе во время путешествий. Кроме того, приятно иметь возможность сделать окно браузера полноэкранным, если вы этого не хотите. Вы можете сделать сайт шире на более широких мониторах, но не заставляйте пользователя прокручивать его по горизонтали. Всегда. Еще одним преимуществом поддержки более низких разрешений является то, что ваш сайт будет работать на мобильных телефонах и 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 для случаев, когда вам нужно настроить таргетинг на определенные размеры:
Я получаю много вопросов от дизайнеров не только о ширине, но и о том, какую высоту использовать, чтобы «держать все выше сгиба». Вот один ответ, который я дал недавно -
Что касается ширины, я не дизайнер, но я читал, что ширина 960 пикселей — это то, что нужно в наши дни, потому что она поддается разделению на столбцы, которые выглядят красиво и хорошо подходят для большинства дисплеев. Если можете, создайте жидкий макет — но это не всегда практично в зависимости от вашего дизайнера, ваших навыков CSS, изображений и количества текста.
(вы всегда хотите, чтобы в строке было 65-80 символов с высотой строки около 1,15). Это оптимальная ширина столбца для текста, и было доказано, что его намного быстрее и приятнее читать, чем очень широкие или узкие столбцы)
Что касается «выше сгиба», я просто должен предостеречь от использования любой такой концепции в Интернете. Горизонтальной прокрутки можно и нужно избегать, но вертикальной прокрутки нельзя избежать на 100%. Все, что я могу вам сказать, это то, что на дисплее с разрешением 1024x768 (по крайней мере, 95% пользователей имеют это или выше) вы должны быть в порядке с фиксированным блоком высотой 600 пикселей. Но существует множество различных форматов отображения, хром браузера может занимать много места, и не все максимизируют окно браузера.
вот некоторые другие сайты, которые говорят более или менее то же самое, но планировать получить абсолютно все «выше сгиба» для всех сложно, потому что тогда у вас может быть только 400 пикселей или около того, согласно фактической статистике.
И, наконец, хорошая длинная статья с подробным описанием (я бы опубликовал больше, но SO говорит, что я слишком нуб) — Как создать дизайн для размеров браузера — 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 пикселей. Точно так же, если экран, отображающий содержимое, имеет разрешение 1224 пикселя, то будет выполнено значение 1280, поскольку 1224 больше, чем 1024. Сайт, над которым я сейчас работаю, работает при всех разрешениях от 800x600 до 1920x1080. Следует также помнить, что не все мониторы с одинаковым разрешением имеют экраны одинакового размера. Вы можете поставить 15,4-дюймовые ноутбуки рядом, хотя оба они будут выглядеть одинаково, оба могут иметь совершенно разные разрешения, поскольку не все пиксели имеют одинаковый размер на разных ЖК-экранах. Итак, используйте медиа-запросы и начните создавать свой веб-сайт с экраном ноутбука с высоким разрешением, особенно 1280+. Кроме того, создавайте каждый медиа-запрос, используя другое разрешение на своем ноутбуке. Вы можете использовать свои настройки разрешения в Windows, чтобы уменьшить 800x600 и создать медиа-запрос с этим разрешением, а затем переключиться на 1024x768 и создать другой медиа-запрос с этим разрешением. Я мог бы продолжать и продолжать, но я думаю, что вы, ребята, должны уловить суть.
ОБНОВЛЕНИЕ: Вот ссылка на использование медиа-запросов, которые помогут объяснить больше, Инновационный веб-дизайн для мобильных устройств с медиа-запросами
Этот учебник покажет вам, как создавать дизайн для всех устройств. Также есть учебные пособия для медиа-запросов. Я разработал весь сайт для отображения на всех устройствах, всех экранах и всех разрешениях без субдоменов и только с помощью CSS! Я все еще работаю над поддержкой планшетов и смартфонов. Сайт отлично отображается на любом ноутбуке или на 50-дюймовом ЖК-телевизоре, а многие страницы прекрасно работают на всех мобильных устройствах. Если вы разместите весь свой код на странице, ваши страницы будут загружаться молниеносно! Кроме того, обязательно обратите внимание на обсуждение в этой статье CSS «размер фона: обложка;» или «содержать» свойства, они сделают вашу фоновую графику плавной и смогут идеально отображать при любом разрешении.
Следуйте руководствам по сайтам, и вы сможете создать единую веб-страницу, которая будет отображаться на всем и на чем угодно!
Попробуйте настроить таргетинг на 1024 в качестве минимальной ширины. Попробуйте, как это выглядит на 800, но не слишком заморачивайтесь, чтобы это работало. В разрешении 800x600 почти ни один из крупных веб-сайтов не будет работать, поэтому люди, работающие в этом разрешении, все равно будут постоянно иметь проблемы.
Если вы собираетесь использовать плавный макет, убедитесь, что текст не становится слишком широким, потому что когда строки слишком длинные, их становится трудно читать. Это основная причина, по которой большинство веб-сайтов имеют фиксированную ширину.
Я ориентируюсь на мониторы с разрешением 1024 пикселя (но не использую 100% этого пространства). Я отказался от тех, у которых 800x600. Я бы предпочел наказать немногих устаревшим оборудованием, заставив их прокручивать страницу, если это необходимо, вместо того, чтобы наказывать всех новым оборудованием, тратя место впустую.
Я полагаю, это зависит от вашей аудитории и характера вашего приложения.
В конечном счете, это не вопрос стандартов или рекомендаций по разметке, а скорее знание вашей аудитории и обеспечение того, чтобы ваш веб-сайт делал то, что вы хотите.
Более важно учитывать ширину области просмотра браузера, а не разрешение экрана — вы не можете предполагать, что каждый пиксель на дисплее будет выделен для браузера (и даже если это так, вы должны вычесть хром браузера). Если у вас есть доступ к аналитике, сообщающей о ширине браузера (n.b. ширина браузера, а не разрешение экрана), будьте очень внимательны.
Приятно попытаться разместить как можно более широкий диапазон окон просмотра, но есть некоторые ограничения. С некоторыми проблемами можно справиться с помощью типов мультимедиа CSS, с некоторыми нельзя. Некоторые из них можно обрабатывать с помощью гибких макетов. Но гибкие макеты не могут работать во всех ситуациях, в зависимости от типа отображаемой информации, длины строки, удобства чтения и т. д. и т. д. Некоторые гибкие макеты не работают на широких дисплеях. Большинство из них ломаются, если их размер меньше определенной ширины и т. д. и т. д.
Как бы мне лично не хотелось проектировать для видовых экранов ~960 пикселей и выше, вы не всегда можете это сделать. Таким образом, в некоторых случаях все еще безопаснее проектировать для видовых экранов ‹=760 пикселей или около того (экран шириной 800 пикселей, максимизированный) — хотя время, когда мы, наконец, можем отказаться от этого ограничения раз и навсегда — по крайней мере, для рабочего стола — очень быстро приближается.
Там, где конверсия является проблемой — и у вас макет с фиксированной шириной — у вас должна быть чертовски веская причина помещать все, что нужно пользователю, чтобы щелкнуть, чтобы кассовый аппарат пошел «ка-цзин» где-нибудь к востоку от 760-го. пиксель.
То же самое для основной навигации.
Наконец, проверьте свой макет на всем, до чего сможете дотянуться. Большой. Маленький. Рабочий стол. Портативный. Работы. Нет замены.
Я только что взял образец разрешения экрана со всех клиентских сайтов, к которым у меня есть доступ, включая более 20 сайтов в более чем 8 отраслях, вот результаты:
http://unkwndesign.com/so/percentScreenResolutions.png
Основываясь на этом, я бы сказал, что он хорошо выглядит на 1024x768, так как это большинство здесь. Также не беспокойтесь о высоте, однако старайтесь не делать большинство страниц более 1-2 печатных страниц с размером шрифта по умолчанию, большинство людей не будут читать такую длинную страницу, и если пользователь установит панель инструментов, которая занимает вертикальное пространство, мое личное предпочтение состоит в том, что это их проблема, но я не думаю, что это имеет большое значение.
*Обратите внимание, что сумма процентов составляет 100,05% из-за округления.
Имейте в виду, что чем выше разрешение, тем меньше вероятность того, что интернет-браузер будет максимально загружен.
И в некоторых браузерах тоже есть боковые панели.
Это зависит от того, что вы хотите визуализировать, но я бы выбрал макет с переменной шириной, который не ломается при ширине около 800-900.
Высота на самом деле не проблема.
sbeam сказал, что «вы всегда хотите, чтобы в строке было 65-80 символов». Это неправда. В Википедии, например, может быть 180 символов в строке. Или это должен был быть конкретный сайт?
