close

Заказать адаптацию

+ подарок аудит Вашего сайта на адаптивность
совершенно бесплатно!

Блог команды Адаптист.ру

Разница между отзывчивым и адаптивным веб дизайном

Отзывчивый и адаптивный дизайн

Один из вопросов, горячо обсуждаемых в этом году в кругах веб-разработчиков, — доступность веб-сайтов на разных устройствах, которые не обладают стандартными настольными или портативными экранами. Эта тема не нова, но дискуссия по поводу использования новых возможностей протекает в новом русле.

Мобильные устройства, планшеты и другие гаджеты совершенствуются гораздо быстрее, чем все остальное. Это заставляет учредителей компаний решать такие вопросы, как взаимодействие с пользователем и доступ к сайту с миниатюрных гаджетов нового поколения. Не следует также забывать и о других устройствах, оснащенных экраном и Интернетом: холодильники, стиральные машины и другая бытовая техника.

Людей, посещающих ваши сайты через мобильные или другие устройства, не волнует, какой метод вы используете. И это продолжается до тех пор, пока они могут беспрепятственно перемещаться по сайту с любого устройства. Два метода, описанные в этой статье, были созданы для того, чтобы веб-разработчики могли решать поставленные задачи. Отзывчивый» (RWD) и адаптивный (AWD) дизайнерские методы созданы для того, чтобы веб-сайты могли эффективно работать на мобильных устройствах. Но все же тонкое различие между ними есть, и я попытаюсь его объяснить.

Отзывчивый веб-дизайн

Термин «Отзывчивый веб-дизайн» был придуман несколько лет назад Итаном Маркоттом. Он впервые появился в его статье «Отзывчивый веб-дизайн» (из А-списка), а позднее — в его одноименной книге. Ключевые аспекты такого дизайна от Маркотта перечислены ниже. Как начать работу с отзывчивым веб-дизайном? Первоочередная задача включает CSS3, медиа запросы, @media rule (медиа правила), жидкие сетки, которые используют проценты для создания гибкого основания. Эти ключевые моменты, а также использование гибких изображений и видео, позволяют «отзывчивому» сайту адаптировать свой макет под используемое устройство, пользовательский агент и окружающую среду.

Если коротко, то отзывчивый веб-дизайн – это способность плавно меняться и реагировать на экран или устройство любого размера.

Адаптивный веб-дизайн

Термин «адаптивный веб-дизайн» был придуман Аароном Густафсоном, который написал книгу с одноименным названием. В этом дизайне используются многие компоненты прогрессивного улучшения в качестве способа определения набора дизайнерских методов, сосредоточенных на пользователе, а не на браузере. Использование заранее заданного набора макетных размеров в зависимости от размера экрана вместе с CSS и JavaScript обеспечивает адаптацию под обнаруженное устройство. Ниже описание слоев, составляющих основу адаптивного подхода:

  • Контентный слой = богатая семантическая разметка HTML
  • Презентационный слой = CSS и стайлинг
  • Клиентский скриптовый слой = поведение JavaScript или jQuery

В недавнем интервью Аарон рассказал, как выбирали термин. Он не хотел, чтобы его книгу путали с книгой другой группы, которая называется «Проектирование с прогрессивным улучшением». Во время прямой трансляции Аарон сказал следующее:

«Мы пытались задуматься над тем, что же на самом деле все это означает. Речь идет о создании богатого и адаптируемого интерфейса, который подстраивается под конкретное устройство. Кстати, то, что я понимаю под прогрессивным улучшением, очень похоже на адаптивный веб-дизайн. Это практически одна и та же концепция».

Если коротко, то адаптивный дизайн – это изменение в соответствии с заданным набором размеров экранов и устройств.

Сходства и различия

Самое большое сходство между этими двумя методами заключается в том, что они оба позволяют смотреть сайты на мобильных телефонах и экранах разных размеров. В конечном счете, пользователи получают улучшенный мобильный интерфейс. Эти методы отличаются друг от друга структурой. Отзывчивый веб-дизайн  основывается на гибких и гибких решетках, а адаптивный  — на заранее заданных размерах экрана. Отзывчивый веб-дизайн применяет кодовые и реанимационные стратегии в отношении гибких сеток, CSS и гибких оснований. Адаптивный веб-дизайн применяет обтекаемый, многоуровневый подход, использует скрипты для оказания помощи в адаптации к устройствам и экранам разных размеров.

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

Если вам интересно посмотреть реальные примеры известных веб-сайтов, в которых используются вышеописанные методы, посмотрите список 70 примеров современных отзывчивых веб-дизайнов от Splashnology (представлены оба метода).

В этом списке сайтов можно найти Abberdein, который использует отзывчивый веб-дизайн в своей платформе WordPress Whiteboard. В его коде содержится несколько функций, среди них такие, как набор широт разделительных столбцов в процентном выражении. На сайте используется сеточная система Less Framework CSS, которая насчитывает четыре макета и три набора типографическихзаготовок, все они базируются на одной сетке.

Примером сайта, где используется адаптивный веб-дизайн, является агентство поискового маркетинга Screaming Frog. В его CSS используется @media query (медиа запрос) и @media screen properties (медиасвойства экрана) для установки точек прерывания в заданных пиксельных ширинах в зависимости от того, какое устройство было распознано в окне браузера.

[jetpack_subscription_form]

3 Ответа на “Разница между отзывчивым и адаптивным веб дизайном”

  1. Михаил:

    Media queries модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих харатеристик. Отзывчивый дизайн создается с использованием адаптивной разметки (не путать с адаптивным дизайном).

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

    1. Это одно и тоже. Кто как называет.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *