Два лейаута лучше одного адаптивного
Дефолтный способ строить под два размера экрана - нарисовать большой, а потом добавлять медиазапросы, пока маленький не перестанет переполняться. Это дешевле, к этому подталкивает каждый фреймворк, и это даёт интерфейсы, терпимые на телефоне и никогда не хорошие.
Причина в том, что разница не в ширине. Разница в позе.
Что меняется на самом деле
На десктопе указатель точный, рука на клавиатуре, экран показывает несколько вещей сразу. Навигация может жить в панели сбоку, потому что место есть, а довести туда курсор не стоит ничего.
На телефоне всё делает один большой палец, и досягаемая зона - нижняя половина экрана. Панель слева - это растяжка через всё устройство. Ховера не существует. Плотный список, который прекрасно сканируется с расстояния вытянутой руки, - стена текста на расстоянии согнутой.
Это не один дизайн на двух ширинах. Это два дизайна.
Что я построил вместо этого
На продукте с доской я пришёл к двум деревьям компонентов и двум моделям навигации, выбранным на брейкпоинте, а не смешанным через него.
Телефон получает нижний таб-бар, колонки-таблетки, между которыми можно свайпать, и плавающую кнопку действия. Всё, что трогают часто, сидит там, где большой палец уже есть.
Десктоп получает постоянную боковую панель и карточку, открывающуюся рядом с доской, а не поверх неё, потому что на этом экране есть место показать карточку и её контекст одновременно.
Ни один не является адаптацией другого. Они делят данные, токены и поведение. Они не делят лейаут.
Возражение
Два дерева - больше кода, а больше кода - больше поддержки. Это правда, и взвешивать нужно именно это.
Что это покупает: ни одна версия не несёт компромиссов, сделанных ради другой. Ни паддинга, который существует, потому что был нужен десктопу. Ни паттерна навигации, до которого почти можно дотянуться. Каждое решение в каждом дереве принято для устройства, на котором оно работает.
Цена платится один раз, при сборке. Компромисс платится каждый день, каждым пользователем, всегда. Для продукта, который открывают ежедневно, этот размен даже не близкий.
Для маркетинговой страницы - абсолютно близкий, и один адаптивный лейаут там правильный ответ. Вопрос не в том, какой подход лучше. А в том, как часто вещью пользуются.