Какую «самую распространенную» ширину и высоту используют веб-сайты для этих дней?

Я работаю над групповым проектом и пытаюсь заставить моих коллег представить чертеж, касающийся их видения онлайн-приложения; это приложение будет просматриваться через ПК. Хотя я подозреваю, что нет промышленного стандарта, я уверен, что должны быть общие подходы для сайтов с макетами фиксированной ширины. Мне нужно знать наиболее распространенное чувство пропорций в отрасли.

Мы собираемся сохранить этот прототип простым и, следовательно, не будем определять браузеры, ширину экрана и т. Д. Итак, я решил, что задам простой вопрос с надеждой получить простой ответ:

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

Обратите внимание, как я задал этот вопрос:

Я не спрашиваю о наиболее распространенных разрешениях экрана.
Я не прошу самых распространенных браузеров.

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

website-design

— Джон Р
источник

Ответы:

Как вы сказали, стандартной высоты не существует, поскольку она чрезвычайно плавная, поэтому просто используйте все, что поможет вам лучше визуализировать ваш дизайн.

Для ширины 960 пикселей кажется текущим «стандартом» для конструкций с фиксированной шириной. Довольно часто сайт посвящен изучению макетов с такой шириной .

(Я предполагаю, что вы не хотите, чтобы кто-то разглагольствовал об использовании жидкого дизайна?)

— Джон Конде
источник

Там действительно нет стандартной ширины, которую вы должны установить. За последние несколько лет количество людей, использующих монитор 1024x768, резко сократилось, поэтому ширина 960 имеет меньшее значение. С появлением такого большого количества новых устройств (смартфонов, планшетов, ноутбуков и настольных компьютеров) вы должны создать несколько таблиц стилей для каждого случая.

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

Проверьте эту страницу на W3.org для нескольких примеров - http://www.w3.org/TR/css3-mediaqueries/

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

— Carson
источник

Что сказал Джон Конде. В дополнение к этому вы должны учитывать, кто является вашей целевой аудиторией. Например, если мой веб-сайт - это блог о технологиях или гаджетах, скорее всего, моя целевая аудитория чуть более технически подкована, чем обычная аудитория, поэтому я могу использовать макет шириной 1200+ пикселей. Или, если бы я сосредоточился на сайте / блоге / форуме для веб-мастеров, я бы пошел немного шире.

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

Две ОЧЕНЬ важные вещи, о которых нужно помнить ...

1) Если ваш дизайн может работать с разрешением более 900 пикселей, нет смысла растягивать его до более 1200 пикселей, даже если ваша демография может себе это позволить.

2) Убедитесь, что у вас есть надлежащая структура, которая может вместить тех пользователей, у которых может не быть вашего целевого разрешения.

— Адиль
источник

Я не согласен с пунктом № 2. Благодаря дисплею шириной 1366 пикселей, который, возможно, является самой распространенной шириной на большинстве ноутбуков, проданных за последние пару лет, вы не можете разместить два окна по 900 пикселей рядом друг с другом и видеть оба одновременно. Если у вас только один макет 900px, вы тратите 34% своего горизонтального пространства с пробелами. В этом случае 1200px будет идеальной шириной. Так что да, есть это причина , чтобы растянуть ее.

— nhinkle

@nhinkle: Я не думаю, что вы на самом деле читали пункт № 2.. Как ваш ответ связан с установкой двух окон размером 900 пикселей рядом друг с другом? Кроме того, пожалуйста, прочитайте вопрос правильно, чтобы понять, что просит Джон Р. Это не обсуждение экстремальных вариантов использования, например, если вы хотите иметь 2 900-пиксельных окон рядом друг с другом или в моем случае хотите, чтобы мониторы с 1600-пиксельными пикселями (2 из них) создавали дизайн. Скорее, речь идет о подавляющем большинстве пользователей, которые не вы или я ..

— Adil

Мои извинения, я хотел ответить на ваш 1-й пункт, а не на 2-й. Извините, если это вызвало путаницу. Моя точка зрения остается неизменной : подавляющее большинство пользователей имеют дисплеи, достаточно широкие, чтобы макет 900 пикселей занимал много места. Я согласен с большей частью того, что вы сказали в своем ответе, но ваша первая «вещь, которую нужно иметь в виду», на самом деле не соответствует действительности. Если ваша демография может позволить себе 1200 пикселей, вы должны использовать эти 1200 пикселей, в противном случае вы теряете 300 их пикселей.

— nhinkle

@nhinkle: Вы неправильно поняли мою точку зрения № 1. Если мой дизайн может легко показать сайт в пределах 900 пикселей, зачем мне растягивать его до 1200 пикселей? Кроме того, 13% пользователей по-прежнему имеют разрешение экрана 1024x768. Разумеется, это небольшое число, но его достаточно много, чтобы доставить им неудобства и потерять продажи, клики по рекламе, количество потенциальных клиентов или любую другую модель вашего бизнеса .... (данные цитируются из: w3schools .com / browsers / browsers_display.asp )

— Адиль

Я понимаю вашу точку зрения. Я хочу сказать, что если ваши пользователи в целом имеют достаточно широкие экраны, чтобы использовать макет шириной 1200px, вам следует. Например, сайты обмена стеками оптимизированы для ширины около 1000 пикселей, но многие пользователи запрашивают возможность одновременного просмотра исходного источника и предварительного просмотра уценки, что позволило бы использовать больше горизонтального пространства. w3schools не является репрезентативной выборкой веб-пользователей, но кроме этого, это обсуждение было для сайтов, где 1200 было бы логично, если бы оно соответствовало дизайну.

— nhinkle