Адаптивные макеты
Устройства бывают разных форм, но мы собрали здесь те, для которых чаще всего рисуем адаптивы.
Важно: черным цветом обозначены отступы до области сайта. На любом устройстве существуют панели навигации, и при создании макета важно учитывать, как он будет размещен в этих границах.
Прежде чем адаптировать дизайн под разные разрешения, важно понимать принципы верстки и виды адаптации макетов для различных устройств.
В современном вебе есть 3 типа верстки:
- Резиновая верстка — контент на сайте растягивается пропорционально ширине экрана (или высоте, если речь идет, например, о горизонтальном скроле). Этот тип лучше применять для отдельных блоков, а не для всего сайта.
- Адаптивная верстка (adaptive) — базовый подход: сайт отображается точно так, как был нарисован в макете. Если ширина экрана больше, чем макет, добавляются поля или макет переключается на другой брейкпоинт.
- Отзывчивая верстка (responsive) — элементы дизайна изменяются в зависимости от ширины окна. В Figma это можно реализовать с помощью функции Constraints.
Эти виды верстки редко используются в чистом виде. Чаще всего их комбинируют. Например, меню в адаптивной верстке может быть отзывчивым, или резиновая верстка применяется для десктопа и мобильной версии, а для планшетов и 2K-экранов используются фиксированные размеры шрифтов для лучшей читаемости.
Взято из презентации Redis
Адаптивный дизайн
Адаптивный дизайн подстраивается под устройство, на котором отображается, используя несколько фиксированных макетов. Например, создаются версии для десктопа, планшета и смартфона. Для всех планшетов будет одна версия сайта, для всех телефонов — другая, а для десктопов — третья, без учета различий в размерах экранов внутри каждой группы устройств.
Обычно мы создаем пять дизайнов для наиболее популярных разрешений: 375, 768, 1024, 1440 и 1920 пикселей. Сайт анализирует доступное пространство и отображает пользователю ту версию, которая лучше всего соответствует размеру его экрана.
Пример адаптивного сайта
Адаптивный дизайн или мобильная версия? Следует различать адаптивность сайта и создание отдельной мобильной версии.
Адаптивная верстка — это неотъемлемая часть сайта, которая позволяет создавать один ресурс, предназначенный для разных типов устройств. Такой подход может быть более сложным в реализации, поскольку включает несколько версий элементов дизайна. Однако он упрощает администрирование: например, изменение цен требует внесения правок только в одном месте, и они автоматически обновляются на всех версиях сайта.
Мобильная версия, напротив, представляет собой отдельный сайт, специально оптимизированный для маленьких экранов. Это позволяет максимально адаптировать интерфейс под мобильные устройства, но усложняет администрирование, так как изменения нужно вносить на двух разных сайтах, что требует дополнительных ресурсов.
Отзывчивый дизайн
Сайт с отзывчивым дизайном автоматически адаптируется к изменению ширины окна браузера или экрана, подстраивая размещение элементов в зависимости от доступного пространства.
При изменении размера окна браузера или экрана, контент на отзывчивом сайте динамически перестраивается, чтобы оптимально использовать новое пространство. На мобильных устройствах этот процесс также происходит автоматически: сайт анализирует размер экрана и отображает контент в соответствии с имеющимся пространством.
Отзывчивый дизайн обеспечивает плавный переход между различными вариантами отображения, создавая удобное и логичное размещение элементов на любом устройстве.
Пример отзывчивого сайта
Адаптивный или отзывчивый дизайн: что выбрать?
Отзывчивый дизайн проще: нам не нужно отрисовывать миллион разрешений, так как адаптация происходит автоматически. Его разработка занимает меньше времени. Однако он обеспечивает меньший контроль над вашим дизайном для каждого размера экрана.
Адаптивный дизайн предполагает создание дизайна для использования на всех экранах. Дизайнеры обычно начинают его разработку со среднего разрешения (1440), а затем делают корректировки под другие разрешения экранов.
Адаптивный дизайн теоретически позволяет создать более эффективный пользовательский интерфейс, поскольку предлагает индивидуальные решения для каждого типа экрана. Например, на мобильных устройствах можно увеличить кнопки, убрать ненужные элементы и добавить больше пространства, в то время как на десктопе — разместить большие баннеры и более сложные элементы. Таким образом, адаптивный дизайн позволяет учитывать ситуативные потребности и возможности пользователя, а также соответствовать привычным паттернам поведения на разных устройствах.
В сухом остатке можно руководствоваться правилом: если у вас небольшой и простой сайт, где пропорциональность блоков не критична для восприятия дизайна, можно использовать отзывчивый дизайн. Однако для объемных и сложных сервисов, где каждая деталь имеет значение, лучше инвестировать больше ресурсов в адаптивный подход. Это позволит гарантировать, что ваш сайт будет выглядеть идеально на любом устройстве, независимо от его размера.
Какие в итоге размеры макетов рисовать?
- Если мы работаем с версткой, похожей на адаптивную, и резиновой мобилкой, то лучше использовать следующую схему: 1920 → 1440 → 1024 → 768 → 375
- Если же мы используем подход, похожий на резиновую верстку, то: 1440 → Адаптацией планшета занимается разработчик → 375