Меня зовут Карен Ананян, я продуктовый дизайнер в компании SimpleOne

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

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

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

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

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

Текущий подход

На сегодняшний день существуют два базовых подхода к адаптивному веб-дизайну интерфейсов под разные устройства и разрешения:

1. Responsive design (респонсивный / отзывчивый дизайн)

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

2. Adaptive design (адаптивный дизайн)

Основная идея этого подхода — перестраивать структуру отдельных блоков и элементов в зависимости от устройства. Например, меню с навигацией на больших мониторах может быть открыто всегда, а на мобильных девайсах скрываться в «бургер»-меню. Таким образом, адаптивный дизайн требует дополнительных ресурсов: нужно проектировать и реализовывать разные макеты под различные типы устройств.

Проблемы существующих подходов

• Responsive design не всегда хорош, когда элементы «растягиваются» сверх меры и теряют удобочитаемость и приятный внешний вид.

• Adaptive design может становиться слишком трудоемким, если придется проектировать и поддерживать большое количество макетов для разных типов устройств.

Использование масштабирования

Иногда можно встретить использование того самого масштабирования, что применялось раньше вместо адаптива. Однако сейчас он используется более точечно, например, масштаб всего сайта изменяется на определенном диапазоне разрешений экрана устройств.

Так, существует функция Autoscale в no-code платформе Tilda, которая позволяет отображать сайт в похожем виде как на экранах ноутбуков, так и на широкоформатных мониторах. Вот несколько сайтов с включенной функцией:

• Лонгрид по мотивам Тима Бертона

• Лендинг рассылки «Процессор»

• Сайт уральской строительной выставки

Предлагаемое решение: Stretch, Scale, Switch (SSS)

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

Stretch → Scale → Switch

1) Stretch: сначала мы используем принципы отзывчивого дизайна, чтобы гибко изменять размеры элементов по ширине или высоте. В большинстве случаев этого уже достаточно для работы с разным диапазоном устройств.

2) Scale: когда размеры экрана увеличиваются (или уменьшаются) значительно, мы начинаем пропорционально масштабировать макет целиком (меняя шрифты, отступы, размеры блоков и т. д.). По сути, берем уже проверенную структуру и увеличиваем (или уменьшаем) ее в соответствии с выбранным множителем (scale-фактором).

Пример расчетов

Давайте возьмем базовое разрешение 1200–1440 px. Если ширина экрана увеличивается до 1441–1920 px, мы применяем scale-фактор 1440 / 1200 = 1.2. Это означает, что элемент с изначальным размером шрифта 16 px будет увеличен пропорционально — до 19,2 px, сохраняя общий визуальный стиль и логику макета. 

Если же ширина экрана достигает, скажем, 1921–2560 px, то scale-фактор возрастает уже до (1920 / 1440) ≈ 1.33. Таким образом, мы можем использовать один и тот же дизайн, последовательно масштабируя все элементы, пока не достигнем следующего важного «порога», при котором потребуется полная перестройка структуры. 

Для упрощения подобного масштабирования на уровне верстки удобно использовать относительные единицы (em или rem), задавая базовый размер и затем масштабируя его в соответствии с выбранным scale-фактором. Ниже таблица с примером:

3) Switch: мы определяем ключевые точки (breakpoints), на которых наша структура уже не будет удобной при простом масштабировании или «растягивании». Здесь мы перестраиваем макет по принципам адаптивного дизайна — меняем сетку, убираем или добавляем элементы, перерабатываем расположение. В этот момент идет полноценная смена композиции.

Как это работает на практике

1. Stretch (отзывчивость): элементы плавно подстраиваются под ширину экрана — «сжимаясь» или «растягиваясь».

2. Scale (масштаб): при существенном изменении разрешения мы пропорционально «увеличиваем» или «уменьшаем» наш макет. Таким образом, даже при разрешениях 1920×1080 и выше, все остается гармоничным.

3. Switch (адаптивность): при переходе к новым диапазонам разрешений (например, с десктопа на планшет или c планшета на смартфон) мы переходим на другую сетку, тип и расположения основных блоков. В этот момент могут появиться совершенно новые виды визуализации контента или измениться тип навигации (например, скрытое «бургер»-меню вместо полноценного хедера). 

4. После этого мы возвращаемся к шагам Stretch и Scale и продолжаем адаптацию интерфейсов по тому же принципу, пока следующий «скачок» в разрешении не потребует новой перестройки. 

Таким образом мы получаем, например, 3 разных адаптивных версии сайта (Десктоп, планшет и мобильное устройство), которые внутри каждой из них делятся на диапазоны разрешений. Внутри каждого диапазона применяется  правила Responsive design, а при переходе между ними происходит общее масштабирование.

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

Подведем итог

Подход SSS (Stretch, Scale, Switch) позволяет решать главную задачу — создавать удобный и пропорциональный веб-интерфейс, приятный для восприятия пользователя и не требующий чрезмерных усилий при проектировании и разработке. Он отлично сочетается с адаптивностью и отзывчивостью, дополняя их масштабированием. А главное — вы всегда можете четко определить, когда вам стоит просто «подвинуть» элементы, а когда — перестроить их полностью.

Как думаете, сможет ли описанный подход помочь вам в работе над сложными проектами? Если у вас уже есть опыт применения похожего решения или свои наработки, поделитесь ими в комментариях!