Какой должна быть ширина сайта и почему

Приветствую, друзья! Решила обновить статью, потому что ее показывают по запросу «какой должна быть ширина сайта» и похожим, хотя прошло 4 года с момента написания. Итак, по существу. На сегодня практически все сайты адаптивны, поэтому они в браузерах будут показаны так, как позволяют размеры и настройки сайта. Например, у пользователя большой компьютер (1920*1080), а заданная ширина составляет 1280 пикселей, значит, страница будет открываться в центре. Сайт шириной 1920 px в браузере с любыми меньшими размерами примет размеры устройства.

Ширина моего блога — 1280 пикселей. И так он выглядит на мониторе 1366 и соответственно 1920:

Монитор 1366*768 Как выбрать ширину сайта

При создании сайтов стараюсь придерживаться средних размеров — 1200/1280, потому что большинство пользователей ПК выходят в Интернет с ноутбуков, а не со стационарных компьютеров. Но бывают шаблоны со строгими 1920, да еще и высотой шапки в 600 пикселей. Первый экран закрывается картинкой. Вот так выглядит сайт на ноутбуке 1366*768, хотя высота слайдера значительно уменьшена:
Ширина сайта

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

Что создает неудобства в просмотре

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

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

Создание сайтов на WordPress

Что пишут разработчики XHeader о ширине сайта

Не помню, чтобы ставила галочку на получение новостей от разработчика англоязычной программы XHeader при ее установке, а было это в далеком 2014 году (о программе писала в этой статье), но письма стали регулярно приходить. Поскольку переводит мне их Гугл-переводчик, то содержание забавляет. В одном, например, господин Paul Smithson убеждает меня в том, что из 500 готовых дизайнов невозможно выбрать нормальную шапку для сайта. Вот в версии ПРО – там 5 тысяч шаблонов, есть где разгуляться. А что выберешь из пятисот? Только что-то скучное.

Какой должна быть ширина сайта

Но г-н Paul Smithson оказался на удивление тактичным (наш менталитет несколько иной), и в следующем письме никаких намеков на приобретение полной версии программы не было, зато просто и доступно объяснялось, как выбрать ширину шапки (в программе стандарт 950 px). Если честно, у меня открылись глаза, потому что считала, что ширина шапки привязывается к браузерам и только к браузерам. Сайт должен одинаково красиво и без перекосов выглядеть во всех браузерах на всех устройствах, и при выборе шаблона для сайта или блога мы обращаем внимание на его ширину не меньше, чем на дизайн. Сама сколько раз встречала в Интернете: люди спрашивают, какой должна быть ширина сайта. Ответы, как правило, содержат значения от и до.

Вот что говорит автор программы XHeader. Кстати, не забываем, что ширина сайта влияет на продвижение сайта. Раньше, и это было-таки связано с размерами мониторов, шапки могли быть от 800 до 1024 пикселей. Горизонтальная прокрутка страницы нежелательна, поэтому от большего размера все давно отказались. Число 1024 изменилось максимум на 1000. Но установка ширины зависит от типа сайта и расположения блоков на странице. Если на сайте нет колонок справа или слева, то достаточно 750 пикселей в ширину. Стоп! А зачем мне искажать неповторимый язык Гугл-переводчика? Читайте сами, что пишет г-н Paul Smithson.

Привет Надежда,

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

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

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

Так, для рекламных писем я обычно рекомендую ширину страницы из 750 пикселей, возможно, немного больше, но будьте осторожны. Если вы создаете больше содержательный сайт, который имеет меню навигации справа или слева, то вам необходимо немного больше площадь экрана на поиграть с, и это вдвойне так что если у вас есть навигацию на левая (например) и своего рода реклама таких как AdSense направо. Для этого вида сайта вы должны смотреть на 900 пикселей вверх, но вы редко хотите пойти более 1100 или 1200 пикселей в ширину для несколько причин.

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

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

Практически каждый лучших сайт находится между 750 и 1000 пикселей.

  • Twitter – 750 пикселей в ширину
  • Craigslist – 820 пикселей в ширину
  • eBay – 930 пикселей в ширину
  • Bing – 950 пикселей в ширину
  • ESPN – 950 пикселей в ширину
  • BBC – 994 пикселей в ширину
  • Yahoo – 994 пикселей в ширину

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

Подводя итог, идеальный размер для заголовков общие 750 пикселей для одного Сайты столбцов, такие как рекламные письма или 950 пикселей, если это содержание сайт с меню навигации на левой или правой.

Так что, если вы были чесать затылок интересно, что идеальным веб Ширина страницы Я надеюсь, что выше пролил некоторый свет на Заголовок: 🙂

Закладка Постоянная ссылка.

25 комментариев

  1. Интересная и полезная информация для сайтостроителей. Для меня открылись некоторые новые факты. Спасибо.

    • Надежда Хачатурова

      Не за что, Геннадий. Не мое изобретение. 🙂 И мне тоже стала понятна логика, которая должна быть при выборе ширины сайта.

  2. Спасибо, Надежда, перевод позабавил, но всё понятно. Теперь буду знать, как выбрать ширину сайта. Как раз собираюсь сделать парочку веб-ресурсов. 750 пикселей — всё-таки маловато. На моём сайте, например, узкий сайдбар. Это лишает многих возможностей и доставляет хлопоты.

    • Надежда Хачатурова

      Про чешу в затылке он не забыл ввернуть. 🙂 Да, 750 — узко, но для страниц без сайдбара очень даже широко. Раздолье!

  3. По мне, так если тема фиксированная, то ширина сайта должна быть 1000 px. И это желательно для тем с двумя сайтбарами. Просто если тема с тремя сайтбарами, то колонки будут очень узкими. Не люблю такое.
    Ну а у меня сейчас адаптивная тема. Там ширина 100% и три сайтбара. Люблю такие темы. Места свободного завались.)))))

    • Надежда Хачатурова

      Да, сейчас ПСы предъявляют требования к сайтам в плане удобства их для пользователя, к тому, чтобы на всех устройствах все хорошо было видно. 1000 px, наверное, хороший вариант. Даже 960 мало. Если сайдбар нормальным сделать, сама страница узковата. Это испытала на себе.

  4. Перевод позабавил. Думаю, что оптимальный вариант будет действительно, около 1000. Во-первых, многие еще держат мониторы на 1024 пикселя. а во вторых, даже если это ноут с большим расширением, то все равно половина пользователей не раскрывает браузер на всю ширину, оставляя видимыми иконки на рабочем столе. Например, я так делаю. 🙂

    • Надежда Хачатурова

      Перевод забавляет почти каждый день, Александр. Все новые письма шлют разработчики. 🙂 А Вы на помощь поспешили ко мне? Представляете, так и не получается ничего. Только это не здесь я вожусь. На другом сайте. Там очень много категорий товаров и страниц. Поскольку в коде я ноль (делают вывод и кодом же?), надеялась на плагин. Больно тема там капризная. И получается, что главная, контакты и прочее, кроме товаров, должно остаться в горизонтальном меню, а по ID мне эти страницы не удалить. В админке удаленных не видно, а на сайте стоят, как вкопанные.

  5. Да, а то понаделают 1600 в ширину, а потом удивляются, а че это у них поведенческие плохие!?
    Правильно, ширина должна быть не более 1024, хотя сейчас большая часть интернет-пользователей имеет разрешение >1280 в ширину.

    • Надежда Хачатурова

      Но тогда сайт должен иметь мобильную версию. Сложно угодить всем устройствам и всем браузерам.

  6. Надежда, здравствуйте! Хочу предложить вам поучаствовать в эстафете (при желании конечно). Все подробности здесь:
    alpha-byte.ru/polezno/rekomendatsii/liebster-blog-award
    Если что, то адрес потом можете удалить.)))

    • Надежда Хачатурова

      Спасибо большое, Сергей, но не могу принять предложение. Очень сильно зашилась, да и рука отказывается мышкой управлять. 🙂 Ссылку зачем удалять? Может, кто-то из моих друзей захочет. Блоги же поддержать нужно, а последнее время хорошие встряски были у многих по разным причинам, начиная с политических.

  7. Надежда, спс за статью. Очень познавательно, особенно для начинающих сйтостроителей 🙂 …
    Хотя я лично больше склонен к резиновым (адаптивным) сайтам.
    Правда работы с вычислениями намного больше приходится делать, чтоб на разных мониторах всё красиво и пропорционально выглядело.

    • Надежда Хачатурова

      Правда, Сергей, много возни с резиновыми, и все равно ведь под все устройства не подгадаешь. А что у Вас граватара нет? Так необычно. 🙂

  8. Да вот самому интересно стало!
    Практически везде граватар автоматом ставится, а тут чтот не захотел… 🙂

  9. Павлуха

    Недавно верстал адаптивный дизайн. Тоже много вопросов Гуглу задал на счёт ширины сайта. Но не нашёл никаких стандартов и канонов в этой теме. Не удивительно. Спектр устройств для интернет-серфинга широк, равнопопулярны как смартфоны, так и огромные домашние мониторы, которым некоторые телевизоры позавидовать могут. Кстати, как раз смартфоны обычно пытаются втиснуть сайт во всю ширину экрана. И даже если у них разрешение FullHD, стоит учесть, что на 5-дюймовом FullHD-экране всё «немножко» мельче, чем на 17-дюймовом FullHD-мониторе. Это стоит учесть, например, при проектировании меню — чтобы палец на смартфоне не ложился сразу на 3 пункта и т.п.
    К счастью, современные браузеры поддерживают CSS media queries, и позволяют очень просто адаптировать дизайн под разной ширины экраны (для IE младше 9 есть хак css3-mediaqueries.js).
    Какую ширину сайта выбрать? — Лучший помощник: статистика посещений.
    Перед вёрсткой дизайна я анализировал Метрику.
    Для моего сайта оказалось, что экраны меньше 980 только у 6% посетителей. Зато у 56% экраны шире 1250. Также показатель отказов посетителей с разным разрешением может указать на проблемы вёрстки для этой группы. Также при выборе ширины учтите, что есть ещё скроллбар сбоку страницы, и он занимает 20-30 пикселей. Т.е. не прижимайтесь слишком к выбранному пределу.
    Думаю, пора мне на эту тему статью написать

    • Надежда Хачатурова

      Статью? А это разве еще не все? 🙂 Обязательно теперь постараюсь связать отказы с размерами экранов. У женщин мышление какое-то примитивное. Никакой способности к глубокому анализу. Но зато у женщин есть такие, как Вы, мужчины, у которых всегда можно чему-то научиться.
      Если серьезно, у меня отказы дают, в основном, прямые заходы, когда и не определишь, кто и откуда. Систематизирую-ка я их по размеру монитора и устройству. Интересно даже. Из поиска отказы бывают при посещениях с мобильных устройств, их больше, в смысле.

      • Павлуха

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

        • Надежда Хачатурова

          Утопист! Как можно расширить глубину мышления? У меня ширина фиксированная. ))) Маякнете — буду благодарна, но и без маяка, наверное, не заблужусь. Сегодня собиралась, но еще не вечер.

        • Да кстати, маякните как напишите статью, тоже будет интересно почитать…

        • Павлуха

          Написал. Приглашаю почитать 😉

          • Надежда Хачатурова

            Большое спасибо! Только не сегодня, к сожалению. Уезжаю на похороны соседа, с которым прожили рядом 30 лет. Считай, одна семя была. Кстати, а почему мне приходят уведомления о Ваших обновлениях? Нужно будет разобраться.

            • Павлуха

              Не понял насчёт обновлений. О новых статьях на почту уведомляют? Если так, то в конце письма должна быть ссылка «отписаться»

Добавить комментарий

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