Под какие разрешения верстать сайт
Перейти к содержимому

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

  • автор:

Адаптивная версия для сайта. Набор требований и особенностей. Тестирование.

Сначала, давайте кратко разберемся, что такое адаптивная верстка и чем она отличается от мобильной версии сайта.

Адаптивная верстка – это html-верстка сайта сразу под несколько наиболее популярных разрешений. Например — 340px, 420px, 768px, 1024px, 1200px (все в ширину). Таким образом, сайт будет занимать всю или почти всю рабочую область на большинстве устройств – телефонов, планшетов, ноутбуков, настольных ПК. Но т.к. сейчас выпускается очень много устройств с абсолютно разными экранами, то при адаптивной верстке сайт не всегда занимает 100% ширины экрана.

extrusion_adaptive

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

adaptiv-niris

Мобильная версия сайта – предполагает наличие или отдельного шаблона (как минимум) или вообще наличие отдельного сайта.

При адаптивной и респонсив верстке – контент сайта один и тот же, просто отображается в разном виде.

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

Все подходы, имеют свои плюсы и минусы:

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

Плюсы: наибольшая простота из наших вариантов. Включая поддержание и наполнение.

Минусы: не всегда занимает 100% ширины экрана, лишний трафик для пользователя.

Респонсив верстка

Плюсы: красота, всегда занимает 100% ширины экрана.

Минусы: сложно для создания и поддержания, лишний трафик для пользователя.

Отдельная мобильная версия

Плюсы: свобода реализации.

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

В итоге, что выбрать?

Самый оптимальный вариант с точки зрения цена\качество – адаптивная верстка. Если нужно качество – респонсив-верстка. Если у вас сложный функционал на сайте (портал, много интерактива), то можно рассмотреть отдельную мобильную версию или мобильное приложение.

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

Для каких разрешений нужно делать адаптивную верстку

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

main

По графику видно, что наибольшей популярностью при посещении корпоративных сайтов является разрешение 1366px. За ним, примерно в равной пропорции 1280 и 1920px. И далее идут все остальные – 360px, 1600, 1024, 1440 и 768px.

Эти данные в целом вполне коррелируют со статистикой LiveInternet и StatCounter.

Интересная особенность – бывает, что в праздники выходные увеличивается количество заходов с мобильных устройств. Не во всех сферах корпоративных сайтов, но во многих.

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

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

320px, 360px, 768px, 1024px, 1280px, 1440px, 1920px. Этот диапазон, от 320 до 1920px охватывает, как правило, 90% всей аудитории корпоративных сайтов. На этих разрешениях Ваш сайт должен выглядеть хорошо.

Продвигаем сайты с гарантией
Растим продажи, позиции и посещаемость

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

Существуют некоторые ограничения на максимальную ширину сайта. В первую очередь – удобная длина строки. Если делать длинную длину строки, то текст, растянутый на нее, станет очень неудобно читать. Поэтому, к сайту добавляются сайдбары – левая и\или правая колонки. Информация разбивается на блоки, но на корпоративных сайтах это часто невозможно. Поэтому, максимальное разрешение для корпоративного сайта мы оставляем 1200 или 1300px.

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

main

Здесь наметились два явных лидера – Google Chrome и Яндекс.Браузер(только на территории РФ). Если к Хрому добавить статистику по его мобильной версии, то их суммарная доля составит около 60% всех посещений. Следом идет FireFox с 10% посещений и далее менее 10%: Opera, MSIE 11, Mobile Safari, Edge.

Т.о. основные браузеры под которые нужно разрабатывать – Google Chrome и Яндекс.Браузер. Однако, все же не стоит забывать проверить отображение сайта в Opera, IE11 и Safari. Это больше вопрос престижа, чем необходимости.

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

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

Разумеется, это утверждение относится к растровым изображениям, фотографиям (jpeg, jpg, png)

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

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

В последнее время, в требованиях предъявляемых к изображениям на адаптивном сайте появилось еще одно. Разрешение картинки должно быть не просто соответствовать верхней границе диапазона адаптивности, но и превышать ее на 50-100%. Это необходимость возникла с массовым появлением компактных мониторов с повышенной плотностью пикселей.

Сейчас, например, ваш покорный слуга пишет эту статью за 15 дюймовым ноутбуков с разрешением 1900px по ширине. А т.к. при таком разрешении все сайты казались бы очень маленькими, то в операционную систему внедрено автоматическое масштабирование всего содержимого браузеров. Раньше эта особенность касалась только экранов Apple с технологией Retina, но уже несколько лет похожая технология применяется и на windows-ноутбуках, т.е. она приобрела массовый характер.

Как следствие, картинки предназначенные для отображения на сайте масштабируются в большую сторону на 25-50%, что ведет к их заметному размытию. В моем конкретном случае – на 25%, но можно выставить увеличение и на 50, и на 75%.

По нашему опыту, считаем, что достаточно закладывать в размер картинки 50% увеличение.

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

Поэтому приходится подстраховывать svg-картинку обычной, растровой jpg-картинкой. Несомненно, за этим форматом – будущее веб дизайна, но … не сейчас.

Как следствие, применение svg оправдано только в критически-важных изображениях – логотипах, отдельных важных иллюстрациях.

Особые приемы, которые должны быть использоваться на всех адаптивных сайтах

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

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

Бургер-меню

В первую очередь, конечно – это мобильные меню. Как правило, они раскрываются при клике на «три полоски» (т.н. «бургер-меню»)

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

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

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

menu_1

2. Появляющееся поверх сайта, со значком закрытия и блокирующее прокрутку контента.

menu_1

3. Раскрывающее вниз от бургер-меню, без значка закрытия, но тоже блокирующее прокрутку контента. Скриншот примера:

menu_1

Разумеется, в бургер-меню обязательно должны располагаться все основные страницы сайта. Если подпунктов не много, их так же можно добавить в бургер-меню. Но размещать в бургер-меню все категории каталога – плохой тон, пользоваться таким меню будет неудобно. Поэтому, как всегда, при составлении структуры бургер-меню старайтесь пользоваться принципом разумности.

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

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

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

Кликабельные телефоны и мессенджеры

Незаменимой особенностью мобильной адаптивной верстки должно являться наличие кликабельных телефонов, значков мессенджеров WhatsApp, Viber, Telegam и формы обратного звонка. По тому, как разместить у себя на сайте кликабельные значки мессенджеров читайте в статье моего коллеги, Алексея – читать.

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

Адаптация таблиц под мобильные устройства

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

Рассмотрим несколько примеров адаптации таблиц

1. Использование горизонтальной и вертикальной прокрутки внутри таблицы. Честно, считаем этот способ самым грубым и не заслуживающим внимания. Пример вживую можно посмотреть здесь: https://www.w3schools.com/howto/howto_css_table_responsive.asp

table

2. Транспонирование (замена строк на столбцы). Очевидный способ, который применяется, когда на сайте используются таблицы очень широкие, но с маленьким количеством строк. Удобным будет так же добавить в него прилипание шапки по мере вертикальной прокрутки.
Пример вживую можно посмотреть здесь: https://codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5/

table

3. Скрытие ненужных столбцов внутрь строки. Например, скриптом FooTable. При таком способе, контент-менеджер заранее выбирает столбцы, которые обязательно отображаются, остальные столбцы транспонируются – для каждой строки отдельно.
Пример вживую можно посмотреть здесь: http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html

table

4. Преобразование строк таблицы в карточки(отдельные мини-таблички). Например, скриптом Stackable. При этом способе происходит почти тоже самое, что и в предыдущем, только без скрытия:
Пример вживую можно посмотреть здесь: http://johnpolacek.github.io/stacktable.js

table

5. Аналогичный скрипт по превращению таблиц в карточки предлагается скриптом Responsive Tables.
Пример вживую можно посмотреть здесь: https://elvery.net/demo/responsive-tables

table

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

Кнопки «Читать далее»

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

Скрытие части контента, перемещение блоков

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

Не стоит забывать о необходимости разделения информации на важную и не важную. Мы – не сторонники сокращения информации на сайте для мобильных устройств, но тем не менее, иногда это оправдано. Подумайте, вся ли информация, представленная на полной версии нужна пользователю смартфона? Если такие блоки информации присутствуют – их можно скрыть для мобильных устройств.

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

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

Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 2021 года. Выясним какие размеры адаптивной вёрстки для сайта использовать и под какие браузеры оптимизировать сайт.

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

Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.

Популярные браузеры и разрешения экранов

Начнём с того, кто к нам поближе — Яндекс.Радар за 2020 год radar.yandex.ru/browsers:

  • Google Chrome — 40.42% (движок Blink: Google — Chromium (ответвление от WebKit))
  • Яндекс.Браузер — 21.49% (Chromium)
  • Safari — 11.34% (WebKit: Apple)
  • Opera — 4.41% (Chromium)
  • Android Browser — 3.09% (WebKit)
  • Samsung Internet — 2.41% (Chromium)
  • Firefox — 2.22% (Gecko: Mozilla)
  • MIUI browser — 1.96% (WebKit)
  • Microsoft Edge — 1.45% (Chromium, EdgeHTML: Microsoft (2014—2019) )
  • Internet Explorer — 0.39% (Trident (MSHTML), Tasman — Mac OS X. (1995—2015))

Итого:
Chromium: Google Chrome 40.42% + Яндекс.Браузер 21.49% + Opera 4.41% + Samsung Internet 2.41% + Microsoft Edge 1.45% = 70.18%
WebKit: Safari 11.34% + Android Browser 3.09% + MIUI browser 1.96% = 16.39%
Gecko: Firefox — 2.22% = 2.22%

Типы устройств

  • Смартфоны — 59.62%
  • Десктоп — 37.44%
  • Планшеты — 2.94%

LiveInternet в среднем за 3 месяца по февраль 2021 liveinternet.ru/stat/ru/browsers.html?date=2021-01-31&period=month

Chromium: Google Chrome 56.8% + Яндекс.Браузер 22.3% + Opera (Blink) 4.5% = 83.6%
WebKit: Mobile Safari 9.7% + Safari 0.9% = 10.6%
Gecko: Firefox 2.5% = 2.5%

Internet Explorer 11 = 0.6% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).

Разрешения экранов

  • 800×600 — 27.1%
  • 1024×768 — 21.0%
  • 640×480 — 14.8%
  • 1920×1080 — 8.7%
  • 1366×768 — 8.7%
  • 1600×1200 — 5.0%
  • 1280×800 — 2.8%
  • 1280×1024 — 2.3%
  • 1440×900 — 1.5%
  • 1152×864 — 1.0%
  • 1680×1050 — 0.8%
  • 240×320 — 0.1%

Hotlog за январь 2021 hotlog.ru/global/screen

Chromium: Chrome 65.42% + Яндекс 12.27% + Opera 0.31% + Edge 0.32% = 78.32%
WebKit: Safari 14.45% = 14.45%
Gecko: Firefox 5.05% = 5.05%

Internet Explorer = 2.22%.

Разрешения экранов

  • 360×640 — 12.29%
  • 1366×768 — 12.29%
  • 1920×1080 — 12.01%
  • 375×667 — 4.47%
  • 393×851 — 3.99%
  • 360×780 — 3.78%
  • 360×720 — 3.74%
  • 1536×864 — 3.58%
  • 1280×1024 — 3.50%
  • 1024×768 — 3.41%
  • 414×896 — 2.78%
  • 360×760 — 2.76%
  • 1600×900 — 2.51%
  • 768×1024 — 2.41%
  • 412×892 — 2.04%
  • 375×812 — 1.97%
  • 800×600 — 1.83%
  • 1280×800 — 1.78%
  • 320×568 — 1.77%
  • 1440×900 — 1.69%
  • 412×915 — 1.48%
  • 1280×720 — 1.27%

W3Counter: Global Web Stats за январь 2021 года w3counter.com/globalstats.php?year=2021&month=1

Chromium: Chrome 65.3% + Edge 2.35% + Opera 1.5% = 69.15%
WebKit: Safari 17.0% = 17.0%
Gecko: Firefox 4.1% = 2.22%

Статистика по версиям и она не вся показана, Internet Explorer примерно 5.6% — 2.35% = 3.25% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).

Разрешения экранов

  • 1366×768 — 9.17%
  • 640×360 — 7.83%
  • 1920×1080 — 7.70%
  • 1024×768 — 4.46%
  • 896×414 — 4.28%
  • 667×375 — 4.22%
  • 780×360 — 3.20%
  • 812×375 — 3.03%
  • 760×360 — 2.80%
  • 1536×864 — 2.74%

StatCounter Global Stats с января 2020 по январь 2021 года gs.statcounter.com/screen-resolution-stats

Chromium: Chrome 64.1% + Samsung Internet 3.33 + UC Browser 2.61 + Edge 2.35% + Opera 2.26% + Edge Legacy 2.17 + Edge 0.01 = 76.83%
WebKit: Safari 17.21% = 17.0%
Gecko: Firefox 4.7% = 4.7%

Internet Explorer = 1.68%.

Разрешения экранов

  • 360×640 — 9.7%
  • 1366×768 — 8.98%
  • 1920×1080 — 8.46%
  • 375×667 — 4.07%
  • 414×896 — 3.92%
  • 1536×864 — 3.39%
  • 360×780 — 3.3%
  • 360×760 — 2.99%
  • 375×812 — 2.78%
  • 1440×900 — 2.77%
  • 360×720 — 2.53%
  • 768×1024 — 2.53%
  • 414×736 — 2.12%
  • 1280×720 — 1.99%
  • 412×846 — 1.91%
  • 412×892 — 1.79%
  • 412×869 — 1.67%
  • 1600×900 — 1.63%
  • 360×740 — 1.62%
  • 1280×800 — 1.5%

Типы устройств

  • Смартфоны — 52.02%
  • Десктоп — 45.29%
  • Планшеты — 2.7%

Screen resolution statistics за 2020 год ru.screenresolution.org/year-2020

  • 1920×1080 — 18.14%
  • 1366×768 — 12.02%
  • 1536×864 — 6.19%
  • 1440×900 — 4.55%
  • 360×640 — 3.86%
  • 800×600 — 3.13%
  • 2560×1440 — 3.03%
  • 1024×768 — 3.03%
  • 1280×720 — 2.98%
  • 1600×900 — 2.90%
  • 1680×1050 — 2.49%
  • 1280×1024 — 1.99%
  • 1280×800 — 1.77%
  • 360×780 — 1.69%
  • 375×667 — 1.66%
  • 393×851 — 1.38%
  • 1360×768 — 1.35%
  • 375×812 — 1.32%
  • 414×896 — 1.25%
  • 360×760 — 1.24%
  • 360×720 — 1.17%
  • 1920×1200 — 1.12%
  • 384×800 — 1.01%

Типы устройств

Выборка 1 Выборка 2 Средний процент
Смартфоны 59.62% 52.02% 55.82%
Десктоп 37.44% 45.29% 41.365%
Планшеты 2.94% 2.7% 2.82%

О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.

Браузеры под которые оптимизировать сайты

Chromium
(Google Chrome)
WebKit
(Safari)
Gecko
(Firefox)
Trident
(Internet Explorer)
Яндекс.Радар 70.18% 16.39% 2.22% 0.39%
LiveInternet 83.6% 10.6% 2.5% 0.6%
Hotlog 78.32% 14.45% 5.05% 2.22%
W3Counter 69.15% 17.0% 2.22% 3.25%
StatCounter 76.83% 17.0% 4.7% 1.68%
Средний процент: 75.616% 15.088% 3.338% 1.628%

Как видим, браузеры на движке Chromium (Google Chrome, Яндекс.Браузер, Opera, Vivaldi, Samsung Internet, Microsoft Edge итп.) жёстко доминируют и процент по моим наблюдениям прирастает.
На втором месте движок WebKit (Safari, Android Browser, MIUI browser итп.) и он уверенно держится в районе 10-15% последние годы.
На третьем месте Gecko (Firefox), долго был моим любимым браузером, но постепенно начал становиться проблемным из-за некоторых решений разработчиков, плюс выравнивание текста на пиксель ниже, как итог пользователи убывают, тенденция всё хуже из года в год — не вижу смысла в его поддержке..
И специальный столбик Trident (Internet Explorer) также показывает почти мёртвый браузер.
Остальным браузерам остаётся только догонять или оставаться в районе погрешности, смысла в оптимизации под них нет.

Актуально проверять вёрстку в браузерах Google Chrome и Safari (аналог на том же движке Arora под Windows/Linux), тем самым покрываем около 90% пользователей.

Разрешения экрана

Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (px), но размер экрана всё равно будет 375px. Например, iPhone 7 имеет дисплей разрешением 1334×750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать «резиновый» дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 — 834px, и LiveInternet показал 800×600 — 27.1%. При таких показателях 768px всё ещё остаётся обязательным.
Следом обязательно размер на 1000px, это и старые мониторы разрешением 1024px, ноутбуки, планшеты итп устройства. Так же популярные ноутбучные разрешения 1280x и 1366x. На мой взгляд достаточно дизайна на 1000px на экранах побольше просто будут поля по краям 140 и 183px соответственно.
Остаются большие разрешения экранов, посмотрим по таблице ниже.
Разных астрономических размеров 2570×798, 3840×848 (4k) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.

LiveInternet Hotlog W3Counter StatCounter Screen resolution Средний процент
320x 0.1% 1.77% 0.935%
360x 22.57%
(12.29 + 3.78 + 3.74 + 2.76)
20.14%
(9.7 + 3.3 + 2.99 + 2.53 + 1.62)
7.96%
(3.86 + 1.69 + 1.24 + 1.17)
16.89%
768x 2.41% 2.53% 2.47%
800x 27.1% 1.83% 3.13% 10.69%
1024x 21% 3.41% 4.46% 3.03% 7.975%
1280x 5.1%
(2.8 + 2.3)
6.55%
(3.5 + 1.78 + 1.27)
3.49%
(1.99 + 1.5)
6.74%
(2.98 + 1.99 + 1.77)
5.47%
1366x 8.7% 12.29% 9.17% 8.98% 12.02% 10.232%
1440x 1.5% 1.69% 2.77% 4.55% 2.6275%
1536x 3.58% 2.74% 3.39% 6.19% 3.975%
1600x 5.0% 2.51% 1.63% 2.90% 3.01%
1920x 8.7% 12.01% 7.70% 8.46% 19.26%
(18.14% + 1.12%)
11.226%
2560x 3.03% 3.03%

Имеем обязательное разрешение для адаптивной вёрстки 360pх, лучше «резиновое» до 640px, оно покроет практически все смартфоны, я думаю примерно 50% устройств от общего количества с учётом возможного разворота.
768x и 800x дают в сумме около 13% смартфонно-планшетного парка, плюс разные расширения типа 896×414 — 4.28% накинут ещё около 10% устройств, итого более 20%, имеет смысл делать!
Далее ноутбучные расширения 1024px обязателен, 1280x можно пропустить, отступ с боков в 140px приемлем и хорошо смотрится. Этим закрываем около 13% устройств.
1366x — стоит делать обязательно — 10% устройств, плюс: 1440x, 1536x, 1600x так же можно ничего не делать, отступ с боков: 74, 85, 117px
1920x — обязателен. Всё что выше не имеет особого смысла и скорее является прихотью, тем более что майнинг на добрую пятилетку отложил приход 4k мониторов из-за отсутствия видеокарт, и судя по курсу Биткоина — это ещё надолго.

Идеальный вариант адаптивной вёрстки на 2021 год:

  • 360pх до 640px растягивающийся, минус отступы по 10 — 15 пикселей с боков
  • 768px
  • 1000px -> 1024x (минус 24 пикселя на скролл браузера = 1000px для дизайна, отступы по желанию (пункты ниже так же)).
  • 1342px -> 1366x
  • 1512px -> 1536x по желанию, чтоб накрыть 1600x и чуть большие расширения, около 10% устройств.
  • 1896px -> 1920x

24px вычислил практическим путём, переключая стили оформления Windows XP, с тех пор ещё ни разу не подводил данный выбор.

Экономный вариант адаптивной вёрстки на 2021 год:

  • 360pх
  • 768px
  • 1000px -> 1024x
  • 1896px -> 1920x

Совсем экономный вариант адаптивной вёрстки на 2021 год:

Послесловие

Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.

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

Меню раздела «Всякое разное»

Страница сгенерирована за 0.001277 сек.
На один процесс веб-сервера: 783 стр./сек.
Всего Apache может отдать: 200 448 стр./сек.
Выделено PHP памяти: 446.3 KB
(real_usage: 2 MB)

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы
из памяти браузера: сек.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

like

147

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

  • Какие бывают форматы размеров сайта для вёрстки
  • Какие есть варианты создания страницы под разные мониторы и разрешения
    • Фиксированная верстка
    • Резиновая верстка без ограничений
    • Резиновая верстка с заданной минимальной и максимальной шириной
    • Адаптивная верстка
    • Общая статистика популярных разрешений экранов мобильных и компьютеров
    • Рекомендуемые размеры сайта
    • Если у вас Яндекс.Метрика
    • Если у вас 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/Суть та же, что и в онлайн-сервисе, только в данном случае настройки появляются непосредственно в браузере: Скрипт для просмотра сайта в разных разрешениях

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

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

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

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

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

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

    • Пришел, увидел и купил! Как сделать сайт удобным и посещаемым На вашем сайте может быть замечательный контент, достойный самого пристального внимания и обсуждения, но если вы не знаете, как его преподнести и сделать так, чтобы.
    • 7 врагов конверсии и способы борьбы с ними Часто бывает сайт есть, а продаж, звонков, заявок или других целевых действий нет или их катастрофически мало, т.е. у сайта низкая/нулевая конверсия. Причин может быть очень.
    • Немного о юзабилити, или Жалуюсь, пользуясь случаем! Сделать сайт или магазин удобными для своего клиента на самом деле не так и сложно. Просто нужно внимательнее относиться к мелочам и всегда ставить себя.
    • Стучите, клиент, и Вам откроют! Анализ способов on-line коммуникации на сайте Мы провели анализ способов on-line коммуникации на сайте и дадим рекомендации, основанные на наиболее распространенных ошибках. Ведь установка кода сервиса на сайт — только начало.
    • Как продумать и спроектировать структуру интернет-магазина Как оценить спрос на товары и правильно спроектировать структуру сайта, какие правила и советы стоит учесть, продумывая категории, подкатегории и фильтры на сайте, – читайте.

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

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

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