Как создать адаптивный дизайн: советы для разработчиков

Принцип Mobile First

Современная разработка начинается с мобильной версии. Сначала создается layout для маленьких экранов, который затем усложняется для больших мониторов.

• Приоритет контента. На мобильном помещается только самое важное.
• Производительность. Мобильные пользователи часто имеют медленный интернет.
• Код. Базовые стили пишутся для мобильных, остальные добавляются через медиа-запросы.
• Индексация. Google использует мобильную версию для ранжирования.

Гибкие сетки и макеты

Использование фиксированных ширинок в пикселях уходит в прошлое. Макет должен быть резиновым.

• Проценты. Использование процентов вместо пикселей для ширины колонок.
• Flexbox. Современная модель для выравнивания элементов в ряду.
• CSS Grid. Двумерная сетка для сложной компоновки страниц.
• Контейнеры. Ограничение максимальной ширины контента для больших экранов.

Пример гибкой сетки на CSS

Код демонстрирует создание адаптивной колонки, которая меняет ширину в зависимости от экрана.

.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.column {
flex: 1 1 300px;
margin: 10px;
}

Медиа-запросы (Media Queries)

Это основной инструмент адаптивности, позволяющий применять стили только при определенных условиях.

• Breakpoints. Контрольные точки ширины экрана для смены layout.
• Устройства. Можно targeting по типу устройства, но лучше по ширине.
• Ориентация. Учет портретного и альбомного режима планшета.
• Плотность пикселей. Особенности для retina дисплеев.

Пример медиа-запроса

Изменение размера шрифта и расположения элементов на экранах шире 768 пикселей.

@media (min-width: 768px) {
body {
font-size: 18px;
}
.sidebar {
display: block;
width: 25%;
}
}

Адаптивные изображения

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

• Max-width. Свойство CSS для ограничения ширины картинки.
• Srcset. Атрибут HTML для загрузки разных размеров файла.
• Форматы. Использование WebP для уменьшения веса.
• Lazy Loading. Отложенная загрузка изображений ниже экрана.

Пример адаптивного изображения

Разметка позволяет браузеру выбрать оптимальный размер картинки для устройства.

img src="image-small.jpg" srcset="image-small.jpg 480w, image-large.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Описание"

Типографика и единицы измерения

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

• Относительные единицы. Использование rem и em вместо px для шрифтов.
• Vw и Vh. Привязка размера к ширине или высоте viewport.
• Межстрочный интервал. Увеличение line-height для мобильных.
• Длина строки. Оптимально 50-75 символов для комфортного чтения.

Навигация на мобильных

Меню сайта должно быть удобным для управления пальцем на сенсорном экране.

• Гамбургер-меню. Скрытие пунктов в иконку для экономии места.
• Размер кнопок. Минимум 44 пикселя для удобного нажатия.
• Отступы. Достаточное расстояние между кликабельными элементами.
• Липкое меню. Закрепление навигации при скролле.

Тестирование адаптивности

Перед запуском необходимо проверить отображение сайта на различных устройствах.

• Инструменты разработчика. Режим эмуляции в браузере.
• Реальные устройства. Проверка на физических смартфонах и планшетах.
• Онлайн сервисы. Платформы для скриншотов на разных разрешениях.
• Ориентация. Проверка поворота экрана.

Распространенные ошибки

Даже опытные разработчики иногда допускают промахи при создании адаптивного дизайна.

• Отсутствие viewport. Мета-тег, без которого мобильный браузер масштабирует сайт неправильно.
• Фиксированная ширина. Элементы с жесткой шириной ломают макет.
• Мелкий текст. Шрифт менее 14 пикселей трудно читать на телефоне.
• Всплывающие окна. Интерстициалы, перекрывающие контент на мобильном.