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

Название закрепилось после книги Аарона Густафсона «Adaptive Web Design» (2011), но в русскоязычной практике у слова два значения. В узком смысле это раскладки с фиксированной шириной: например, 320, 720 и 1140 пикселей, между которыми макет «перещёлкивается». В широком смысле «адаптивной вёрсткой» называют любую вёрстку, которая подстраивается под экран, включая плавную резиновую. Заказчики обычно имеют в виду второе, поэтому в техническом задании лучше уточнить, что именно ожидается.

Этот термин описывает узкое значение. Плавные макеты, которые тянутся вместе с окном, разобраны в статье про отзывчивый дизайн.

Пример на CSS

.container { width: 300px; margin: 0 auto; }

@media (min-width: 768px) {
  .container { width: 720px; }
}
@media (min-width: 1200px) {
  .container { width: 1140px; }
}

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

Плюсы и минусы фиксированных раскладок

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

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

Отдельная мобильная версия

Крайний вариант адаптивного подхода — отдельный сайт на поддомене вроде m.example.ru, который сервер отдаёт телефонам. Его сложнее поддерживать: две версии контента, правила для поисковиков и риск дублей. Для новых проектов чаще выбирают одну страницу с CSS-адаптацией. Если нужно перевести готовый макет в такую вёрстку, этим занимается вёрстка сайта по макету.