Рекомендуемое разрешение сайта (ширина и высота)? [закрыто]

Есть ли какие-либо стандарты разрешения обычных веб-сайтов?

Мы ориентируемся на более новые мониторы, возможно, шириной не менее 1280 пикселей, но высота может варьироваться, и у каждого браузера может быть разная высота панели инструментов.

Есть ли в этом какие-то стандарты?

Совет в наши дни:

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

1024 = ~ 960 . Учет полос прокрутки, краев окон и т. Д. Означает, что реальная ширина экрана 1024x768 составляет около 960 пикселей . Некоторые инструменты основаны на немного меньшем размере, около 940 . Это ширина контейнера по умолчанию в начальной загрузке twitter .

Не рассчитывайте на один размер . Размеры окон различаются. Не предполагайте, что размер экрана равен размеру окна. Придумайте разумный минимум, но предполагайте, что он будет адаптироваться.

Используйте адаптивный дизайн и плавные макеты . Используйте макеты, которые будут корректироваться при изменении размера окна. Люди делают это очень часто, особенно на больших мониторах. Это просто хорошая практика CSS. Есть несколько интерфейсных фреймворков, которые поддерживают это.

Относитесь к мобильному телефону как к первоклассному гражданину . Вы постоянно получаете больше трафика с мобильных устройств. Это дает еще больше размеров экрана. Вы все еще можете оптимизировать для 960, но использование адаптивных методов веб-дизайна означает, что ваша страница будет настраиваться в зависимости от размера экрана.

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

Пользователь будет прокручивать, поэтому не беспокойтесь о высоте . Старый аргумент заключался в том, что пользователи не будут прокручивать страницы и все важное должно быть «в верхней части страницы». Это было отменено много лет назад. Пользователи много прокручивают .

Подробнее о разрешениях экрана:

• Разрешение экрана и макет страницы
• Лучшее разрешение экрана для дизайна веб-сайтов
• Дизайн для размера браузера, а не размера экрана

Подробнее об адаптивном дизайне:

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

Инструменты и интерфейсные фреймворки для адаптивного дизайна и гибких макетов:

• Twitter Bootstrap
• Zurb Foundation
• 50 фантастических инструментов для адаптивного веб-дизайна (24 апреля 2012 г.) Дениз Джейкобс и Питер Гасстон

Думаю, плохая идея. Весь смысл отделения содержимого от макета заключался в том, чтобы ваша веб-страница отображалась в любом браузере.

Введение искусственных ограничений, таких как минимальный размер экрана, ограничит ваш рынок.

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

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

Принуждение пользователя к горизонтальной прокрутке - серьезное нарушение пользовательского интерфейса. Если вы специально не создаете веб-сайт для населения с известным размером экрана, для вас безопаснее всего убедиться, что ваш дизайн работает с экранами шириной до 800 пикселей (около 8% пользователей веб-серфинга, если мне не изменяет память). Было бы разумно сделать так, чтобы он хорошо адаптировался к экранам большего размера, но не за счет тех, кто все еще просматривает изображения в разрешении 800x600.

Вот еще одна вещь, которую следует учитывать: не все запускают свой браузер в полноэкранном режиме (я этого не делаю). Итак, идея о том, что if можно разрабатывать для определенного (и большого) «размера экрана», действительно не работает по ряду причин.

Обновление от 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 для случаев, когда вам нужно настроить таргетинг на определенные размеры:

YUI Grid

Я часто получаю вопросы от дизайнеров не только о ширине, но и о том, какую высоту использовать, чтобы «все было выше сгиба». Вот один ответ, который я дал недавно -

Что касается ширины, я не дизайнер, но я читал, что ширина 960 пикселей - это то, что нужно в наши дни, потому что она поддается разделению на столбцы, которые выглядят красиво и хорошо подходят для большинства дисплеев. По возможности создайте гибкий макет - но это не всегда практично, в зависимости от вашего дизайнера, ваших навыков CSS, изображений и количества текста.

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

Что касается «выше сгиба», я просто должен предостеречь от использования любой такой концепции в Интернете. Горизонтальной прокрутки можно и нужно избегать, но вертикальной прокрутки нельзя избежать на 100%. Все, что я могу вам сказать, это то, что на дисплее 1024x768 (как минимум 95% пользователей имеют это или выше) вы должны быть в порядке с фиксированным блоком высотой 600 пикселей. Но существует множество различных форматов отображения, Chrome браузера может занимать много места, и не все увеличивают окно браузера до максимума.

Вот несколько других сайтов, которые говорят более или менее то же самое, но спланировать, чтобы абсолютно все было «выше сгиба» для всех, сложно, потому что тогда у вас может быть только 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. Точно так же, если экран, на котором отображается контент, был 1224 пикселей, 1280 было бы выполнено, поскольку 1224 больше 1024. Сайт, над которым я сейчас работаю, работает во всех разрешениях от 800x600 до 1920x1080. Также следует иметь в виду, что не все мониторы с одинаковым разрешением имеют экраны одинакового размера. Вы можете поставить 15,4 ноутбука рядом, при этом оба выглядят одинаково, но у обоих могут быть совершенно разные разрешения, поскольку не все пиксели имеют одинаковый размер на разных ЖК-экранах. Итак, используйте медиа-запросы и начните создавать свой сайт с экрана ноутбука с высоким разрешением, особенно 1280+. Также, создавайте каждый медиа-запрос с разным разрешением на своем ноутбуке. Вы можете использовать настройки разрешения в Windows, чтобы уменьшить 800x600 и создать медиа-запрос в этом разрешении, а затем переключиться на 1024x768 и создать другой медиа-запрос в этом разрешении. Я мог бы продолжать и продолжать, но я думаю, вы, ребята, должны уловить суть.

ОБНОВЛЕНИЕ: вот ссылка на использование медиа-запросов, которые помогут объяснить больше, Инновационный веб-дизайн для мобильных устройств с медиа-запросами.

Этот учебник покажет вам, как создавать дизайн для всех устройств. Также есть руководства специально для Media Queries. Я разработал весь сайт для рендеринга на всех устройствах, всех экранах и всех разрешениях, без субдоменов и только CSS! Я все еще работаю над поддержкой планшетов и смартфонов. Сайт отлично отображается на любом ноутбуке или 50-дюймовом ЖК-телевизоре, а многие страницы отлично работают на всех мобильных устройствах. Если вы разместите весь свой код на странице, ваши страницы будут загружаться молниеносно! Также не забудьте обратить внимание на обсуждение в этой статье CSS "background-size: cover;" или «содержат» свойства, они сделают фоновую графику плавной и способной идеально отображаться при всех разрешениях.

Следуйте инструкциям на сайтах, и вы сможете создать единую веб-страницу, которая будет отображать все и вся!

Постарайтесь установить минимальную ширину 1024. Попробуйте, как это выглядит на 800, но не беспокойтесь о том, чтобы это сработало. При 800x600 почти ни один из основных веб-сайтов не будет работать, поэтому у людей, работающих с этим разрешением, в любом случае будут постоянно возникать проблемы.

Если вы собираетесь использовать жидкий макет, убедитесь, что текст не становится слишком широким , потому что, когда строки слишком длинные, их становится трудно читать. Это основная причина, по которой большинство веб-сайтов имеют фиксированную ширину.

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

Я полагаю, это зависит от вашей аудитории и от характера вашего приложения.

В конечном итоге, дело не в стандартах или передовых методах разметки, а в знании своей аудитории и обеспечении того, чтобы ваш веб-сайт делал то, что вы от него хотите.

Более важно учитывать ширину области просмотра браузера, а не разрешение экрана - вы не можете предполагать, что каждый пиксель на дисплее будет выделен браузеру (и даже если это так, вам нужно вычесть хром браузера). Если у вас есть доступ к аналитике , что ширина отчета браузер ( пь ширина браузера, а не разрешение экрана) , то обратить самое пристальное внимание.

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

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

Если преобразование является проблемой - и у вас есть макет с фиксированной шириной - вам лучше иметь чертовски вескую причину для размещения всего, что нужно щелкнуть пользователю, чтобы кассовый аппарат двигался "ка-цзин" в любом месте к востоку от 760-го. пиксели.

То же самое и для основной навигации.

Наконец, проверьте свой макет во всем, что попадется под руку. Большой. Маленький. Desktop. Handheld. Работы. Замены нет.

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

* обратите внимание, что из-за округления процентная ставка составляет 100,05%.

Имейте в виду, что чем выше разрешение, тем меньше вероятность того, что интернет-браузер будет работать максимально эффективно.

А в некоторых браузерах тоже есть боковые панели.

Это зависит от того, что вы хотите визуализировать, но я бы выбрал макет переменной ширины, который не ломается при ширине около 800-900.

Высота на самом деле не проблема.

sbeam сказал, что «вы всегда хотите, чтобы в каждой строке было 65-80 символов». Это неправда. В Википедии, например, может быть 180 символов в строке. Или это должен был быть конкретный веб-сайт?