Макет для компьютера и телефона

Адаптация — это изменение композиции

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

Подготовьте мобильную версию

1. Создайте отдельный фрейм, например шириной 390 пикселей.
2. Перенесите содержание первого экрана, сохраняя смысл и главное действие.
3. Перестройте карточки в одну колонку. Проверьте ширину изображений и внутренние отступы.
4. Используйте правила Auto Layout и ограничения размеров, затем попробуйте ширину 360 и 430 пикселей.
5. Проверьте длинные названия, контакты и кнопки. Они не должны выпадать из контейнера или накладываться друг на друга.

Макет в Figma описывает задумку. Будущий сайт всё равно нужно адаптировать и проверить в браузере после реализации. Отдельно объясняйте разработчику, что должно растягиваться, переноситься и скрываться.

Практическое задание

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

Проверьте себя

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