Рейтинг разрешений экранов 2021
Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 2021 года. Выясним какие размеры адаптивной вёрстки для сайта использовать и под какие браузеры оптимизировать сайт.
Когда-то давно делали отдельные сайты под мобильные устройства, но сегодня более популярная и любимая поисковиками адаптивная вёрстка (сайт растягивается/перестраивается в зависимости от экрана устройства). За последние несколько лет вёрстка, как таковая, сместилась в сторону векторных форматов из-за разных размеров экранов и чёткости отрисовки векторных изображений (значков, логотипы, элементы дизайна, итп). Растровыми остаются только фотографии на сайте. Т.е. рисование дизайна в Фотошопе как таковое отходит, сейчас популярны разные векторные редакторы и в первую очередь онлайновые типа Фигмы.
Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.
Какие разрешения экранов в мире были популярнее всего в 2020 году?
Согласно общемировой статистике StatCounter за 2020 год, на ПК и смартфонах были популярнее всего следующие разрешения экранов:
- 360х640 (10,22%);
- 1366х768 (9,31%);
- 1920х1080 (8,63%);
- 375х667 (4,22%);
- 414х896 (3,92%);
- 1536х864 (3,46%);
- 360х780 (3,39%);
- 360х760 (3,08%);
- 1440х900 (2,86%);
- 375х812 (2,85%).
Другие известные размеры экранов занимают от 1,97% до 2,64%.
Помимо них, есть ещё одна графа, где по отдельности разрешения не достигают даже 1%, но суммарно занимают 39,16%, запросто вытесняя всех лидеров со своих мест. В этот процент «других» устройств входят экраны с нестандартным разрешением, либо устройства, чья информация была скрыта от счётчиков или не могла быть проанализирована StatCounter (например, старые мобильные телефоны).
Общая статистика для ПК и смартфонов
Какие популярные разрешения экранов для ПК в мире были наиболее востребованными с апреля 2019 по апрель 2020 года? Анализ статистики StatCounter.
Все самые популярные разрешения экранов для ПК в мире: 1366×768, 1920×1080, 1440х900.
Топ-5 самых популярных разрешений мониторов на персональных компьютерах, используемых как для игр, так и для веб-сёрфинга (в порядке убывания частоты использования):
- 1366×768 (23,58%);
- 1920×1080 (20,43%);
- 1440х900 (6,99%);
- 1536х864 (6,78%);
- 1600х900 (4,71%).
Tengyart
Фотограф, гик, ретушёр
Разшерения экранов
- 1366x768 - 9.17%
- 640x360 - 7.83%
- 1920x1080 - 7.70%
- 1024x768 - 4.46%
- 896x414 - 4.28%
- 667x375 - 4.22%
- 780x360 - 3.20%
- 812x375 - 3.03%
- 760x360 - 2.80%
- 1536x864 - 2.74%
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%.
Типы устройств
Выборка 1 | Выборка 2 | Средний процент | |
---|---|---|---|
Смартфоны | 59.62% | 52.02% | 55.82% |
Десктоп | 37.44% | 45.29% | 41.365% |
Планшеты | 2.94% | 2.7% | 2.82% |
О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.
Типы устройств
- Смартфоны - 52.02%
- Десктоп - 45.29%
- Планшеты - 2.7%
- 1920x1080 - 18.14%
- 1366x768 - 12.02%
- 1536x864 - 6.19%
- 1440x900 - 4.55%
- 360x640 - 3.86%
- 800x600 - 3.13%
- 2560x1440 - 3.03%
- 1024x768 - 3.03%
- 1280x720 - 2.98%
- 1600x900 - 2.90%
- 1680x1050 - 2.49%
- 1280x1024 - 1.99%
- 1280x800 - 1.77%
- 360x780 - 1.69%
- 375x667 - 1.66%
- 393x851 - 1.38%
- 1360x768 - 1.35%
- 375x812 - 1.32%
- 414x896 - 1.25%
- 360x760 - 1.24%
- 360x720 - 1.17%
- 1920x1200 - 1.12%
- 384x800 - 1.01%
Разшерения экрана
Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (px), но размер экрана всё равно будет 375px. Например, iPhone 7 имеет дисплей разрешением 1334x750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать "резиновый" дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 - 834px, и LiveInternet показал 800x600 - 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% смартфонно-планшетного парка, плюс разные расширения типа 896x414 - 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 год:
Самые популярные разрешения экранов на смартфонах в 2020 году
Топ-10 самых часто используемых размеров экранов в мире в 2020 году выглядел так:
- 360×640 (16,96%);
- 375х667 (7,15%);
- 414х896 (6,75%);
- 360х780 (5,57%);
- 360х760 (5,07%);
- 375х812 (4,82%);
- 360х720 (4,29%);
- 414х736 (3,73%);
- 412х846 (3,38%);
- 412х892 (3,05%).
Остальные размеры экранов можно посмотреть на этой картинке:
На рынке мобильных устройств в мире (вне топ-14) другие разрешения экранов в 2020 году встречались в 29,52% случаев, но по отдельности не достигали и 1,5%.
Владимир
Сам я сижу на 1366, но странно, что не 1920 на 1-ом месте.
Читать ещё:
Как добавить Яндекс Метрику в AMP версию WordPress в 1 клик?
SEO как игра: геймификация разработки сайта, часть 1
Сравнение статистики и беглые выводы
По сравнению с 2020 годом, максимальное разрешение экранов в топе постепенно растёт. Например, в общей статистике разрешение 1920х1080 поднялось с третьей строчки на первую, а 1280х720 отыграло целых две позиции!
Некоторые размеры экрана, наоборот, позиции потеряли. Например, 1440х900 упало с девятого на одиннадцатое место.
В 2021 году на ПК наблюдается интересная особенность — в общемировую статистику наконец попадают мониторы, превышающие FHD. Разрешение экрана 2560х1440 встречалось среди 2,1% анализируемых устройств!
На этом я заканчиваю ознакомительную статью про разрешения экранов в мире в 2020 — 2021 годах. Надеюсь, это было познавательно!
Tengyart
Фотограф, гик, ретушёр
Какие разрешения экранов были популярнее всего в мире в 2021 году?
На ПК и мобильных устройствах в 2021 году чаще всего использовались следующие разрешения:
- 1920х1080 (9,17%);
- 1366х768 (8,43%);
- 360х640 (6,06%);
- 414х896 (4,47%);
- 1536х864 (4,06%);
- 360х800 (3,87%);
- 360х780 (3,45%);
- 375×667 (3,3%);
- 360×760 (3%);
- 375×812 (2.79%).
Не попавших в топ-14 разрешений экранов стало больше по сравнению с 2020 годом — 42,04%. Одновременно с этим максимальный размер экранов в топе тоже вырос, потеснив мобильные носители.
Вероятно, на такой резкий рост повлияла относительная стабилизация экономического положения. В 2020, наоборот, многие пользователи отказывались от ПК или вынужденно использовали старую аппаратуру, лишившись работы или оказавшись за чертой бедности.
Читать ещё:
В 88 лет умер Фред Херцог — мастер цветной уличной фотографии
Что появилось в обновлении Rank Math v1.0.45?
Почему Роскомнадзор недоступен и что с этим делать?
Самые популярные разрешения мониторов для ПК в 2021 году
В 2021 году в мире чаще всего использовались следующие разрешения мониторов:
- 1920×1080 (21,65%);
- 1366×768 (20,18%);
- 1536х864 (9,74%);
- 1440х900 (6,39%)4
- 1280х720 (5,57%);
- 1600х900 (3,57%);
- 1290х1024 (2,52%);
- 768х1024 (2,42%);
- 2560х1440 (2,1%);
- 1280х800 (2,09%).
Количество устройств с другим размером экранов, не занимающих по отдельности даже 0,45%, суммарно превышает 13,42%.
Популярные браузеры и разрешения экранов
- 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%
Топ-10 самых популярных размеров экранов в мире на ПК в 2020 году
- 1366х768 (22,69%);
- 1920х1080 (20,81%);
- 1536х864 (8,45%);
- 1440х900 (6,98%);
- 1280х720 (4,75%);
- 1600х900 (4,11%);
- 1280х800 (2,99%);
- 1280х1024 (2,65%);
- 1024х768 (2,62%);
- 768х1024 (2,46%).
Другие размеры экранов суммарно использовались в 21,49% случаев.
Браузеры под которые оптимизировать сайты
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% пользователей.
Типы устройств
- Смартфоны - 59.62%
- Десктоп - 37.44%
- Планшеты - 2.94%
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% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).
Tengyart
Возможно, из-за частого использования бюджетных и б/у мониторов в странах экономическими проблемами, а также из-за использования старой техники для сёрфинга в интернете. Статистика Steam для игровых ПК и ноутбуков показывает, что в мире давно уже преобладает 1920. StatCounter подобную информацию выдаёт только для отдельных стран и регионов, например, для Европы или России. Хотя даже в развитых странах 1366 остаётся на 2-3 месте по популярности.
Топ плюс-минус одинаков, но иногда случаются курьёзные изменения. Например, в России с ноября 2020 по март 2021 наблюдался резкий всплеск использования мониторов с разрешением 800х600 (они даже вышли на первое место!), что выглядит ещё более странно)
Несмотря на то, что в сфере веб-дизайна я тружусь давно, у меня до сих пор не сложилось четкого понимания под какие размеры экранов готовить макеты. Я стараюсь внедрять в свой рабочий процесс максимум автоматизации, чтобы любой новый проект можно было начать в "2 клика", образно говоря. Дизайн-системы — наше все, но вот самый начальный этап — определение артбордов и сеток — то, что тормозит мой процесс и не до конца мне ясно.
Я понимаю, что вопрос мой похож на сотни других, которые каждый год обсуждаются и здесь, и на других сервисах. Но хочется услышать мнения, актуальные для 2021 года.
Я буду признателен, если вы поделитесь своими соображениями не только по размеру экранов, под которые нужно готовить дизайн, но и по настройкам сеток для каждого такого размера. Было бы здорово услышать обоснованные мнения, почему выбран тот или иной размер/сетка.
1. Усложнять простое проще, чем упрощать сложное.
2. Сначала мобильные. P.S это не подразумевает обделить десктоп.
3. Перестать мыслить сетками и точными размерами: делать в первую очередь полезные блоки. Почему у дизайнеров проблема с адаптивами? Да потому что они обвешивают блоки немощными кусками "дизайнерских" говнорешений. Когда всей этой поганой мишуры нет, то и вопрос с сетками отпадает. Хороший сайт может быть хоть в 500px шириной на десктопе, при условии что есть полезное действие.
Я начинаю от 290px, но даже сверстав, смотрю что происходит если блок сжимать дальше. Всё больше прихожу к осознанию, что нужно научиться мыслить относительными единицами. На десктопе использую ширину от 700 до 1200px для контента, но плавно ухожу от точных единиц в сторону относительных.
Другая категория, всячески усложняет десктопные версии, чтобы не смотрелось просто. Это глупость. Не понимание факторов ранжирвоания сайтов, поведения пользователей и так далее.
4. Больше отзывчивости, больше относительных единиц, больше grid css.
5. Украшайки — в последнюю очередь.
6. Дизайн сразу в браузере. Да, дизайнить сайт сразу в браузере, использовать условные элементы, которые потом можно отрисовать уже в граф. редакторе. Чтобы дизайнить в браузере, соответственно изучить вёрстку + технологии анимаций в вебе. +доступность +производительность.
7. Фильтровать тренды.
На мой взгляд, проблема сеток это вопрос дебильного дизайна и не понимания того, как это будет отображаться в браузере. Не вижу ни 1 плюса чтобы начинать с этого.
За последние полвека монитор стал неотъемлемой составляющей компьютерной системы, ключевым инструментом взаимодействия между машиной и пользователем. В последнее время наша команда плотно занималась исследованием этой ниши аппаратного рынка – как для ее возможного освоения, так и для продуманного технического оснащения сотрудников. В частности, нас интересовало, в каком направлении и какими темпами развивалась технология изображения, какова динамика рынка и что востребовано у различных групп пользователей – прежде всего, той, с которой мы на данный момент активно работаем, разработчиками ПО. Под катом приводим ту небольшую сводку, которую составили для себя в ходе анализа доступных материалов и статистики.
Эволюция разрешений в действии
Начинать разговор о типах выводящих устройств для визуализации данных можно издалека – хоть с ЭВМ, оснащенных кинескопом. Однако за точку отсчета в современной истории мониторов обычно принимают семидесятые-восьмидесятые годы – период, когда в сфере аппаратных решений произошло сразу несколько ключевых событий. На этом этапе «рабочая станция» программиста приняла привычный для нас вид: терминалы с удаленным доступом к общей ЭВМ сменились персональными компьютерами. Трансформировалась и технология генерации изображения – с появлением видеоадаптеров (первый из которых, Monochrome Display Adapter, был разработан IBM в 1981 году) нагрузка на процессор и оперативную память снизилась, что позволило отдавать больше ресурса графике без ущерба для системы.
Разрешение экранов с MDA составляло 720×350, и работали они с весьма узким диапазоном данных – черно-белыми текстовыми символами. В том же году вышел Color Graphics Adapter, который предлагал ряд дополнительных преимуществ: графический режим наряду с текстовым, поддержку шестнадцати цветов и возможность работать в нескольких разрешениях в зависимости от потребностей в цветопередаче (максимальное разрешение, 640х200, было доступно при работе в текстовом режиме с отображением двух цветов). После паузы в пару лет за ними последовал усовершенствованный Enhanced Graphics Adapter с расширенной палитрой (шестьдесят четыре цвета) и разрешением 640×350 пикселей.
Итогом этой серии разработок IBM и важной вехой в истории мониторов стало создание графического адаптера Video Graphics Array в 1987 году. Это был технологический скачок сразу в нескольких отношениях. Цветопередача стала намного точнее и детальнее за счет того, что число поддерживаемых цветов возросло сразу на несколько порядков (всего 262144 оттенка, из которых при построении конкретного изображения могло применяться шестнадцать). Изображение вытянулось по вертикали – было введено новое разрешение, 640х480 пикселей. Соотношение сторон 4:3 оказалось оптимальным для восприятия и впоследствии долгое время считалось вариантом по умолчанию. В общей сложности VGA работал с десятью вариантами разрешений, что позволяло пользователям подгонять число цветов и размер картинки под свои предпочтения и возможности монитора. Наконец, в новой модели стал использоваться аналоговый интерфейс связи между адаптером и монитором – задел на будущее улучшение цветопередачи. Все это в совокупности сделало VGA рыночным стандартом на годы вперед.
IBM PS/2 Model 50 — первая модель ЭВМ, где использовался VGA
Разумеется, это ничуть не замедлило конец развитию технологии. В конце восьмидесятых – первой половине девяностых вышло еще несколько улучшенных версий адаптера, известных под общим названием Super Video Graphics Array, которые постепенно наращивали объемы видеопамяти, диапазон цветов (до 16,7 миллионов) и размеры картинки. На рубеже десятилетий появилось знаменитое разрешение 800×600, рекорд (но не популярность) которого вскоре побила модель с разрешением 1024×768. По тем данным, которые аналитикам удалось вынести из прошедшей эпохи, до двухтысячных люди преимущественно имели дело с экранами на 800×600, 1024×768 и 640×480 пикселей – не случайно именно эти три разрешения обычно поддерживались популярными играми. Как нетрудно подсчитать, невзирая на рост величин соотношение 4:3 оставалось неизменным.
Между тем, в мире мониторов назревала революция. В течение продолжительного периода электронно-лучевая трубка считалась наиболее практичным и эффективным путем генерации изображения на персональных компьютерах. Альтернативный метод отображения данных при помощи жидких кристаллов был известен еще с шестидесятых-семидесятых годов, однако попытки применять технологию на крупных экранах выявили массу проблем, вызванных нестабильностью прослойки. До поры до времени уделом жидкокристаллических дисплеев оставались калькуляторы, часы и смутная надежда показать себя в той нише рынка, где ЭЛТ-мониторам места не было – на портативных компьютерах.
Toshiba T1100 1985 года, одна из ранних моделей портативных компьютеров, оснащена ЖК-экраном
Так оно, в конце концов, и вышло. К середине девяностых основные недостатки ЖК-дисплеев в ноутбуках были устранены: контрастность выровнялась, цвета появились, а потребность в дополнительном освещении была компенсирована за счет встроенной подсветки. Когда же технология начала применяться на мониторах для стационарных компьютеров, стало очевидно, что при сравнимом качестве изображения, она дает много приятных бонусов – легкость, компактность, низкий расход энергии. ЭЛТ-экраны удерживались на плаву еще достаточно долго, но уже к 2003 году баланс окончательно сместился в пользу плоских мониторов. Вместе с габаритной аппаратурой постепенно ушла одна важная историческая особенность – возможность настраивать разрешение на мониторе с приемлемыми потерями в качестве графики. ЖК-экраны были рассчитаны на работу строго в том разрешении, под которое производились.
Итак, толщина среднестатистического монитора резко сократилась, остальные же измерения стабильно продолжали расти. Чтобы оценить и прочувствовать темпы этого прогресса, достаточно взглянуть на картинку ниже. Этой инсталляцией (правая часть) художник Арам Бартолл лаконично демонстрирует, как менялись размеры экранов на протяжении пятнадцати лет. Достаточно сказать, что три четверти этой стопки относятся именно к двадцать первому веку. Произведение датируется 2013 годом, так что следует также учитывать, что в своем актуальном виде оно бы пополнилось еще рядом элементов, включая бумажные дисплеи на 3840×2160 и 7680×4320 пикселей.
Наконец, помимо непрерывного масштабирования за последнее десятилетие произошел еще один достойный упоминания сдвиг – переосмысление классического соотношения сторон – 4:3. Отклонения от этого стандарта, разумеется, случались и раньше, особенно когда настала пора бурного развития ноутбуков, но до середины двухтысячных они не носили системного характера. Триггером для радикальной перемены году стало стремление привести телеэкраны и компьютерные дисплеи к единому стандарту – возможно, отчасти по причине того, что пользовательский опыт стал в большей степени вращаться вокруг видеоконтента. Как ни забавно, здесь эволюция описала полный круг: ведь история мониторов фактически начиналась с телевизионных экранов. Так или иначе, начиная с 2008 года звание стандарта перешло от пропорции в 4:3 сперва к 16:10, а затем и к 16:9.
Совершив этот небольшой экскурс в историю, вернемся к вопросу, который интересовал нас в первую очередь: как реагируют на все это многообразие возможностей пользователи ПК? Если говорить об общей массе – достаточно сдержанно и осмотрительно. Несмотря на непрекращающуюся борьбу за каждую новую сотню пикселей на экране, процесс перехода основной аудитории на новые, более просторные мониторы всегда разворачивался неторопливо. Как уже упоминалось, несмотря на то, что формально рубеж в первую тысячу пикселей был преодолен еще в конце восьмидесятых, разрешение 800×600 оставалось лидером без намека на конкуренцию чуть ли не все последующее десятилетие (насколько мы можем судить по обрывочной статистике тех лет). По данным W3Schools, еще в 2000 году ему принадлежала доля рынка в 56% — по сегодняшним меркам, цифра фантастическая – и только к 2003 первенство наконец перешло к разрешению 1024×768.
Ускоряющиеся темпы развития графики никак не влияют на интерес пользователей к новинкам – тенденция к постепенному наращиванию популярности сохраняется и по сей день. С началом эпохи ЖК-экранов разрешения становятся фиксированными — вероятно, это тоже сыграло свою роль, пресекая возможность экспериментировать с разной плотностью на старых мониторах. Если обратиться к свежей статистике 2019 года, можно убедиться, что в мировом масштабе разрешение 1366×768 по-прежнему остается самым востребованным несмотря на обилие более высокопиксельных вариантов. Примечательно, что вершины оно достигло в 2013 году, после разгона в шесть лет, и удерживалось там стабильно. Одним словом, все изученные нами данные за последние три десятка лет указывают на низкую мобильность рынка.
Статистика популярности разрешений экранов по миру за последний год
О причинах такого положения дел догадаться несложно. Во-первых, повышение качества изображения – это существенный бонус, но для среднего пользователя едва ли достаточный, чтобы спровоцировать его на немедленную замену техники, особенно в период, когда она все еще остается в ценовой категории ульстрасовременного эксклюзива. Широкая популярность приходит к новым дисплеям по большей части тогда, когда они перестают быть новыми и начинают сдвигаться в сторону рыночного стандарта.
Вместе с тем, развитие пользовательских предпочтений нельзя назвать линейно-поступательным неторопливым движением от меньших величин к большим. По мере того, как диапазон разрешений растет, люди все сильнее начинают рассеиваться между доступными опциями. На графиках Statcounter видно, что даже абсолютные лидеры в последнее время не завоевывают более трети общей аудитории, а в тройке самых популярных вариантов укоренилось «Другое», объединяющее целую россыпь разнообразных разрешений. Тот факт, что более половины работающих на компьютерах, довольствуются сильно устаревшими дисплеями, представляется нам любопытным. Возможно, к текущему моменту качество изображения минуло некоторый рубеж – стандарт стал настолько высок, что для среднестатистического человека, не слишком плотно работающего с визуальным контентом, приемлемы даже те разрешения, которые до него не дотягивают.
Однако в составе общей массы выделяются отдельные группы, которые намного острее нуждаются в качественной графике и активнее используют новые технологические возможности. Это, прежде всего, графические дизайнеры, цифровые художники, геймеры (так, в сообществе Steam разрешение 1920×1080 заняло ведущую позицию уже в 2017 году). И здесь возникает логичный вопрос: относятся ли к этой части аудитории разработчики?
Обзор интернет-источников показал, что определенного, основанного на количественных данных ответа на этот вопрос пока нет – массовых опросов среди данной группы пользователей до сих пор не проводилось. Тем не менее, нельзя сказать, что сообщество относится к проблеме равнодушно: разрозненных, субъективных изложений личного опыта в Сети более чем достаточно, от споров на форумах до рекомендаций блогеров и интернет-изданий. Разумеется, в совокупности все это создает пёструю и противоречивую картину предпочтений.
Если попытаться вывести из полифонии этого коллективного осмысления общее зерно, вырисовывается следующее. Деятельность разработчика в первую очередь связана с обработкой данных в текстовом формате, графический контент – более периферийная область. Текстовые данные при работе с кодом отличаются высокой плотностью, что требует сильной зрительной концентрации и создает нагрузку на глаза. Кроме того, большое значение имеет просторная и хорошо упорядоченная рабочая область – программисты высоко ценят возможность иметь перед глазами не только нужный фрагмент кода, но и сопутствующие материалы, источники и программы.
Из этих исходных положений можно с многочисленными оговорками сделать несколько выводов:
- Так как высокое разрешение обеспечивает более четкое, комфортное для глаза изображение теоретически разработчикам следовало бы стремиться к максимально возможному числу пикселей.
- Вместе с тем, эффект от отличного качества картинки может быть полностью нивелирован слишком высокой плотностью. Многие отмечают, что высокое разрешение при небольшом размере экрана дает массу неприятных побочных эффектов – от ряби в глазах до головной боли.
- По идее, программисты должны делать выбор в пользу больших экранов – и для поддержания разумной плотности, и для расширения рабочей области. Однако здесь нужно учитывать и другой момент: большой популярностью в последние годы пользуется конфигурация с двумя мониторами. Некоторые считают современные мониторы 4К достойной альтернативой, но у такой замены хватает и противников, которые предпочитают более четкую границу между зонами кода и не-кода и меньший диапазон движения взгляда по вертикали.
- Наконец, всё, что говорилось выше о склонности пользователей к компромиссам, когда встает вопрос о выборе между качеством изображения, производительностью и ценой, в немалой мере относится и к разработчикам. При всех потенциальных преимуществах, которые дают высококлассные экраны, большинство будет ориентироваться не на идеальное, а на приемлемое. Второстепенная роль графики означает, что вкладываться средний программист будет, прежде всего, все-таки в мощность машины.
- В некоторой степени предыдущий фактор, вероятно, сглаживается за счет того, что программисты, в целом, более осведомлены о технологических новинках и предъявляют более высокие требования к своим компьютерам, как к основному рабочему инструменту.
Но эти ментальные построения, конечно, требовали проверки реальной выборкой, пусть и в ограниченном объеме. Первым шагом стал опрос, который мы провели среди разработчиков компании. Локальная статистика, в целом, подтвердила наши выводы: в то время как в мире простых смертных все еще господствует 1366×768, постепенно сдавая позиции под натиском 1920×1080, для разработчиков это давно пройденный этап: основная конкуренция разворачивается между более современными форматами. Итоги первой валидации нас вдохновили и теперь команда аналитиков настроена проверить результат на более обширной аудитории. Просим хабровчан внести вклад в нашу статистику – позже мы обязательно отчитаемся о результатах.
Разшерения экранов
- 360x640 - 12.29%
- 1366x768 - 12.29%
- 1920x1080 - 12.01%
- 375x667 - 4.47%
- 393x851 - 3.99%
- 360x780 - 3.78%
- 360x720 - 3.74%
- 1536x864 - 3.58%
- 1280x1024 - 3.50%
- 1024x768 - 3.41%
- 414x896 - 2.78%
- 360x760 - 2.76%
- 1600x900 - 2.51%
- 768x1024 - 2.41%
- 412x892 - 2.04%
- 375x812 - 1.97%
- 800x600 - 1.83%
- 1280x800 - 1.78%
- 320x568 - 1.77%
- 1440x900 - 1.69%
- 412x915 - 1.48%
- 1280x720 - 1.27%
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% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).
2 комментария
Разшерения экранов
- 360x640 - 9.7%
- 1366x768 - 8.98%
- 1920x1080 - 8.46%
- 375x667 - 4.07%
- 414x896 - 3.92%
- 1536x864 - 3.39%
- 360x780 - 3.3%
- 360x760 - 2.99%
- 375x812 - 2.78%
- 1440x900 - 2.77%
- 360x720 - 2.53%
- 768x1024 - 2.53%
- 414x736 - 2.12%
- 1280x720 - 1.99%
- 412x846 - 1.91%
- 412x892 - 1.79%
- 412x869 - 1.67%
- 1600x900 - 1.63%
- 360x740 - 1.62%
- 1280x800 - 1.5%
Популярные разрешения экранов в мире на мобильных в 2021 году
- 360×640 (10,17%);
- 414×896 (7,64%);
- 360×800 (6,06%);
- 360×780 (5,7%);
- 375×667 (5,64%);
- 360×760 (4,95%);
- 375×812 (4,78%);
- 412×915 (3,56%);
- 393×851 (3,53%);
- 412×892 (3,4%).
Другие разрешения, не попавшие ни в топ-10, ни в топ-14, встречались на 33,68% всех устройств.
На мой взгляд, небольшое разрешение экранов для мобильных устройств может обуславливаться не только кризисом, но и тем, что многие пользователи до сих пор используют устаревшую аппаратуру, либо в принципе не имеют возможности приобрести качественную технику.
Когда анализ касается государственных компаний, домашней техники и малых офисов, статистика также может проседать в сторону ухудшения, потому что во всех приведённых случаях устройства могут меняться один раз за 5-10 лет, либо поставляться с максимально бюджетной комплектацией.
Разшерения экранов
- 800x600 - 27.1%
- 1024x768 - 21.0%
- 640x480 - 14.8%
- 1920x1080 - 8.7%
- 1366x768 - 8.7%
- 1600x1200 - 5.0%
- 1280x800 - 2.8%
- 1280x1024 - 2.3%
- 1440x900 - 1.5%
- 1152x864 - 1.0%
- 1680x1050 - 0.8%
- 240x320 - 0.1%
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%.
Послесловие
Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.
Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.
Читайте также: