Что такое адаптивный дизайн
Адаптивный или responsive дизайн означает сайт, который автоматически подстраивается под размер экрана: на телефоне один вид, на планшете другой, на компьютере третий.
Это не отдельный мобильный сайт, а один сайт, который перестраивается. Текст, картинки и меню подстраиваются под экран.
Сегодня адаптивный дизайн это стандарт. Любой нормальный сайт должен хорошо работать и на телефоне, и на компьютере.
Почему адаптивный дизайн важен
Большинство посетителей открывают сайты с телефона. Если сайт не подстраивается, вы теряете большую часть аудитории. К тому же Google оценивает в первую очередь мобильную версию сайта.
Как работает адаптивная вёрстка
Адаптивная страница не привязана к фиксированной ширине. Колонки заданы в долях от ширины экрана, изображения сжимаются вместе с блоком, а медиазапросы CSS меняют раскладку в заданных точках перелома. Например, три карточки услуг в ряд на узком экране становятся списком друг под другом.
Обычно сначала проектируют мобильный вид, а затем более широкие. Так на маленький экран попадает самое важное, а версия для компьютера получает дополнительное пространство, а не наоборот.
Пример: меню ресторана на телефоне
На сайте ресторана меню свёрстано широкой таблицей: блюдо, описание, аллергены, цена. На компьютере выглядит аккуратно. На телефоне таблица не помещается, колонка с ценой уезжает за край, и гостю приходится прокручивать страницу вбок.
В адаптивном варианте каждая строка на телефоне превращается в карточку: название и цена сверху, описание ниже. Кнопка бронирования закреплена внизу экрана, а по нажатию на номер начинается звонок.
Частые ошибки мобильной версии
Сайт может формально быть адаптивным и при этом оставаться неудобным на телефоне.
- Кнопки и ссылки такие мелкие или стоят так близко, что палец попадает не туда.
- Часть содержимого на мобильном скрыта. Google индексирует мобильную версию, поэтому отсутствующий там текст может не учитываться в поиске.
- Всплывающее окно закрывает весь экран, а крестик не виден.
- Сайт проверяют только на компьютере, сужая окно браузера, а не на настоящем телефоне.
Как проверить свой сайт
Откройте сайт на своём телефоне и пройдите весь путь клиента: найдите услугу, посмотрите цену, заполните форму. Проверьте и на Android, и на iPhone, браузеры ведут себя по-разному.
На компьютере в инструментах разработчика Chrome можно включить режим устройства и посмотреть страницу на разной ширине экрана. Мобильный отчёт PageSpeed Insights дополнительно покажет, достаточно ли быстро сайт грузится на телефоне.
Частые вопросы
Чем адаптивный дизайн отличается от мобильной версии сайта?
Отдельная мобильная версия это второй сайт на своём адресе, который нужно вести отдельно. Адаптивный дизайн это один сайт и один контент, который перестраивается под экран. Новые сайты сегодня делают адаптивными.
Можно ли сделать старый сайт адаптивным?
Иногда удаётся доработать шаблон, но для совсем старого сайта чаще разумнее редизайн: обновления требуют сразу и код, и скорость, и структура контента.
Влияет ли адаптивность на SEO?
Да. Google индексирует и оценивает страницы по мобильной версии. Если на телефоне сайтом трудно пользоваться или части текста там нет, это отражается на позициях и в поиске с компьютера.