Какого варианта размера сайта не бывает
Перейти к содержимому

Какого варианта размера сайта не бывает

  • автор:

Как выбрать ширину сайта?

При создании сайта одним из первых возникает вопрос: какой делать ширину сайта? Ответ на этот вопрос неоднозначен и будет зависеть от ряда факторов. Сайты бывают двух видов: 100% по ширине экрана и фиксированной ширины. Ниже приведен пример сайта с фиксированной шириной.

Размер сайта по горизонтали. Создание сайтов в Подольске.

Факторы, влияющие на ширину сайта

1. Количество колонок сайта.

  • Одноколоночный вариант: оптимальная ширина 1000 px
  • Двухколоночный вариант: оптимальная ширина 1000 px — 1256 px
  • Трехколоночный вариант: оптимальная ширина 1256 px — 1576 px

2. Разрешение монитора пользователя.

Для получения такой статистики лучше всего использовать открытый счетчик посещений популярного ресурса. Мы ореинтируемся на свой ресурс www.podolsk.ru. Статистика сайта открыта, Вы можете посмотреть наиболее частые разрешения мониторов у пользователей, и в зависимости от этого подобрать оптимальную ширину для своего сайта. Посмотреть популярные разрешения мониторов на сайте mail.ru.

3. Почему 1280х1024 = 1256px? Страницы сайта могут помещатся по вертикали экрана полностью или не полностью. Запас в 24 px берется на полосу прокрутки сайта.

Разрешение экрана Ширина, px
640х480 616
800х600 776
1024х768 1000
1152х864 1128
1280х1024 1256
1400х1050 1376
1440х900 1416
1600х1200 1576
1680х1050 1656
1920х1200 1896
2048х1536 2024

Теперь о самом важном!

Можно сделать автоматическую ширину сайта (100% по ширине экрана), которая будет автоматически подстраиваться под размеры монитора пользователя, но такой сайт ведет себя неконтролируемо. Мы рекомендуем своим клиентам делать фиксированные значения ширины сайта. Но решение всегда зависит от Вас. Примеры сайтов: 100%-ной ширины, фиксированный.

Как адаптировать сайт под разные разрешения

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

Евгений Кучерявый

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

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

Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:

Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:

Встроенных настроек для этого нет, в отличие, например, от Telegram:

Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.

За основу возьмём сайт из статьи про добавление тёмной темы . Читать её не обязательно, но там подробнее объясняется часть с PHP-скриптами. Также вы можете посмотреть исходный код этого сайта на GitHub.

Создаём адаптивные стили

Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.

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

Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:

Также вы можете указать максимальную ширину в пикселях:

Создаём стили под отдельные разрешения

Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:

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

Автоматическое масштабирование

С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода:

Заключение

Мы сможем отказаться от адаптации сайтов под разные мониторы только тогда, когда человечество откажется от мониторов. Ну а пока придётся мириться с тем, что существует огромное количество разрешений:

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

Читайте также:

  • JavaScript: главный инструмент frontend-разработчиков
  • Держи в курсе: как и где разработчики обновляют свои знания
  • Как установить локальный сервер на Windows

Как выбрать правильную ширину сайта

like

156

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

  • Какие бывают форматы размеров сайта для вёрстки
  • Какие есть варианты создания страницы под разные мониторы и разрешения
    • Фиксированная верстка
    • Резиновая верстка без ограничений
    • Резиновая верстка с заданной минимальной и максимальной шириной
    • Адаптивная верстка
    • Общая статистика популярных разрешений экранов мобильных и компьютеров
    • Рекомендуемые размеры сайта
    • Если у вас Яндекс.Метрика
    • Если у вас Google Analytics

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

    Статистика популярных разрешений экранов в России

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

    Поэтому, разрабатывая макет, мы хотим, чтобы пространство использовалось с умом и при этом:

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

    Но для начала разберёмся, на какую всё-таки ширину html-страницы ориентироваться.

    Какие бывают форматы размеров сайта для вёрстки

    У каждого устройства есть несколько характеристик, описывающих его размер:

    • Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.
    • Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
    • Размер окна браузера — это ширина и высота области просмотра в пикселях (например, 1896 x 1080 — с учётом полосы прокрутки в 24 пикселя). Другими словами, это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но размер окна браузера пользователь может сильно менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

    Размеры блоков сайта для вёрстки

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

    Также нужно помнить об ориентации экранов — у ноутбуков, десктопов и телевизоров она альбомная (ширина больше высоты), а у смартфонов и планшетов обычно портретная (высота больше), но может переворачиваться.

    Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)

    Фиксированная верстка

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

    Резиновая верстка без ограничений

    Упрощенно это выглядит так:

    Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

    Плюсы такой верстки:

    • Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.

    Минусы:

    • На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
    • Периодически может возникать пустое пространство между блоками.

    Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.

    Кроме того, при маленькой ширине экрана блоки будут наползать друг на друга, если не задана минимальная ширина. Чтобы избежать данных проблем, можно применить следующий способ:

    Резиновая верстка с заданной минимальной и максимальной шириной

    В данном случае в указанных вами пределах сайт может менять позиционирование блоков, но у него есть определенные ограничения:

    • минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;
    • максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру сетки.

    Плюсы:

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

    Минусы:

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

    Большие боковые отступы на сайте

    Адаптивная верстка

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

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

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

    Плюсы:

    • Наиболее современный и правильный тип верстки.

    Минусы:

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

    Все эти методики могут сочетаться в зависимости от ситуации.

    • адаптивный дизайн может дополнять резиновую верстку;
    • либо сайт сделан на резиновом дизайне, а для мобильных приложений сделана мобильная адаптивная версия.

    Рекомендую прочесть статью Анны Себовой, где вопрос мобильной верстки раскрыт с технической точки зрения.

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

    Как выбрать оптимальный размер макета

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

    Но как же разобраться в этом многообразии разрешений и способов верстки? Главное – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.

    Общая статистика популярных разрешений экранов мобильных и компьютеров

    Эти данные можно найти в сервисах:

    • https://www.w3schools.com/browsers/browsers_display.asp — тут статистика в первую очередь по США; Статистика популярных разрешений мониторов по данным W3schools
    • https://gs.statcounter.com/screen-resolution-stats — статистика в мире и по регионам. Самые популярные разрешения устройств по данным gs statcounterВозможность просмотра статистики по разрешениям в разных странах

    Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.

    При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

    Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

    Ширина блоков контента и отступов на сайте Lamoda

    Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

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

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

    Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.

    Рекомендуемые размеры сайта

    Стандартная ширина страницы сайта для дизайна должна быть в пределах 1366 пикселей, из которых около 1200 пикселей это «безопасная» контентная область, а 1084 пикселя — ширина текстового блока на мониторе компьютера или планшета. Высота первого экрана на десктопе ориентировочно 700 пикселей.Для мобильной версии сайта ширина принимается за 360 пикселей, а высота — 640.

    Но лучше разрабатывать несколько шаблонов используя «опорные точки»:

    Устройство Ширина макета, пикселей Отступы по краям Контентная часть, пикселей
    Большого размера (десктоп или телевизор) от 1366 Зависят от сетки 1200
    Среднего размера (ноутбук) от 1024 20 пикселей 992
    Маленького размера (планшеты) от 768 15 пикселей 768
    Смартфоны от 360 10 пикселей 360

    Опорные точки стандартных разрешений экранов для адаптивной вёрстки сайтов

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

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

    Как узнать статистику своего сайта по разрешениям экрана?

    Если у вас Яндекс.Метрика

    1. Заходите в раздел Отчеты → Стандартные отчеты → Технологии → Разрешение дисплея:Отчёт о разрешениях дисплея в Метрике
    2. Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):Разрешения, под которые нужно делать сайт

    Если у вас Google Analytics

    Отчёт о разрешениях экранов в Google Analytics

    1. Технологии → Браузер и ОС → Разрешение экрана:
    2. Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
    3. Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.

    Как проверить оптимизацию сайта под разные разрешения?

    Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать средства браузера или отдельные сервисы, о которых мы ранее писали в статье «Инструменты для анализа отображения сайта на разных устройствах». Вот некоторые из них:

    1. Бесплатный онлайн-сервис http://responsivetesttool.com/Интерфейс сервиса для проверки сайта на адаптивность responsivetesttoolТут все довольно просто: вставляете ссылку на проверяемую страницу → выбираете готовое устройство или задаёте своё расширение → готово.
    2. Условно-бесплатный сервис https://www.browserstack.com/responsiveВставляете URL, ждёте пока система сэмулирует сайт на популярных устройствах и получаете максимально приближенный к реальности результат. Для бесплатной trial проверки нужна регистрация. Интерфейс сервиса для тестирования сайта на разных разрешениях browserstack.com
    3. Скрипт (букмарклет) для браузера Chrome https://lab.maltewassermann.com/viewport-resizer/Суть та же, что и в онлайн-сервисе, только в данном случае настройки появляются непосредственно в браузере: Скрипт для просмотра сайта в разных разрешениях

    Подведем итог

    Перед созданием нового сайта или редизайном необходимо:

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

    Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

    Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!

    Подписаться на рассылку

    • Как создать удобный интернет-магазин? В этой статье мы подробно объясним, что такое по-настоящему удобный интернет-магазин. Мы расскажем, почему нужно работать над повышением юзабилити и как это влияет на конверсию.
    • Немного о юзабилити, или Жалуюсь, пользуясь случаем! Сделать сайт или магазин удобными для своего клиента на самом деле не так и сложно. Просто нужно внимательнее относиться к мелочам и всегда ставить себя.
    • Пришел, увидел и купил! Как сделать сайт удобным и посещаемым На вашем сайте может быть замечательный контент, достойный самого пристального внимания и обсуждения, но если вы не знаете, как его преподнести и сделать так, чтобы.
    • Как продумать гипотезу для A/B-тестирования Как сделать правильный выбор и тестировать действительно важные блоки страниц сайта? Грамотная подготовка к А/В-тестированию, выбор проблемных страниц и стратегия создания гипотезы для тестирования. О.
    • Какие есть инструменты для проверки юзабилити сайта и актуальны ли сейчас карты кликов? Актуальны ли сейчас карты кликов для проверки юзабилити сайта? Какие есть для этого инструменты? Ответ Да, карты кликов по-прежнему являются ценным инструментом для проверки юзабилити.

    SEO аналитик SiteClinic.ru

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

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

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

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

    Ширина сайта

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

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

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

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

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

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

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

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

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

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

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

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

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