Разрешения экрана, на которые нужно делать упор при верстке сайта
Сейчас те web-разработчики, которые не делают адаптивные сайты на HTML5, вымрут как мамонты, так как рынок всегда диктует свои условия, а конкуренция не дает малейшего повода в этом усомниться.
Сегодня нашел 2 офигенских web-сервиса, которые помогают автоматизировать некоторые вещи при разработке пользовательского интерфейса.
Поэтому сегодня небольшая статья-заметка обо всем об этом.
При разработке сайтов, разработчику следует сделать упор на 6 разрешений экрана, которые считаются основополагающими в адаптивном сайтостроительстве.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Дополнительные сервисы
Помимо этого есть как минимум 2 web-сервиса, которые позволяют немного автоматизировать процесс тестирования разрабатываемого сайта:
Первый сервис – responsinator.com
Есть возможность удобно протестировать на большинстве популярных устройствах, начиная с iPhone 3GS и заканчивая «стандартными» экранами для Android-смартфонов.
Второй сервис – studiopress.com
Можно тестировать как на устройствах, так и на популярных разрешениях экрана без привязки к конкретным устройствам.
P.S. Эти сервисы я использую только как средства тестирования, но разработку веду по старинному дедовскому способу – постепенно уменьшая размеры окна браузера. Никто не знает, ведь, на каком устройстве в Будущем или в каком окне браузера будет открыт ваш сайт.
Комментарии
Bizzona, 5 марта 2013 г. 18:58 #
Спасибо, за предупреждение про вымирание. Я как раз думал, какой дизайн для сайта покупать – красивый фиксированный или минималистский адаптивынй.
Олег, 20 мая 2013 г. 08:49 #
Доброго времени суток!
У Вас закралась ошибочка вот здесь “Есть возможность удобно притестировать” должно быть “протестировать”
Размеры адаптивной вёрстки для сайта
Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 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.002724 сек.
На один процесс веб-сервера: 367 стр./сек.
Всего Apache может отдать: 93 952 стр./сек.
Выделено PHP памяти: 446.3 KB
(real_usage: 2 MB)
Браузер построил за сек.
Полное время сек.
С момента выгрузки предыдущей страницы
из памяти браузера: сек.
Как выбрать правильную ширину сайта
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 — тут статистика в первую очередь по США;
- https://gs.statcounter.com/screen-resolution-stats — статистика в мире и по регионам.
Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.
При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.
Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:
Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.
В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла не вижу.
Высота страницы может меняться не только в зависимости от устройства, но и от того, закреплена ли панель закладок в браузере. Обычно она варьируется от 600 до 800 пикселей.
Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.
Рекомендуемые размеры сайта
Стандартная ширина страницы сайта для дизайна должна быть в пределах 1366 пикселей, из которых около 1200 пикселей это «безопасная» контентная область, а 1084 пикселя — ширина текстового блока на мониторе компьютера или планшета. Высота первого экрана на десктопе ориентировочно 700 пикселей.Для мобильной версии сайта ширина принимается за 360 пикселей, а высота — 640.
Но лучше разрабатывать несколько шаблонов используя «опорные точки»:
Устройство Ширина макета, пикселей Отступы по краям Контентная часть, пикселей Большого размера (десктоп или телевизор) от 1366 Зависят от сетки 1200 Среднего размера (ноутбук) от 1024 20 пикселей 992 Маленького размера (планшеты) от 768 15 пикселей 768 Смартфоны от 360 10 пикселей 360 
Важно! Лучше всего, если информация по разрешениям будет касаться именно вашей тематики, поскольку бывают ситуации, когда целевой аудитории свойственно пользоваться нестандартными разрешениями.
Если сайт ещё в разработке, вы можете посмотреть на то, как адаптированы сайты конкурентов в ТОПе. Но для действующего проекта лучшим решением будет посмотреть на свою статистику пользователей.
Как узнать статистику своего сайта по разрешениям экрана?
Если у вас Яндекс.Метрика
- Заходите в раздел Отчеты → Стандартные отчеты → Технологии → Разрешение дисплея:
- Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):
Если у вас Google Analytics
- Технологии → Браузер и ОС → Разрешение экрана:
- Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
- Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.
Как проверить оптимизацию сайта под разные разрешения?
Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать средства браузера или отдельные сервисы, о которых мы ранее писали в статье «Инструменты для анализа отображения сайта на разных устройствах». Вот некоторые из них:
- Бесплатный онлайн-сервис http://responsivetesttool.com/
Тут все довольно просто: вставляете ссылку на проверяемую страницу → выбираете готовое устройство или задаёте своё расширение → готово. - Условно-бесплатный сервис https://www.browserstack.com/responsiveВставляете URL, ждёте пока система сэмулирует сайт на популярных устройствах и получаете максимально приближенный к реальности результат. Для бесплатной trial проверки нужна регистрация.
- Скрипт (букмарклет) для браузера Chrome https://lab.maltewassermann.com/viewport-resizer/Суть та же, что и в онлайн-сервисе, только в данном случае настройки появляются непосредственно в браузере:
Подведем итог
Перед созданием нового сайта или редизайном необходимо:
- понять, какие разрешения наиболее популярны у вашей целевой аудитории;
- определить максимальные и минимальные размеры сайта (в пикселях);
- выбрать тип верстки;
- после создания и реализации протестировать сайт на разных разрешениях и убедиться, что он корректно и презентабельно отображается в любом разрешении.
Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.
Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!
Подписаться на рассылку
- Как продумать и спроектировать структуру интернет-магазина Как оценить спрос на товары и правильно спроектировать структуру сайта, какие правила и советы стоит учесть, продумывая категории, подкатегории и фильтры на сайте, – читайте.
- 5 правил создания прототипов и проведения редизайна сайта Продумывая прототипы или новый дизайн, часто возникает желание внедрить все, что видишь на сайтах конкурентов. Чтобы удержаться от необоснованного копирования и правильно спроектировать структуру сайта.
- 7 врагов конверсии и способы борьбы с ними Часто бывает сайт есть, а продаж, звонков, заявок или других целевых действий нет или их катастрофически мало, т.е. у сайта низкая/нулевая конверсия. Причин может быть очень.
- Как продумать гипотезу для A/B-тестирования Как сделать правильный выбор и тестировать действительно важные блоки страниц сайта? Грамотная подготовка к А/В-тестированию, выбор проблемных страниц и стратегия создания гипотезы для тестирования. О.
- Пришел, увидел и купил! Как сделать сайт удобным и посещаемым На вашем сайте может быть замечательный контент, достойный самого пристального внимания и обсуждения, но если вы не знаете, как его преподнести и сделать так, чтобы.
SEO аналитик SiteClinic.ru
Размеры макета сайта при разработке адаптивного дизайна
Впервые столкнувшись с задачей разработки дизайна адаптивного сайта, возникают вопросы, связанные с размерами макета. Эти вопросы возникают не только у дизайнера, но и часто у клиента. Дизайнер задает вопрос клиенту, под какие разрешения необходимо разработать макет, а клиент отвечает, под все. И тут возникает ступор, ведь разрешений множество, а если нет опыта, то все кажется сложным. Давайте будем разбираться.
Для начала нужно понимать, что при верстке сайта верстальщик работаем с диапазонами размеров, в которых дизайн корректно отображается.
Разрабатывая же макет будущего сайта в графическом редакторе (Photoshop) или сервисе (Figma), дизайнер не можем работать с диапазонами, ему приходится задавать жесткие размеры макета. Эти макеты веб-дизайнер создает с учетом минимального и максимального разрешения популярных экранов, которое определяет для проекта.
Для ПК версии возьмем разрешение 1920 px с контентной частью в 1280 px. Контентную часть можно сделать и больше, например 1440 px, или во всю ширину, если создается, например сервис или административная панель. На данный момент чаще используемый первый вариант. Для смартфонов самым минимальным разрешением считается 320 px. Таким образом, определили максимальное и минимальное разрешения. Далее нужно определиться с промежуточными разрешениями.
К таким разрешениям, относим планшет с горизонтальной и вертикальной ориентацией на 1024 и 768 px. А также макет для мобильных устройств на 480 px в горизонтальной ориентации. Если не создавать макет на 480, получается слишком большой диапазон разрешений попадающих между 768-320 px. Дизайн на таком промежутке за счет версии в 480 px будет гораздо лучше продуман и удобен.
Иногда вместо 320 и 480 разрабатывается один макет на 360 px. Но тогда верстальщику придется самому проверить дизайн после верстки на разрешение в 320, иначе получим сайт с некорректным отображением.
Итак, определились с разрешениями, под которые требуется создать макеты и таких макетов будет пять.
- ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
- Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
- Планшет 768 px без учета отступов справа и слева;
- Смартфоны 480 px без учета отступов справа и слева;
- Смартфоны 320 px без учета отступов справа и слева;
Раньше на скролл отнималось 21 px как стандарт, но ширина скроллинга у браузеров изменилась и отличается. Но это не так важно, главное не забыть и учесть скролл при создание макета для ПК. Подробнее о том, как учесть скроллинг в макете читайте здесь.
Холст 1920 px создавайте только для ПК версии, на остальных разрешениях в размер. Разрешение в 1920 px дает возможность размещать фоновые изображения в блоках дизайна на ширину экрана.
Что касается отступов по краям
Параметр отступов отличается, если будите использовать фреймворк то посмотрите размеры в документации. Если создаете макет сайта без фреймворка то он будет зависеть от модульной сетки и используемых отступов у колонок.
Обычно использую следующие отступы:
- Мобильные 10-15
- Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
- ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.
Подходы к созданию макета сайта Mobile First или Desktop First?
Кроме вопроса: «Какой размер макета сайта делать, создавая адаптивный дизайн?»
Задается еще и сопутствующий вопрос: «Какой из подходов создания правильнее Mobile First или Desktop First?»
Mobile First – сначала мобильные, то есть первым делом рисуются макеты для мобильного, разумеется, перед этим делают прототип сайта. А уже потом переходят к созданию планшетной и ПК версии. Некоторые считают, что благодаря такому подходу можно сделать более удобный интерфейс. И этот подход правильнее исходя из популярности и нарастающего трафика мобильного Интернета.
Desktop First – Первым делом разрабатывается макет для самого большого разрешения, а в последствие для планшета и смартфонов. Другие считают, что такой подход хорош тем, что сразу виден полный функционал проекта, это дает понимание о том, что упростить на планшете, смартфоне и каким образом.
Возможно, этот подход мне ближе, так как создаю дизайн сайтов давно. Изначально не приходилось разрабатывать столько макетов, а делалась лишь одна версия для ПК.
Если подумать, то особой разницы в подходах, лично я не вижу. Считаю, что правильно делать, так как удобнее вам, ведь главное результат! Если можете сделать грамотный дизайн, сделав сначала ПК версию, а потом остальные, зачем задумываться над подходом.
Как быть с плотностью пикселей экранов устройств?
Еще один вопрос, который не дает покоя это плотность пикселей. Вернее даже не сама плотность пикселей, а как будет выглядеть дизайн на мобильных устройствах с высоким разрешением. Часто разрешение у смартфона может быть в разы выше, чем макет, который разрабатывается для ПК версии.
В этом случае стоит обратить внимание на множитель плотности пикселей, который позволяет картинке отображаться на устройстве в несколько раз четче.
Зная множитель плотности пикселей, вы с легкостью определите какой макет и на каком устройстве будет отображаться.
Отсюда следует, что макеты дизайна сайта стоит создавать под обычное разрешение с 1х плотностью пикселей. Иконки и графику рисовать в векторе и использовать svg. При верстке страниц сайта через media queries определять экраны с множителем и подгружать соответствующие растровые изображения, если таковые используются.