Часто при разработке сайта, а точнее на самой первой стадии — на создании прототипов, логики и дизайна возникает ряд вопросов, связанных с шириной контейнера или, вернее сказать, с разрешением экрана нашего потенциального пользователя.
Аксиомой в данном повествовании будет являться утверждение о том, что «экран, для которого дизайн делается изначально — будет давать пользователю самый лучший experience, а все остальные большие и меньшие экраны смогут к нему быть лишь максимально приближены»
Многие дизайнеры в работе используют старую ширину экрана в 1024 пикселя, поэтому финальная production версия проекта выглядит странно так как справа и слева остаются своеобразные поля.
Существует также несколько разрешений экранов, которые знакомы дизайнерам, но они по каким-то причинам их не используют. Например ширина в 1920, 1280 или 1366 пикселей никого не удивит — такую ширину имеют примерно 70% desktop устройств на сегодняшний день.
О них и поговорим.
Если между 1280 и 1366 разницы большой мы не увидим, то между 1920 и 1280 разница в размере будет уже довольно существенной и масштаб элементов придется подстраивать. Сделать это нужно будет либо на этапе верстки либо в самом дизайне (что реже, так как на этапе верстки за масштабирование будут отвечать формулы и автоматика). Чаще этим занимаются верстальщики, во всяком случае об этом говорит наш опыт.
Итак, полагаться на «собственное, авторитетное мнение», конечно, превосходная идея, но мы убеждены, что статистика куда важнее предпочтений конкретного дизайнера. Задача состоит в том, чтобы определить какое «базовое» разрешение экрана мы будем использовать.
В дальнейшем этот экран и будет адаптирован к другим desktop версиям.
В качестве испытуемого мы возьмём наш собственный проект, сайт https://zotye-motors.by, который с момента его запуска в ноябре 2018 года уже посетило более 10.000 человек. Это более менее достаточная цифра для выведения некоторой статистики.
Из диаграммы, сформированной в отчетах Яндекс Метрики, мы можем видеть, что самым популярным экраном да данный момент среди пользователей этого сайта является разрешение в 1920 пикселей. Его преимущество над следующим экраном составляет 3,8%, а общая доля от всех desktop посетителей — 28,6%.
На первый взгляд все кажется очевидным — создаём артборд в 1920 и можем начинать работу. Однако, как мы уже описали выше, разницы между 1366 и 1280 будет немного, а соответственно и работы по адаптации одного к другому будет немного. А вот в случае с 1920 — придется переделывать весь проект для более маленьких экранов. Звучит не так страшно когда проект состоит из одной страницы, а если их, предположим, 20?
Теперь попробуем сложить второе и третье место, т.е разрешения экранов в 1280 и 1366 пикселей. получим 38,6% посетителей. Иными словами, почти 40% посетителей используют эти разрешения экранов. Напомню, мы рассматриваем именно посетителей, перешедших на сайт с desktop.
Из всего изложенного мы можем сделать следующие выводы:
Спасибо за внимание и оставайтесь с нами.
