Адаптивный дизайн

Что это значит

Адаптивный дизайн - это способ создания сайта, при котором одна и та же страница подстраивается под ширину экрана: на телефоне колонки складываются друг под друга, меню сворачивается, а шрифт остаётся читаемым без увеличения.

Речь не об отдельной мобильной версии по другому адресу. Одна страница, один адрес, одно содержимое - это же и причина, почему адаптивное решение лучше для SEO, чем два отдельных сайта.

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

Как это работает на практике

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

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

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

На что обратить внимание

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

Проверки в уменьшенном окне браузера мало. Настоящий телефон на медленном соединении покажет тяжёлые картинки, содержимое, которое прыгает при загрузке, и кнопки, перекрытые плашкой cookie; именно это измеряют Core Web Vitals, которые входят в оценку страницы поиском.