Адаптивная вёрстка: что это и зачем

Коротко

Адаптивная вёрстка — это когда один сайт по-разному раскладывается на экранах разного размера: на мониторе три колонки, на телефоне одна. Не отдельный сайт для мобильных, а один сайт, который умеет перестраиваться.

Чем отличается от отдельной мобильной версии

Раньше делали второй сайт для телефонов на отдельном адресе. Сейчас так почти не делают: два сайта — двойная поддержка, риск расхождений в содержании и путаница для поиска.

Адаптивный подход означает один адрес, одно содержимое, одна кодовая база — и разное отображение.

Что должно меняться на маленьком экране

• Колонки складываются в одну.
• Меню превращается в компактное.
• Шрифт остаётся читаемым без увеличения.
• Кнопки становятся достаточно крупными для пальца.
• Таблицы прокручиваются внутри своего блока, а не растягивают страницу.
• Тяжёлые изображения заменяются на облегчённые версии.

Частые проблемы

Горизонтальная прокрутка. Верный признак, что какой-то элемент шире экрана. Обычно виновата таблица, широкое изображение или элемент с фиксированной шириной.

Мелкий текст. Читать можно, но приходится увеличивать — половина уйдёт.

Кнопки рядом. Два элемента вплотную — попадают не туда, куда хотели.

Всплывающие окна на весь экран. С крестиком, в который сложно попасть.

Почему это не «дополнительная опция»

Больше половины трафика для большинства сайтов приходит с телефонов, и поисковые системы оценивают сайт по мобильной версии. Адаптив — не улучшение, а базовое требование: сайт без него теряет и посетителей, и позиции.