Перейти к основному содержимому

Вёрстка контента для mobile и desktop

Как сохранить иерархию, длину строки и ритм, когда одна страница переходит с телефона на широкий экран.

Обсудить проект
1 мин чтенияЕва Кауфман · Креативный директор

Макет, который собран на десктопе, на телефоне часто разваливается: заголовки переносятся неудачно, карточки встают без ритма, читатель теряет мысль. Сначала зафиксируйте модель контента, потом решите, что может менять каждый viewport.

Одна иерархия, два экрана

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

Длина строки и ритм

Основной текст держите в удобной мере: короткие строки на desktop, полная ширина с спокойным padding на mobile. Один вертикальный ритм, чтобы секции не выглядели новым шаблоном на каждом скролле.

Паттерны, которые не схлопываются

Небольшой набор: hero, доказательство, шаги и завершающее действие. Если паттерну нужно отдельное исключение на мобильном, это ещё не паттерн.

Ключевые выводы

  • Первый мобильный экран всё ещё говорит тему и действие.
  • Держите читаемую длину строки и один вертикальный ритм.
  • Паттерн с отдельным мобильным исключением ещё не готов.

Связанное