Есть ли стандарт на общем разрешении сайта?
Мы ориентируемся на более новые мониторы, возможно, по крайней мере 1280 пикселей в ширину, но высота может варьироваться, и каждый браузер может иметь разные высоты панели инструментов.
Есть ли какой-то стандарт для этого?
Совет в наши дни:
Оптимизация для 1024x768. Для большинства сайтов это будет охватывать большинство посетителей. Большинство журналов показывают, что 92-99% ваших посещений будут иметь ширину более 1024. В то время как 1280 становится все более распространенным явлением, по-прежнему остается много 1024, а некоторые ниже. Оптимизируйте для этого, но не игнорируйте остальных.
1024 = ~ 960. Учет полос прокрутки, краев окон и т.д. Означает реальная ширина экрана 1024x768 около 960 пикселей. Некоторые инструменты основаны на чуть меньшем размере, около 940. Это ширина контейнера по умолчанию в twitter bootstrap.
Не разрабатывайте для одного размера. Размеры окон варьируются. Не предполагайте, что размер экрана равен размеру окна. Дизайн для разумного минимума, но предположим, что он будет корректироваться.
Использовать адаптивный дизайн и макеты жидкостей. Используйте макеты, которые будут настраиваться при изменении размера окна. Люди делают это много, особенно на больших мониторах. Это просто хорошая практика CSS. Существует несколько интерфейсных фреймворков, которые поддерживают это.
Относитесь к мобильному человеку как к первоклассному гражданину. Вы получаете больше трафика с мобильных устройств все время. Они вносят еще больший размер экрана. Вы все еще можете оптимизировать для 960, но при использовании гибких методов веб-дизайна ваша страница будет корректироваться в зависимости от размера экрана.
Отобразить информацию обозревателя браузера. Вы можете получить фактические цифры об этом. Я нашел несколько цифр здесь и здесь и здесь. Вы также можете настроить свой сайт для сбора тех же данных.
Пользователь будет прокручиваться, поэтому не беспокойтесь о высоте. Старый аргумент состоял в том, что пользователи не будут прокручиваться, и что-то важное должно быть "выше складки". Это было опротестовано несколько лет назад. Пользователи прокручивают много.
Подробнее о разрешениях экрана:
Подробнее о гибком дизайне:
Инструменты и интерфейсные рамки для гибкого дизайна и компоновки жидкостей:
Плохая идея, я верю. Весь смысл отделять контент от макета состоял в том, чтобы ваша веб-страница отображалась в любом браузере.
Ввод искусственных ограничений, таких как минимальный размер экрана, ограничит ваш рынок.
Сказав это, я считаю, что каждый рабочий стол должен иметь возможность отображать 1024x768. Но как насчет браузеров, работающих на iPhone или других экранированных устройствах, или даже тех, которые не используют весь свой рабочий стол для браузера?
В ответ на ваш конкретный вопрос нет, я не верю, что в браузерах есть какой-либо стандарт для минимальной или общей области отображения.
Принуждение пользователя к прокрутке по горизонтали является серьезным нарушением пользовательского интерфейса. Если вы специально не создаете веб-сайт для населения с известным размером экрана, вы гарантируете, что ваш дизайн будет работать с экранами размером 800 пикселей (около 8% от посещений веб-серфинга, если память мне подходит). Разумно заставить его хорошо адаптироваться к более крупным экранам, но не за счет людей, которые все еще занимаются серфингом на 800x600.
Здесь еще одна вещь, которую нужно учитывать: не все запускают свой браузер в полноэкранном режиме (я этого не делаю). Поэтому идея о том, что если "ОК" для проектирования для конкретного (и большого) "размера экрана" действительно не работает по ряду причин.
Обновление от 12/15/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 для случаев, когда вам нужно настроить таргетинг на определенные размеры:
Я получаю много вопросов от дизайнеров о не только ширине, но и о том, какую высоту использовать, чтобы "держать все выше складки". Вот один ответ, который я дал недавно -
Для ширины я не дизайнер, но я читал, что ширина 960px - это способ пойти в эти дни, потому что он может быть разделен на столбцы, которые выглядят красиво и хорошо вписывается в большинство дисплеев. Если вы можете, спроектируйте жидкую компоновку - но это не всегда удобно в зависимости от вашего дизайнера, ваших навыков CSS, изображений и количества текста.
(вы всегда хотите, чтобы в каждой строке было 65-80 символов с высотой строки около 1,15). Это оптимальная ширина столбца для текста, и было доказано, что это намного быстрее и приятно читать, чем очень широкие или узкие столбцы).
Насколько "выше складки", я просто должен предостеречь от использования какой-либо такой концепции в Интернете. Горизонтальную прокрутку можно и нужно избегать, но вертикальная прокрутка - это то, чего вы не можете избежать на 100%. Все, что я могу вам сказать, это то, что на дисплее 1024x768 (как минимум 95% пользователей имеют это или выше), вы должны быть в порядке с фиксированным 600px высоким блоком. Но есть много различных форматов отображения, браузер Chrome может занимать много места, и не каждый максимизирует окно браузера.
вот некоторые другие сайты, которые говорят более или менее одно и то же - но планируя получить абсолютно все "выше складки", для каждого потому что тогда у вас может быть только 400 пикселей или около того, в соответствии с фактическим статистика.
И, наконец, хорошая длинная статья, которая идет в мельчайших подробностях (я бы опубликовал больше, но SO говорит, что я слишком нуб) - Как создать для браузера размеры - baekdal.com
Я лично всегда придерживался максимальной ширины 1000 пикселей, центрированной в середине страницы (с помощью поля влево/вправо: авто).
Если вы работаете на чем-то меньше 1024x768, пришло время для обновления. Шутки в сторону. Это почти в 2010 году. Вы можете купить мониторы lcd bargain bin с родным разрешением 1280x1024.
Я бы посоветовал вам взглянуть на медиа-запросы. Это полезное новое дополнение к CSS, которое действительно имеет такой смысл, вы бы задались вопросом, почему это раньше не было реализовано waaay. В основном это позволяет настраивать атрибуты браузера (такие как max и min-widths) непосредственно через 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
}
Посмотрите, что мы только что сделали, это указать три набора стилей, которые отображаются с разными разрешениями. В случае нашего примера, если разрешение экрана больше 800 пикселей, вместо этого будет выполнен CSS для 1024. Аналогично, если на экране отображается содержимое 1224px, 1280 будет выполняться с 1224 больше 1024. Сайт, над которым я сейчас работаю, работает со всеми разрешениями 800x600 - 1920x1080. Еще одна вещь, о которой следует помнить, заключается в том, что не все мониторы с одинаковым разрешением имеют одинаковые экраны размера. Вы могли бы поставить 15,4 ноутбуков рядом друг с другом, в то время как оба выглядят одинаково, оба могут иметь совершенно разные разрешения, поскольку не все пиксели имеют одинаковый размер на разных ЖК-экранах. Итак, используйте медиа-запросы и начинайте создавать свой сайт с экрана ноутбука с высоким разрешением, особенно 1280+. Кроме того, создайте каждый мультимедийный запрос, используя другое разрешение на вашем ноутбуке. Вы можете использовать свои настройки разрешения в Windows для настройки 800x600 и создания медиа-запроса при этом res, а затем переключиться на 1024x768 и создать другой медиа-запрос при этом res. Я мог бы продолжать и продолжать, но, думаю, вы, ребята, должны понять.
UPDATE: здесь ссылка на использование мультимедийных запросов, которые помогут объяснить больше, Инновационный веб-дизайн для мобильных устройств с мультимедийными запросами
Этот учебник покажет вам, как разрабатывать для всех устройств. Там также есть учебные пособия для Media Queries. Я разработал весь сайт для рендеринга на всех устройствах, на всех экранах и на всех разрешениях без поддоменов и только на CSS! Я все еще работаю над поддержкой планшетов и смартфонов. Сайт идеально подходит для любого ноутбука или вашего 50-дюймового ЖК-телевизора, и многие страницы прекрасно работают на всех мобильных устройствах. Если вы поместите весь свой код на страницу, ваши страницы будут быстро загружаться! Кроме того, не забудьте обратить внимание на обсуждение этой статьи о CSS background-size: cover; или "содержать", они сделают вашу фоновую графику текучей и способны идеально отображать все разрешения.
Следуйте инструкциям на сайтах, и вы можете создать единую веб-страницу, которая отображает все и что угодно!
Попробуйте настроить минимальную ширину 1024. Попробуйте, как это выглядит на 800, но не беспокойтесь слишком много сделать эту работу. В 800x600 практически ни один из основных веб-сайтов не будет работать, поэтому люди, работающие над этим разрешением, все равно будут иметь проблемы.
Если вы собираетесь использовать жидкий макет, убедитесь, что текст не имеет ширины слишком большой, потому что, когда строки слишком длинны, их становится трудно читать. Это основная причина, почему большинство сайтов имеют фиксированную ширину.
Я нацелен на 1024-пиксельные мониторы (но не использую 100% этого пространства). Я отказался от тех, у кого 800x600. Я бы предпочел наказать некоторых из них устаревшим оборудованием, заставив их прокручивать, если им нужно, против наказания каждого новым оборудованием, потратив пространство.
Я полагаю, это зависит от вашей аудитории и характера вашего приложения, хотя.
В конечном счете, это не вопрос стандартов или передовых методов разметки, а скорее знание вашей аудитории и обеспечение того, чтобы ваш сайт делал то, что вы хотите.
Более важно учитывать ширину окна просмотра браузера, а не разрешение экрана - вы не можете предположить, что каждый пиксель на дисплее будет выделен браузеру (и даже если это так, вы должны вычесть браузер Chrome). Если у вас есть доступ к аналитикам, которые сообщают ширину браузера (ширина браузера, но не разрешение экрана), обратите внимание.
Приятно попробовать разместить максимально широкий диапазон видовых экранов, но есть некоторые ограничения. Некоторые проблемы можно решить с помощью типов мультимедиа 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 символов в строке. Или это должен был быть конкретный веб-сайт?
