На какие устройства и разрешения экранов нужно ориентироваться при разработке сайта

27.12.2018

На какие устройства и разрешения экранов нужно ориентироваться при разработке сайта

Содержание статьи:

Немного истории

Этап 1. «Только компьютеры»

~ c 2000 г.

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

Этап 2. «Мобильный телефон = компьютер»

~ с 2006 г.

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

Поначалу сайты отображались на мобильных телефонах ровным счётом так же, как на компьютерах. Только уменьшенным вариантом, с возможностью увеличения. Некоторые и по сей день придерживаются такой системы, например сайт «Белорусской железной дороги»


Cайт «Белорусской железной дороги» на iPhone 5

Этап 3. «Мобильный телефон — не компьютер»

~ c 2010 г.

Количество выходов в интернет с мобильных телефонов неудержимо росло, и требовались более радикальные меры. Тогда сообщество разработчиков пришло к следующему решению: для мобильных телефонов верстались отдельные сайты (т.н. мобильные версии). При посещении сайта с мобильного телефона, например домен «vk.com», посетитель автоматически перенаправлялся на другой сайт «m.vk.com», на котором размещалась мобильная вёрстка.

К примеру vk.com, facebook.com, twitter.com, youtube.com и другие популярные социальные сети с огромным потоком посетителей по прежнему работают по данной методике. Это обусловлено тем, что данные проекты крайне нагружены различным функционалом, который на различных девайсах работает по различным алгоритмам, а зачастую требует взаимодействий с элементами мобильного телефона (камерой, микрофоном и т. д.).

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

Этап 4. «Мобильные телефоны и компьютеры — это уже не всё»

~ c 2013 г.

Хоть сообщество разработчиков и развивалось довольно активно в направлении решения вопроса мобильных сайтов, но технологии не стояли на месте. Помимо обычных мобильных телефонов появлялись всё новые и новые девайсы с возможностью выхода в интернет: смартфоны, ноутбуки, планшеты, телевизоры, часы, навигационные системы автомобилей и др. Таким образом размеры и пропорции экранов, с которых просматриваются сайты, стало просто непредсказуемо огромным: от умных часов (240×240 px) до мониторов Ultra-HD (3840×2160 px).

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

Адаптивный веб-дизайн

Принцип сетки

Адаптивный веб-дизайн (адаптивная вёрстка) берёт за основу т.н. «принцип сетки». Т. е. область экрана визуально разделяется на определённую сетку (модульную систему).


Принцип сетки в веб-дизайне

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

Такой принцип позволяет грамотно распределять контент по области экрана и расставлять акценты. Но в чем же адаптивность данного решения? Всё просто. При изменении размера (разрешения) экрана элементы сайта перестраиваются и занимают разное количество колонок.


Пример адаптивного контента

Точки перехода

С принципом перестроения мы ознакомились. Но встаёт логичный вопрос: «А на каких именно разрешениях необходимо перестраивать контент?»

После появления и активного внедрения адаптивной вёрстки каждый разработчик решал сам, на сколько «колонок» разбивать экран, на каких именно разрешениях перестраивать тот или иной элемент сайта. Такой подход имел право на существование, но создавал проблемы в процессе разработки, т.к. над проектом зачастую работает целая группа разработчиков, и у каждого может быть своё видение этого вопроса. Была необходима всеобщая система. Постепенно было выработано несколько таких систем, но наибольшее распространение получила система «Bootstrap», разработанная компанией Twitter.

Основные принципы:

  • контент разбивается на 12 колонок;
  • контейнер сайта на разрешениях более 1200px не увеличивается;
  • 5 точек перехода (перераспределения контента).


Принцип сетки в Bootstrap

Точки перехода:

  1. 575 px и менее — смартфоны в портретной ориентации (вертикально);
  2. 576 — 767 px — смартфоны в альбомной ориентации (горизонтально);
  3. 768 — 991 px — планшеты*;
  4. 992 — 1999 px — ноутбуки*;
  5. 1200 px и более — экраны с широкоформатным разрешением.

* Устройства приведены в качестве примера. Естественно, есть планшеты, у которых разрешение выше 991 px, ноутбуки тоже далеко не ограничены цифрой в 1999 px.

Сначала мобильные

Современные веб-тенденции таковы, что наибольшее количество интернет-трафика приходится именно на смартфоны. Поэтому в разработке многих актуальных проектов используется принцип «Mobile First» (сначала мобильные). Это означает, что первым делом разрабатывается дизайн сайтов для разрешений до 575 px: оптимизируется контент, прорабатывается удобство навигации пользователей и их взаимодействия с сайтом. А уж потом постепенно разработчики добираются до отображения сайта на мониторах компьютеров.

Если не вдаваться в подробности и тонкости адаптивной вёрстки, то можно сказать, что такой подход позволяет значительно сократить количество кода, повысить производительность (скорость) сайта на смартфонах, улучшить его «юзабилити».

Немного статистики

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

Для лучшего понимания мы разбили её на тематики:

Проект Разрешение экрана (ширина), px Общее соотношение смартфоны / ПК
320 360 375 1280 1366 1440 1920
qmedia.by 6,78% 33,7% 4,1% 4,95% 13,9% 2,71% 13,6% 53,3% / 44,8%
Интернет-магазин мебели 6,18% 42,2% 1,01% 6,53% 14,6% 5,56% 5,27% 54,2% / 42,8%
Гранитная мастерская 3,43% 42,2% 6,25% 5,86% 12,3% 3,66% 18,8% 54,3% / 42,7%
Интернет-магазин семян 4,9% 23,4% 0,96% 12,3% 23,2% 4,12% 8,02% 61,6% / 32,8%
Интернет-магазин автомобильных аксессуаров 3,31% 27,3% 3,06% 9,62% 19,9% 2,63% 11,5% 56,6% / 40,4%
Логистическая компания 2,09% 12,3% 4,05% 7,35% 20% 3,95% 27,6% 22,4% / 76,3%
Оптовый интернет-магазин канцтоваров 3,14% 27,3% 4,01% 10,7% 18,8% 3,64% 11,3% 39,7% / 57,9%
Фермерское хозяйство 6% 30,5% 2,2% 10,2% 16,6% 2,59% 7,49% 43,3% / 49,5%
Банк 6,91% 42% 3,47% 5,46% 12,1% 2,33% 7,92% 59,6% / 38,2%
Учебный центр 6,52% 42,8% 8,32% 4,46% 11,9% 1,83% 7,7% 65% / 32,9%
Сеть ломбардов 7,46% 46,4% 3,45% 4,75% 12,9% 1,21% 5,23% 66,3% / 31,1%
Производитель кухонь 7,43% 42,3% 4,52% 6,7% 11,2% 1,67% 7,73% 60,3% / 34,5%

Статистика разрешений по тематикам

Глядя на полученные данные, можно сделать следующие выводы:

  1. Почти во всех сферах мобильный трафик преобладает.

    Исключение составляют специфические b2b-тематики, например:

    • логистические услуги;
    • оптовая торговля;
    • фермерское хозяйство.
  2. В подавляющем большинстве случаев, где лидирует мобильный трафик, на первом месте разрешения шириной 360px. И, что важно, данное разрешение опережает следующее по популярности в 2 и более раз.

    Некоторые популярные телефоны из этого диапазона:

    • Xiaomi Mi A2 Lite
    • Xiaomi Redmi 3S
    • Xiaomi Redmi 4
    • Xiaomi Redmi 5
    • Xiaomi Redmi 6A
    • Samsung Galaxy A3
    • Samsung Galaxy A5
    • Samsung Galaxy J3
    • Samsung Galaxy J5
    • Samsung Galaxy J7
    • Samsung Galaxy S5
    • Samsung Galaxy S6
    • Samsung Galaxy S7
    • Samsung Galaxy S8
    • Huawei Y5
    • Huawei Y6
    • Huawei P8 Lite
    • Huawei P10 Lite
    • Huawei P20 Lite
    • HTC One M8
    • HTC One M9
  3. Учитывая перечисленные популярные разрешения, закрывается около 90% всех пользователей. Т. е. несмотря на то, что в метрике указана статистика по гораздо большему количеству разрешений (около 150), перечисленные 7 являются самыми важными точками в тестировании.

Выводы и советы

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

Помните, что принцип «Mobile First» (сначала мобильные) для многих тематик является основополагающим! Например:

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

Но не забывайте, что для некоторых тематик этот принцип работает на порядок хуже. Например:

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

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

Читайте также
Это не статья-клон, которых написано тысячи настройке рекламных кампаний в Instagram и Facebook. Дочитайте до конца и убедитесь в этом сами.