Как отрисовать дизайн мобильной версии сайта?

Уже давно предпочтение отдается адаптивной верстке вместо создания мобильной версии сайта на отдельном домене. Это решение имеет множество преимуществ, но и требует понимания ряда нюансов. Для создания дизайна мобильной версии сайта можно использовать такие программы, как Figma, Sketch и другие.

В первую очередь, нужно понимать, что потребуется создать еще 2 макета, помимо десктопной версии, так как нужно уместить весь сайт в ограниченную ширину экранов мобильных устройств разных типов. Поэтому в выбранной программе первоначально создают артборд/фрейм, который будет соответствовать размерам экрана. Кстати, в Figma можно выбрать уже готовые шаблоны, которые созданы по размерам устройств iPhone и Android.

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

Поскольку ширина мобильной версии меньше десктопной, все крупные блоки располагают друг под другом, перетягивая их с созданного макета веб-сайта и редактируя размер. Но при этом важно обеспечить сохранение в мобильной версии всего функционала сайта и важной информации. Поэтому некоторые блоки со списками, например, меню, прячут под кнопками, нажатие на которые приводит к раскрытию списка. Такие кнопки называют меню-бургер ("выкидушки"). Частенько их делают в виде вписанных в прямоугольник 3-х линий, но можно нарисовать любую по собственному усмотрению.

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

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

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

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