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

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

Эта задача становится и вызовом, и проблемой для художников и верстальщиков. Человек может создать макет, но при передаче его метранпажу возникают проблемы с «промежуточными состояниями», когда разработчик не знает, как он должен выглядеть на различных габаритах экранов. Поэтому, в зависимости от заказа, проектировщик должен предоставить несколько вариантов для разных параметров, чтобы избежать недоразумений и уберечь специалистов от самостоятельного толкования референса. В противном случае это может привести к переделке верстки и потере времени.

ширина экрана для дизайна

Статистика при использовании инструментов для веб-серфинга

Давай посмотрим на StatCounter, который предоставляет информацию о посещаемости и действиях пользователей на веб-ресурсах, помогая владельцам сайтов и маркетологам лучше понять и оптимизировать свои продукты. Данные передаются на серверы, где они обрабатываются и анализируются. Затем эти сведения предоставляются гостям в виде отчетов, которые помогают им понять посещаемость своего портала, поведение юзеров и другие важные метрики.

Кстати можешь посмотреть на его аналоги — это GlobalStats и SimilarWeb.

Обратимся к данным, которые он собрал для тебя.

разрешения мобильных устройств

Доля соотношений разрешений у мобильных устройств

  • 360px * 800px — 11.85%
  • 390px * 844px — 6.96%
  • 414px * 896px — 5.87%
  • 412px * 915px — 5.13%
  • 393px * 873px — 4.97%
  • 360px * 780px — 4.3%
разрешения планшетных устройств

Доля соотношений разрешений у планшетов

  • 768px * 1024px — 26.93%
  • 810px * 1080px — 9.3%
  • 800px * 1280px — 6.74%
  • 1280px * 800px — 6.69%
  • 820px * 1180px — 4.76%
  • 601px * 962px — 4.05%
разрешения десктопных устройств

Доля соотношений разрешений у ПК

  • 1920px * 1080px — 22.93%
  • 1366px * 768px — 15.28%
  • 1536px * 864px — 10.36%
  • 1440px * 900px — 6.8%
  • 1280px * 720px — 5.83%
  • 810px * 1080px — 2.98%
разрешения у всех устройств

Общая статистика между всеми девайсами

  • 1920px * 1080px — 9.63%
  • 360px * 800px — 6.98%
  • 1366px * 768px — 6.3%
  • 1536px * 864px — 4.27%
  • 390px * 844px — 3.94%
  • 414px * 896px — 3.32%

Под какие параметры рисовать макет

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

К примеру, можешь взять отрисованный десктопный вариант и положить его на чистый лист по центру (к примеру, в Figma) с соотношением в два раза выше. Так ты сразу увидишь недостатки и поймешь, как правильно компенсировать пустоту слева и справа от твоего проекта.

Оптимальной шириной будет следующее:

  • Смартфоны — 360px
  • Планшетная версия — 768px
  • Десктопы — 1440px

Чаще всего набросков с такими форм-факторами будет достаточно для того, чтобы специалист понял, как ему делать адаптив в CSS. Не забудь, что необходимо предоставить максимально детальные и четкие инструкции во избежание недопонимания и ошибок в первых вариантах готового продукта. При передаче результата в идеале обратить внимание на нестандартные элементы и расписать, как они себя будут вести при этих переходах.

Под какие форматы подгонять платформу

С каждым годом верстальщики сталкиваются с новыми высотами и осваивают сложные приемы. Поэтому, чтобы создать сайт, который будет привлекателен и функционален везде, нужно учесть множество факторов, отследить каждый пиксель в отладчике и обязательно проверить кроссбраузерность.

Здесь можешь ориентироваться на следующие медиазапросы по ширине при подгонке:

  • Смартфоны — от 320px до 420px
  • Планшеты – от 768px до 1024px
  • Ноутбуки большие и маленькие — от 1280 до 1440px
  • Компьютеры с мониторами — от 1440px до 2160px
макеты дизайна для разных устройств

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

Также можешь применить технологию Responsive Web Design (RWD), или резиновую верстку, которая позволяет страничке автоматически подстраиваться под разные размеры гаджетов. Это позволяет создавать гибкие и отзывчивые ресурсы, которые будут хорошо смотреться везде.

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

Ну что, вызов принят? Будь готов учитывать разнообразные границы, плотность пикселей, формы, цветовую точность, и создавать гибкие интерфейсы, которые визуально будут приятны на любом гаджете! И, главное, — если работаешь в команде, помни, что грамотное взаимодействие верстальщика и дизайнера является ключевым аспектом успешного проекта, который сведет к минимуму лишнюю суматоху и ускорит создание проекта для клиента.