Адаптивный дизайн
Краткое определение
Адаптивный дизайн означает, что сайт автоматически подстраивает макет, размер текста и навигацию под телефон, планшет и компьютер.
Один и тот же код страницы показывает на телефоне один столбец, на планшете два столбца, а на компьютере широкую сетку. Это обеспечивают гибкие CSS-сетки и медиазапросы, реагирующие на ширину экрана. Изображения, кнопки и текст масштабируются вместе с экраном, поэтому посетителю никогда не приходится прокручивать страницу вбок.
Адаптивный дизайн стал стандартом, потому что большинство посетителей заходят с телефона, а Google оценивает сайты прежде всего по тому, как они выглядят на мобильном устройстве.
Его часто путают с версткой на основе фиксированных макетов под конкретные устройства. В этом случае для каждого устройства готовят отдельный жесткий макет, тогда как адаптивный дизайн использует один гибкий макет, который сам перестраивается, и его проще поддерживать.
Самая частая ошибка: сначала проектировать макет для компьютера, а затем сжимать его под мобильный экран, из-за чего области для касания становятся слишком маленькими, а меню оказываются неудобно вложены друг в друга. Правильный подход: mobile first, при котором Вы сначала проектируете под узкий экран, а затем добавляете столбцы по мере увеличения ширины, так что каждый элемент остаётся достаточно крупным и хорошо разнесённым.
Почему это важно
Посетитель, который открывает ваш сайт с телефона и видит сломанный макет, уходит сразу. Адаптивный дизайн предотвращает эту потерю: один сайт работает на любом экране, и не нужно строить и поддерживать отдельную мобильную версию.
Условный пример
Каталог товаров производителя напольных покрытий показывает на компьютере широкую сетку, а на телефоне один столбец, та же страница, тот же контент, без отдельного макета для разработки и поддержки.
