Стандартная ширина сайта — какой она должна быть?

Быстрая навигация по этой странице:

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

стандартная ширина сайта

О важности вопроса

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

Дело в том, что если если выбранная вами ширина будет больше, чем разрешение экрана у посетителя, то сайт в полном объеме не поместится в браузере, появится горизонтальная полоса прокрутки. В результате этого пользователь не увидит часть информации или ему будет некомфортно работать с вашим проектом. Итог будет один — уменьшение поведенческих факторов.

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

Итак, какой же должна быть ширина сайта в пикселях?

Рассчитываем оптимальный вариант

Для того, чтобы правильно ответить на этот вопрос, нужно обратиться к статистике.

Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):

  • 1366×768 — 23.7%
  • 1280×1024 — 15.1%
  • 1024×768 — 14.7%
  • 1280×800 — 9.5%
  • 1920×1080 — 8.4%
  • 640×480 — 6.2%
  • 1600×1200 — 5.9%

Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 1280 пикселей и выше. Тем не менее, обратите внимание на строку, выделенную жирным шрифтом: 14,7 % имеет разрешение 1024 пикселей. Это в среднем каждый шестой/седьмой пользователь — достаточно большой процент, который имеет смысл учитывать.

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

Однако 1024 пикселя — это разрешение монитора, а фактически площадь страницы в браузере меньше, так как часть экрана съедает полоса прокрутки (скролл) — это около 24 пикселей.

Следовательно, наша страничка должна открываться не более, чем на 1000 пикселей. Часто дизайнеры или заказчики берут еще 20 пикселей в запас и делают сайт на 980 px.

Таким образом, наиболее оптимальной шириной является 980-1000 px.

Почему часто используется 960?

Если Вы обратите внимание на шаблоны для WordPress (как, впрочем, и для многих других CMS), то вы заметите, что многие из них ориентированы на 960 пикселей.

Зачем же отклоняться от оптимального варианта в меньшую сторону? Здесь следует отметить, что 960 — это математически очень «удобное число», так как, в отличие от 980, оно делится на каждое из этих чисел: 6, 8, 12, 16, 24 (и, соответственно, на множество других).

Это удобно для создания дизайна по так называемой «сетке» (grid system) — когда при создании макета он мысленно делится на 6/8/12 и т.д. частей и все блоки макета выстраиваются по этим линиям — получается симметрично и красиво (подробнее про это написано на 960.gs и других ресурсах).

Если же вы делаете или заказываете дизайн с нуля и просто хотите, чтобы, например, контентная часть занимала 600 пикселей, а справа был сайдбар — тогда вам необязательно ориентироваться на grid system и 960 пикселей.

Осторожность с резиновым макетом

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

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

Представьте, что вы читайте книгу, в которой одна строка имеет длину, предположим, в семьдесят сантиметров или в один метр. Удобно ли вам будет ее читать? Полагаю, что нет, ведь не зря сам по себе книжный формат в среднем не предполагает более 60-80 символов на одной строке. Потому я такую технологию создания сайта не рекомендовал бы.

Потому, если вы делаете или заказываете резиновый макет, позаботьтесь о посетителе — поставьте ограничение около 1200-1300 px как максимальную ширину вашей страницы.

Если Вы нашли для себя что-то полезное на этой странице, пожалуйста, нажмите на одну из этих кнопок:
Комментарии
  1. геннадий

    Хорошая статья, не знал что у ВП стандартная ширина диза 980px

  2. vergi

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

  3. Юрий

    Помогла, в принципе я только начинающий верстальщик и дизайнер. Помогло то что в видео объясняется подробно о ширине, сайта в резиновой верстке, а для фиксированных сайтов я думаю сейчас актуально ставить размер 1190px, мало у кого до сих пор монитор старого типа с разрешением 800*600 :) моё ИМХО.

  4. Русский тракторист

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

  5. Дмитрий

    Хорошая статья. Начинаю править свой сайт.

  6. Николай

    Передо мной стоит задача. Передать фотографию. Какие требования к этой фотографии должны быть выставлены? При передаче фотографии по интернету предъявляется несоответствие пиксельному режиму. Прошу ответить. В Ваших консультациях написано обо всем, только не об этом.

  7. Валентина

    Подскажите пожалуйста, как определить ширину сайта?

  8. Александр

    Я в последнее время 1200px ставлю ширину рабочую. Благодаря например сетке бутстрапа под остальные разрешения сайт в процессе можно легко заадаптивить. Ведь надо идти в ногу со временем, а современные реалии — это минимум 1366px на мониторах + планшеты и смартфоны.

  9. ПозитивуДА

    Благодарю за информацию! Как раз меняю ширину сайта, чтобы справа вставить ещё колонку, вот и задумался над шириной!

  10. Валерий

    Не мешало бы обновить статью.
    Числа из таблицы явно поменялись в бОльшую сторону.

  11. Людмила

    Спасибо за текстовую информацию, как раз, что ищу, а видео не работает

  12. Михаил

    Понятная статья, кое-что и для себя учёл. Хотя не буду выделываться, я начинающий ещё. Насчёт резинового верно подмечено, сам попал на эти грабли, на большом экране получается жуткая ересь. Но вот что насчёт адаптивного формата, тут всё перспективнее. Сделав сравнительный анализ, а как специально дома монитор 1920, а на работе 1024 (да да, я работаю на динозавре), плюс статистика расширений экранов, вывел идеальный набор ширин сайта при адаптивном дизайне. Их просто можно характеризовать как огромный экран, средний экран, ноутбук, динозавр, планшет и смартфон. Конечно это не открытие ни для кого, кроме меня. Но может быть есть такие люди как я, которые прочтут этот пост.

    З.ы. просто математический просчёт ширины для удобства блоков, прям в точку автор!

Добавить комментарий для Николай Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>