Откройте веб-сайт на телефоне, затем на ноутбуке, а затем на телевизоре. Если он отображается корректно на всех трех экранах без необходимости масштабирования или прищуривания, значит, он создан с использованием адаптивного дизайна. Такой подход позволяет единому коду адаптировать свою структуру, изображения и типографику к любому экрану, на котором он отображается.

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

Что делает дизайн адаптивным?

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

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