Адаптивный дизайн: сайт, удобный на телефоне

Больше половины посетителей приходят с телефона, а поисковики оценивают сайт по мобильной версии. Разбираем, как одна вёрстка подстраивается под любой экран.

Адаптивный, а не отдельная мобильная версия

Раньше для телефонов делали отдельный сайт на поддомене вроде m.example.ru. Сейчас так почти не делают: адаптивная вёрстка обслуживает все экраны с одного адреса, её проще поддерживать, а поисковикам не нужно склеивать две версии страницы.

Шаг 1. Строка viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Без неё телефон рисует страницу шириной около 980 пикселей и уменьшает её: текст становится мелким, приходится растягивать пальцами. Не запрещайте масштабирование через user-scalable=no: людям со слабым зрением оно нужно.

Шаг 2. Сначала телефон

Удобнее всего верстать от узкого экрана к широкому: на телефоне всё идёт в одну колонку, а на широком экране вы добавляете колонки. Сетка, которая сама решает, сколько колонок поместится:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  padding: 0 16px;
}
@media (min-width: 600px)  { .cards { gap: 24px; padding: 0 32px; } }
@media (min-width: 1000px) { .cards { padding: 0 48px; } }

Точки перелома ставьте там, где ломается ваш макет, а не под модели телефонов: моделей сотни. Про поля и отступы подробнее в статье о сетке.

Шаг 3. Текст

• Основной текст не меньше 16 пикселей. Поля ввода тоже 16 пикселей: при меньшем шрифте iPhone увеличивает страницу при нажатии на поле.
• Заголовки на телефоне уменьшайте плавно: font-size: clamp(28px, 6vw, 48px).
• Ограничьте ширину текста на компьютере: max-width: 68ch. Строка в 100 и больше знаков утомляет, глаз теряет начало следующей строки.

Подробнее о размерах и межстрочном интервале в статье «Типографика для сайта».

Шаг 4. Картинки и таблицы

img { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

Первая строка не даёт картинкам вылезать за край экрана. Широкую таблицу оберните в блок с прокруткой, иначе вся страница начнёт двигаться вбок. Чтобы телефон не скачивал картинку для большого монитора, отдавайте несколько размеров через srcset: как это сделать, рассказано в статье о картинках.

Шаг 5. Палец, а не курсор

• Кнопки и ссылки в меню высотой 44–48 пикселей, между ними хотя бы 8 пикселей (статья о кнопках).
• На телефоне нет наведения: всё, что открывается по :hover, должно открываться и нажатием.
• Телефон и адрес делайте ссылками: tel: и mailto:.
• Главную кнопку держите на первом экране, а не под тремя фотографиями.

Шаг 6. Проверка

В Chrome нажмите F12, затем значок телефона (Ctrl+Shift+M) и пройдите по ширинам 360, 768 и 1280 пикселей. Ищите горизонтальную прокрутку, слипшиеся кнопки и текст, который не помещается. Затем обязательно откройте сайт на настоящем телефоне: эмулятор не покажет, удобно ли попадать пальцем.

Если нет времени верстать самому, возьмите готовый шаблон: все шаблоны сайтов на Okis уже адаптивные.

Частые вопросы

Что такое адаптивный дизайн?

Это вёрстка, которая перестраивается под ширину экрана: на телефоне блоки идут в одну колонку, на компьютере в несколько. Сайт один, адрес один.

Какие точки перелома использовать?

Ставьте их там, где ломается ваш макет, а не под конкретные модели телефонов. Часто хватает двух: около 600 и около 1000 пикселей.

Какой размер шрифта нужен на телефоне?

Не меньше 16 пикселей для основного текста. При меньшем размере читать трудно, а iPhone увеличивает страницу при нажатии на поле ввода.