Разработка
Адаптивная вёрстка
Также говорят: адаптив
Адаптивная вёрстка — способ сделать сайт так, чтобы одна и та же страница подстраивалась под экран: на компьютере — в несколько колонок, на телефоне — в одну, с крупными кнопками и читаемым текстом. Сегодня большинство людей заходят на сайты с телефонов, поэтому адаптивность обязательна.
Адаптивная вёрстка и мобильная версия
| Адаптивная вёрстка | Отдельная мобильная версия | |
|---|---|---|
| Адреса страниц | Одинаковые для всех устройств | Отдельный поддомен или адреса |
| Содержимое | Одно, меняется только расположение | Может отличаться |
| Поддержка | Одна версия сайта | Две версии, которые нужно синхронизировать |
| Для поиска | Проще: нет дублей и путаницы | Нужно правильно связать версии |
Для большинства сайтов адаптивная вёрстка — более простой и надёжный вариант.
Почему это важно
- Поисковые системы в первую очередь оценивают мобильную версию страницы.
- Неудобный на телефоне сайт теряет заявки: люди не могут нажать кнопку, прочитать текст или заполнить форму.
- Реклама показывается на мобильных, и за клики с телефонов вы платите так же.
Что проверить на телефоне
- Текст читается без увеличения.
- Кнопки и ссылки достаточно крупные и не стоят вплотную.
- Нет горизонтальной прокрутки.
- Таблицы и широкие блоки не вылезают за экран.
- Формы удобно заполнять: правильная клавиатура для телефона и почты, мало полей.
- Меню открывается и закрывается без проблем.
- Всплывающие окна не закрывают весь экран без возможности их закрыть.
Как проверить
- Откройте сайт на нескольких реальных телефонах с разными размерами экрана.
- Используйте режим эмуляции устройств в браузере.
- Посмотрите отчёты о мобильном удобстве в панели для вебмастеров.
- Сравните конверсию на мобильных и компьютерах в системе аналитики: большой разрыв — сигнал проблем.
Частые ошибки
- На телефоне скрыта часть содержимого, которая есть на компьютере.
- Номер телефона не кликабельный.
- Тяжёлые картинки для больших экранов загружаются и на телефоне.
- Всплывающие окна мешают читать.
Мобильная конверсия
Если на компьютерах конверсия заметно выше, чем на телефонах, при сопоставимом трафике — это почти всегда сигнал проблем с мобильной версией: неудобная форма, мелкие кнопки, медленная загрузка. Посмотрите путь покупателя на телефоне шаг за шагом, от входа до отправки заявки, и отметьте каждое место, где пришлось увеличивать, прокручивать вбок или ждать.
Проверяйте сайт не только на новых смартфонах, но и на недорогих моделях с небольшим экраном и слабым процессором: именно на них проблемы с вёрсткой и скоростью заметнее всего, а таких устройств у покупателей много.
Где термин используется на практике
Ниже — материалы, где понятие участвует в расчёте, настройке или принятии решения, а не просто упоминается.
