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

Есть ли какой-нибудь стандарт для общего разрешения веб-сайтов?

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

Есть ли какой-то стандарт к этому?

120 голосов | спросил Aximili 19 Jam1000000amMon, 19 Jan 2009 03:53:41 +030009 2009, 03:53:41

23 ответа


0

Совет в эти дни:

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

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

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

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

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

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

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

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

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

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

ответил Karl Fast 12 FebruaryEurope/MoscowbThu, 12 Feb 2009 18:57:00 +0300000000pmThu, 12 Feb 2009 18:57:00 +030009 2009, 18:57:00
0

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

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

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

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

ответил paxdiablo 19 Jam1000000amMon, 19 Jan 2009 03:57:26 +030009 2009, 03:57:26
0

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

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

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

ответил Mark Brittingham 19 Jam1000000amMon, 19 Jan 2009 04:07:31 +030009 2009, 04:07:31
0

Вот статистика отображения браузера в 2008 году: http://www.w3schools.com/browsers/browsers_display.asp >

Около 50% пользователей все еще используют 1024x768. Если вы хотите, чтобы ваш сайт выглядел красиво в высоком разрешении, используйте гибкий макет.

ответил Adam Dziendziel 19 Jam1000000amMon, 19 Jan 2009 04:04:35 +030009 2009, 04:04:35
0

На самом деле существуют отраслевые стандарты ширины (по крайней мере, в соответствии с Yahoo). Их поддерживаемая ширина составляет 750, 950, 974, 100%.

Эти ширины имеют преимущества для их предопределенных сеток (макетов столбцов), которые хорошо работают со стандартными размерами для рекламных объявлений, если вы их включите.

Интересный разговор тоже стоит посмотреть.

см. База YUI

ответил Simon_Weaver 25 Jam1000000amSun, 25 Jan 2009 04:02:01 +030009 2009, 04:02:01
0

Вот замечательный инструмент: Размер браузера Google Labs

ответил Plynx 14 FebruaryEurope/MoscowbSun, 14 Feb 2010 02:22:08 +0300000000amSun, 14 Feb 2010 02:22:08 +030010 2010, 02:22:08
0

Я бы сказал, что вы должны ожидать, что у пользователей будет только монитор с разрешением 800x600. У канадского правительства есть стандарты, которые перечисляют это как одно из требований. Хотя это может показаться низким для кого-то с причудливым широкоэкранным монитором, помните, что не у всех есть хороший монитор. Я до сих пор знаю много людей, работающих с разрешением 1024x768. И совсем не редкость встречать кого-то, кто работает в разрешении 800x600, особенно в дешевых интернет-кафе во время путешествий. Кроме того, приятно, если вы не хотите, чтобы окно браузера было полноэкранным. Вы можете сделать сайт шире на более широких мониторах, но не заставляйте пользователя прокручивать его по горизонтали. Когда-либо. Еще одним преимуществом поддержки более низких разрешений является то, что ваш сайт будет работать на мобильных телефонах, а Nintendo Wii намного проще.

Заметка на вашем ширине не менее 1280, я бы сказал, что это за бортом. Большинство 17 и даже мои 19-дюймовые не широкоформатные мониторы поддерживают только максимальное разрешение 1280x1024. А 14-дюймовый широкоэкранный ноутбук, на котором я сейчас печатаю, имеет ширину всего 1280 пикселей. Я бы сказал, что самое большое минимальное разрешение, к которому нужно стремиться, это 1024x768, но 800x600 было бы идеально.

ответил Kibbee 19 Jam1000000amMon, 19 Jan 2009 03:59:46 +030009 2009, 03:59:46
0

Все ответы до сих пор говорят о настольных мониторах, но я использую переполнение стека на моем iPhone, и я не думаю, что вы должны исключать какую-либо мобильную платформу, ориентируясь на 1024 или 1280 горизонтальных пикселей. Разметьте страницу так, чтобы браузер знал, что все это значит, и ее использование будет бесплатным, даже для программ чтения с экрана и других комплектов, о которых вы не задумывались.

ответил 19 Jam1000000amMon, 19 Jan 2009 04:14:35 +030009 2009, 04:14:35
0

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

ответил Nate879 19 Jam1000000amMon, 19 Jan 2009 03:57:54 +030009 2009, 03:57:54
0

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

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

Использование макета шириной 1000 пикселей довольно неплохо работает на экранах шириной до 1680 пикселей (как правило, таких же высоких, как вы видите на ноутбуках, кроме больших 17 "), но начинаете выглядеть немного глупо на 1920 пикселях (высокопроизводительные компьютеры, обычно рабочие станции), однако эти очень высокие разрешения не составляют большой процент трафика в обычном Интернете - 2% или меньше (с другой стороны, если у вас есть специализированная аудитория) как и на этом сайте, показатель с высоким разрешением может быть несколько выше).

ответил Greg Beech 19 Jam1000000amMon, 19 Jan 2009 04:03:38 +030009 2009, 04:03:38
0

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

ответил Black Cat 19 Jam1000000amMon, 19 Jan 2009 04:07:28 +030009 2009, 04:07:28
0

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

Сетка YUI

ответил typeoneerror 19 Jam1000000amMon, 19 Jan 2009 04:08:34 +030009 2009, 04:08:34
0

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

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

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

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

вот некоторые другие сайты, которые говорят более или менее то же самое - но Планирование получить абсолютно все «выше сгиба» для всех сложно потому что тогда у вас может быть только 400px или около того, в соответствии с фактическим статистика.

И, наконец, хорошая длинная статья, которая очень подробно описана (я бы написал больше, но ТАК говорит, что я слишком нуб)  - Как разработать размеры браузера - baekdal.com р>

ответил sbeam 19 J0000006Europe/Moscow 2009, 22:19:13
0

Лично я всегда придерживался максимальной ширины 1000 пикселей, по центру страницы (через поле слева /справа: авто).

Если вы работаете с разрешением менее 1024x768, пришло время обновить. Шутки в сторону. Уже почти 2010 год. Вы можете купить ЖК-мониторы со скидкой с разрешением 1280x1024.

ответил Sneakyness 23 J000000Thursday09 2009, 17:08:36
0

Я бы посоветовал вам взглянуть на медиа-запросы. Это полезное новое дополнение к CSS, которое действительно имеет столько смысла, что вы удивитесь, почему это не было реализовано ранее. По сути, он позволяет вам нацеливать атрибуты браузера (такие как max и min-widths) напрямую через CSS и переходить оттуда к вашему макету кода. Подобно созданию таблицы стилей для печати, вы можете параллельно создавать макеты рабочего стола и мобильного устройства в одном файле, что не дает покоя при разработке.

ответил Jesse 13 MonEurope/Moscow2010-12-13T22:06:12+03:00Europe/Moscow12bEurope/MoscowMon, 13 Dec 2010 22:06:12 +0300 2010, 22:06:12
0

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

Я бы предпочел сделать разные макеты CSS для сайта и сделать так, чтобы они применялись в зависимости от разрешения пользователя, или, если это невозможно (еще не копались в этом), сделайте это выбором.

ответил mike 31 MarpmThu, 31 Mar 2011 12:57:15 +04002011-03-31T12:57:15+04:0012 2011, 12:57:15
0

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

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

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

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

ответил djdaniel150 11 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 11 Sep 2012 23:58:38 +0400 2012, 23:58:38
0

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

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

ответил Wouter van Nifterick 19 Jam1000000amMon, 19 Jan 2009 04:03:59 +030009 2009, 04:03:59
0

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

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

ответил E.J. Brennan 19 Jam1000000amMon, 19 Jan 2009 04:09:17 +030009 2009, 04:09:17
0

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

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

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

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

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

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

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

ответил PartialOrder 19 Jam1000000amMon, 19 Jan 2009 05:51:55 +030009 2009, 05:51:55
0

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

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

ответил UnkwnTech 19 Jam1000000amMon, 19 Jan 2009 06:30:23 +030009 2009, 06:30:23
0

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

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

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

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

ответил XenF 12 FebruaryEurope/MoscowbThu, 12 Feb 2009 19:32:14 +0300000000pmThu, 12 Feb 2009 19:32:14 +030009 2009, 19:32:14
0

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

ответил 23 J000000Thursday09 2009, 17:04:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132