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