Размеры адаптивной вёрстки для сайта
Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 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%
Типы устройств
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%
Разрешения экранов
- 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%
Разрешения экранов
- 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%
Типы устройств
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 год:
Совсем экономный вариант адаптивной вёрстки на 2021 год:
Послесловие
Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.
Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.