Адаптивный дизайн (англ. Adaptive Web Design) – вариант верстки сайта, при котором страницы отображаются одинаково корректно на десктопах, планшетах, смартфонах. При адаптивной верстке (ее также называют резиновой) нет необходимости создавать дополнительные версии – с сайтом удобно работать с любых устройств.

Резиновая верстка подразумевает «эластичный» макет сайта – тексты, видео, изображения. В зависимости от размера экрана и браузера пользователя страница сайта меняет свой вид: исчезают горизонтальная полоса прокрутки, скрываются отдельные элементы.

В основе технологии лежат подходы Аарона Густавсона (который ввел в обиход понятие «адаптивный дизайн») и Итана Маркота (автора определения responsive web design – «отзывчивый веб-дизайн»).

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

Необходимость адаптивного дизайна связана с ростом мобильного трафика и факторами ранжирования Яндекс и Google. Сайты, адаптированные для мобильных устройств, снабжаются в выдаче пометкой «моб.» (в Google) или «для мобильных» (в Яндексе).

Проверить, оптимизирован ли сайт для мобильных устройств, можно с помощью Google Search Console.

Пример отображения сайта с десктопа: меню и функционал
Пример отображения страницы сайта с десктопа

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

Пример адаптивной верстки: оптимизированный функционал для работы с мобильных устройств
Нижняя часть страницы сайта при адаптивной верстке. Функциональный футер: страницы оплаты, доставки, самовывоза + социальные кнопки и поиск.