Один веб-сайт, множество экранов. Адаптивный дизайн позволяет единому макету подстраиваться под разные размеры и ориентацию устройств. Этот термин был введен Итаном Маркоттом в 2010 году, основываясь на более ранних идеях о гибких сетках и адаптивных изображениях. Вместо создания отдельных сайтов для настольных компьютеров и мобильных устройств, дизайнеры создают единую кодовую базу, которая перестраивается в зависимости от ширины области просмотра.

Три технических компонента обеспечивают работоспособность. Гибкие сетки используют проценты вместо фиксированных пикселей, поэтому столбцы растягиваются и сжимаются. Гибкие изображения масштабируются внутри своих контейнеров. Медиа-запросы определяют размер экрана и применяют различные правила CSS на заданных контрольных точках. Трехколоночная компоновка для настольных компьютеров может свернуться в одну колонку на телефоне, а навигация переместится в меню-гамбургер. Цель состоит не в идеальном пиксельном контроле, а в плавной адаптации.

Основные техники

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

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