Responsive adaptive различия: Адаптивный сайт и отзывчивый сайт — в чем разница — Сибирикс – Какое главное отличие адаптивного макета сайта от отзывчивого? — Хабр Q&A

Адаптивный и отзывчивый веб-дизайн, адаптивная верстка

Такие термины, как отзывчивый (responsive) и адаптивный (adaptive) дизайн, употребляются в последнее время достаточно часто. Как оказалось, для некоторых людей эти два понятия чуть ли не идентичны. В данной статье мы поговорим о том, что такое отзывчивый и адаптивный дизайн, и в чем состоит разница между ними.

---

Начиная с того момента, как планшетные компьютеры и смартфоны стали доступны широкой публике, все чаще сайты просматриваются при помощи устройств с тач-управлением, небольшими экранами. Многие интернет-ресурсы оказались резко непригодными к использованию владельцами таких девайсов.
Появились два принципиально разных подхода к созданию сайтов для мобильных устройств: Adaptive web design и Responsive web design. Давайте же рассмотрим каждый из них по отдельности, а после сравним их применение и особенности.

Что такое отзывчивый дизайн

Отзывчивый дизайн (Responsive web design или RWD) — подход к созданию дизайна, при котором сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств. Отзывчивый дизайн обладает следующими особенностями:

• При верстке отзывчивого дизайна используются исключитьельно HTML и CSS — без подключения JavaScript для определения «отзвычивости» элементов дизайна.
• Отзывчивая верстка определяет, как будут выглядеть элементы сайта на разных устройствах; однако эти элементы не скрываются/не заменяются другими, а их поведение, равно как и выполняемые ими функции, не меняется.
• Три основных принципа отзывчивого дизайна:
  1. расположение всех элементов в рамках модульной сетки;
  2. все элементы верстки и медиа-файлы (в т.ч. изображения) являются «резиновыми» (flexible) — их размеры зависят от размера экрана;
  3. работа с Media queries — модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих харатеристик.
• Отзывчивый дизайн создается с использованием адаптивной разметки (не путать с адаптивным дизайном). Адаптивная разметка (adaptive layout) заключается в том, что на сайте создается несколько стилей, вариантов расположения элементов на модульной сетке и несколько вариантов стилей элементов дизайна. Эти варианты сменяют друг друга при изменении размеров экрана, при этом образуются некие точки перехода между разными видами разметки/стилей сайта.
• Отзывчивый дизайн не подразумевает работы с объектной моделью элементов на странице, не подразумевает смену иерархии/вложенности блоков и объектов при изменении вида разметки.

 

Что такое адаптивный дизайн

Адаптивный дизайн (Adaptive web design или AWD) — это дизайн, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее устройствах и разрешениях экрана.

• В случае адаптивного дизайна элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта.
• В адаптивном дизайне повсеместно используется JavaScript для управления поведением и функциями объектов на сайте.
• Адаптивный дизайн требует работы с объектной моделью элементов на странице, подразумевает смену их иерархии/вложенности на разных устройствах.
• Не является обязательным обеспечение одинакового вида сайта и его функционала в разных браузерах. Возможно использование новых технологий, не поддерживаемых старыми версиями программ — потому что дизайн, как было сказано выше, адаптируется под определенные типы устройств.

 

Путаница в определениях

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

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

 

Особенности подходов

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

SEO-аспект. По слухам, Google намного более лояльно относится к отзывчивым сайтам, нежели к адаптивным.

На практике

На практике Responsive, отзывчивый дизайн, встречается достаточно часто, в отличие от адаптивного. Что и очевидно: ведь первый легче в реализации и освоении.Большинство шаблонов, которые продаются на маркетплейсах, являются отзывчивыми, а не адаптивными.
Адаптивный же дизайн чаще используется в серьезных и многофункциональных продуктах. Самые очевидные примеры: в мобильная версия сети Вконтакте, почты от Google.

 

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

в чем разница и какой выбрать?

Главная / Блог / Респонсивный Vs адаптивный дизайн: в чем разница и какой выбрать?

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

Источник изображения: Statista

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

Но не расстраивайтесь. Мы здесь, чтобы помочь вам. В этой статье, вы узнаете:

• Что такое респонсивный дизайн
• Что такое адаптивный дизайн
• Примеры респонсивного и адаптивного дизайна
• Как выбрать между адаптивным и респонсивным дизайном для вашего сайта​

Благодаря этой статье, вы узнаете, как сделать ваш сайт еще более удобным для пользователей.

Давайте начнем.

 

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

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Что такое респонсивный дизайн

 

Респонсивный дизайн адаптирует размер сайта под любой экран устройства. Сайты с подобным дизайном подстраиваются как под экраны шириной 300 пикселей, так и 3000 пикселей. Это происходит благодаря гибкой разметке сайта, использованию CSS media и гибкой сетке сайта. Такой дизайн позволяет изменять размер страницы сайта, чтобы она соответствовала размеру любого экрана.  

 

Специалисты из нашего отдела дизайна считают, что создание респонсивного дизайна намного проще, чем адаптивного. Кроме того, это занимает меньше времени и меньше контроля со стороны дизайнеров. В таком дизайне используются основанные на процентах CSS-правила для изменения стиля в зависимости от размера экрана. Большинство шаблонов для CMS, таких как WordPress, Joomla или Shopify имеют встроенный респонсивный дизайн.

 

Команда дизайнеров создает единый вид сайта, который в дальнейшем будет использоваться для всех экранов. Первое, что они создают – это дизайн, подходящий под средний по размерам экран. Затем, они задают параметры нижнего и верхнего предела шкалы разрешения. Следуя этим простым шагам, мы делаем наших клиентов и посетителей их сайтов счастливыми, поскольку такой дизайн хорошо смотрится на экране любого устройства. Благодаря такому дизайну, пользовательский опыт становится еще более удобным.

 

Что такое адаптивный дизайн

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

 

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

Респонсивный дизайн меняет размер сайта в зависимости от размеров экрана, в то время как адаптивный дизайн остается неизменным для каждого отдельного устройства.

 

Для нас, как для команды по e-commerce разработке, важно показать пользователям, что мы понимаем их нужды. Более того, мы вкладываем усилия, чтобы создать максимально удобный макет для экрана любого. Мы создаем несколько отдельных дизайнов для вашего будущего сайта, обращая внимание на то, чтобы каждый элемент был на своем месте.

 

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

 

Сегодняшний стандарт – это шесть вариантов адаптивного дизайна под разную ширину экрана: 320px, 480px, 760px, 960px, 1200px, and 1600px. В зависимости от данных о посетителях сайта, вам может потребоваться разработка меньшего количества дизайнов.

Респонсивный дизайн больше подходит простым сайтам. А для онлайн магазинов и сайтов с множеством элементов мы настоятельно рекомендуем разработку адаптивного дизайна. Адаптивный дизайн сайта загружается в 2-3 раза быстрее, по сравнению с респонсивным дизайном, что также важно для увеличения конверсии.

 

Примеры респонсивного и адаптивного дизайна

 

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

Примеры респонсивного дизайна

 

 

Источник изображения:Dropbox

1.    Dropbox
Dropbox обладает респонсивным дизайном. Кроме гибкой визуальной составляющей, сайт меняет цвет в зависимости от фона и расположения изображения. Пользователи могут войти на сайт используя форму регистрации, скрытую за кнопкой с призывом к действию. Благодаря этому, сайтом Dropbox удобно пользоваться вне зависимости от устройства.

 

Источник изображения:Dribble

2.    Dribbble
Респонсивный дизайн стал отличительной чертой компании Dribbble. Кроме гибкой разметки дизайна, респонсивный дизайн этого сайта меняет компоненты меню с пяти колонок обычной версии сайта на две колоноки для мобильной версии сайта. Чтобы сделать респонсивный дизайн еще более удобным, компания убрала строку поиска и скрыла меню за иконкой-бургером.

 

Источник изображения:GitHub

3.    GitHub
GitHub – это еще одна компания, которая использует респонсивный дизайн для мобильной версии сайта. Они поменяли область на главной странице с двух колонок на одну. В мобильной версии сайта GitHub нет строки поиска, а меню скрыто за иконкой-бургером.

Примеры адаптивного дизайна
 

Источник изображения:Maplin

1. Maplin
Первый пример – это британская компания Maplin. Их адаптивная версия сайта находится на отдельном URL для мобильных устройств. Сайт определяет тип устройства посетителя и перенаправляет его на подходящую версию сайта. Как вы могли заметить, благодаря такому дизайну, покупатели без проблем могут просматривать каталог товаров и комфортно совершать покупки с мобильных устройств.

Источник изображения: Home Depot

2. Home Depot
Home Depot, компания, специализирующаяся на товарах для дома, предоставляет посетителям удобный пользовательский опыт благодаря адаптивной версии сайта. Благодаря таким функциям, как обмен геопозицией, покупатели видят расположения ближайшего магазина компании. Адаптивный дизайн дает возможность покупателям читать информацию о товарах и просматривать наличие товаров в режиме реального времени.

 

Источник изображения:Corcoran

3. Corcoran
Компания Corcoran также выбрала адаптивный дизайн. Сайт этой компании, специализирующейся на аренде и продаже недвижимости, показывает посетителям список ближайших объектов на продажу.

 

 

Как выбрать между адаптивным и респонсивным дизайном для вашего сайта

 

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

Так как же выбрать между этими двумя типами дизайна? В этом вам помогут следующие факторы:

• Если ваш сайт создан при помощи современной платформы или CMS такой, как WordPress, Joomla или Shopify, то вы можете купить тему с респонсивным дизайном.
• Если ваш сайт – это самописное решение с множеством функций, то вам потребуется помощь e-commerce разработчиков для создания адаптивного дизайна для экранов разного размера.
• Если вы хотите улучшить позиции своего сайта в поисковых системах, то вы можете сделать это при помощи респонсивного дизайна. Таким образом, контент вашего сайта будет корректно отображаться на мобильных устройствах и планшетах, благодаря чему у вас будет больше посетителей.
• Если на вашем сайте размещено большое количество контента и различных элементов дизайна, то вам лучше выбрать адаптивный дизайн. Для его создания, наймите команду e-commerce разработчиков, которые разработают правильную разметку сайта, подходящую под различные устройства.

 

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

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

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

Выводы

Владельцы мобильных устройств часто использую их для посещения сайтов и совершения онлайн покупок. Чтобы их путь был коротким и удобным, вашему сайту необходима адаптивная или респонсивная версия дизайна.

Как адаптивный, так и респонсивный дизайн помогает клиентам и посетителям с лёгкостью ориентироваться на вашем сайте или в онлайн магазине.

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

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

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

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

Респонсивный или адаптивный: какой дизайн выбрать?

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

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

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

Главное различие респонсивного и адаптивного дизайна  заключается в следующем:

Респонсивный дизайн предусматривает создание приложений, которые способны “растягиваться” под любой размер экрана.

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

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

В зависимости от того, какое устройство использует пользователь, чтобы зайти на страницу, браузер начинает использовать именно тот набор стилей, который адаптирован под параметры такого устройства.

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

Давайте рассмотрим, какие именно преимущества и недостатки обеспечивают эти два подхода.

В конце статьи Umbrella предлагает таблицу, которая поможет визуально сравнить два типа и выбрать наиболее подходящий для вашего приложения.

А начнем, пожалуй, с более приятной стороны — с плюсов двух типов дизайнов.

 

ПЛЮСЫ
РЕСПОНСИВНОГО ДИЗАЙНА

Мы уже знаем, что респонсивный дизайн представляет собой “резиновый” способ отображения приложений на экранах различных форматов.

К преимуществам респонсивного дизайна отнесем следующие:

• Единый внешний вид

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

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

• Сокращение времени проектирования

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

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

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

Теперь посмотрим, какие преимущества обеспечит вашему приложению адаптивный дизайн.

 

ПЛЮСЫ
АДАПТИВНОГО ДИЗАЙНА

Мы уже выяснили, что адаптивное приложение предполагает наличие определенных наборов стилей, которые отвечают за отображение контента на различных устройствах в зависимости от их параметров.

Пример того, как выглядит The Guardian на разных устройствах.

Такая концепция обусловливает плюсы этого типа дизайна:

• Удобный сбалансированный интерфейс

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

Чтобы добиться этого, UX-эксперты (от англ. “user experience” — пользовательский опыт)  исследуют наиболее популярные используемые устройства, поведение пользователей, типичные операции. Дизайнеры учитывают эту информацию при работе над каждой отдельной версией адаптивного приложения.  Затем разработчики  выбирают оптимальный набор стилей под определенные диапазоны параметров устройств.

Результатом этой совместной работы становится сбалансированный интерфейс, точно подобранный функционал и ощущение комфорта у пользователя.

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

• Оптимизированное отображение контента на разных устройствах

Если вы выбираете адаптивное приложение, объем отображаемой информации будет разным для пользователей, заходящих в приложение с разных устройств.

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

• Высокий процент охвата различных устройств

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

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

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

Но, к сожалению, ни один из описанных нами подходов не идеален. Как респонсивный, так и адаптивный дизайн имеют свои недостатки, с которыми придется столкнуться при создании обоих типов приложений.

 

МИНУСЫ
РЕСПОНСИВНОГО ДИЗАЙНА

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

• Несбалансированный дизайн

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

• Неудобный интерфейс

Казалось бы, все просто — меняется окно браузера, приложение подстраивается под новый размер, и пользователь получает доступ ко всему объему информации, которая будет отображаться в увеличенном или уменьшенном виде. В случае с уменьшением масштаба это приводит к тому, что не всеми элементами на странице одинаково удобно пользоваться после изменения размера интерфейса.

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

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

• Невысокий процент охвата различных устройств

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

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

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

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

Источник

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

 

МИНУСЫ
АДАПТИВНОГО ДИЗАЙНА

У этого типа тоже есть свои определенные недостатки. Если вы планируете создать адаптивное приложение, учитывайте, что вам придется столкнуться с:

• Высокой стоимостью разработки

Хотите знать, сколько стоит разработка приложения в  2017 году? Читайте нашу статью.

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

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

Однако в результате, вы получите уникальное и качественное приложение.

 

ПОДВОДЯ ИТОГИ

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

Чтобы помочь вам сделать правильный выбор, компания Umbrella подготовила небольшую сравнительную таблицу с нашей оценкой двух типов дизайна (по шкале от одного до пяти).

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

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

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

Компания Umbrella рекомендует вам внимательно отнестись к выбору, а мы со своей стороны готовы предложить вам свои услуги и любую поддержку: от рекомендаций и советов до разработки адаптивных и респонсивных приложений. Не откладывайте на завтра и свяжитесь с Umbrella!

ПООБЩАТЬСЯ С ЭКСПЕРТАМИ

Фото: Shutterstock.com

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

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

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

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

Интересным решением оказалось создание отзывчивого веб-дизайна, которое решало некоторые значимые проблемы.

Отзывчивый веб-дизайн (Responsive Web Design) – такой подход в создании сайта, который предполагает проектирование и разработку в соответствии с используемым разрешением экрана, его ориентации и платформы. Другими словами, веб-сайт должен строиться на таких технологиях, которые автоматически реагировали бы на пользовательские настройки.  На практике отзывчивый веб-дизайн представляет собой сочетание резиновых изображений, включая видеоролики, резинового макета на пропорциональной основе и Media Queries, которые, собственно, и отвечают за адаптацию макета под размеры пользовательского экрана, а средствами CSS3 это разрешение определяется и выдается результат.

Данный подход впервые был предложен еще в начале 2009 года Итаном Маркоттом, который впоследствии опубликовал целую книгу «Responsive Web Design» (русского аналога пока не имеется).

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

Примеры отзывчивого дизайна сайта.

Food Sense

St Paul’s School

Forefathers Group

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

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

Главный принцип отзывчивого дизайна Mobile First – «Сперва мобильные», то есть сначала разрабатывается версия сайта для мобильного устройства, а затем на него наворачиваются другие расширяющие элементы.

В решении проблемы зависимости дизайна от данных пользователя помогает взаимодействие Mobile First с компонентами, находящимися на сервере. То есть можно сделать один шаблон, но обеспечить его компонентами, которые зависят от конкретного устройства, что удобно как самим пользователям, так и разработчикам.

Совсем недавно мы говорили об адаптивном дизайне сайта (Adaptive Web Design), суть которого также в приспособлении веб-сайта к разрешению устройства. Тогда чем же отличаются эти два подхода? Одни считают эти понятия синонимами, другие совершенно разным. Так в чем же правда?

На самом деле, отзывчивый веб-дизайн является частью адаптивного, так как подразумевает работу только с макетом страницы: медиазапросы, гибкие изображения и макет (по Итану Маркотту). В отличие от отзывчивого, адаптивный веб-дизайн включает в себя немного большее. В частности, существует отдельное понятие «адаптивный макет» — это макет, сделанный сочетанием множества горизонтальных размеров одинаковой ширины. Поэтому адаптивный макет может быть одной из форм отзывчивого веб-дизайна сайта. То есть в итоге получаем, что адаптивный веб-дизайн – это отзывчивый веб-дизайн плюс прогрессивные улучшения. Хотя на практике эти понятия на самом деле зачастую совпадают. 

Вернуться назад

Статьи по теме:

Отзывчивый vs. адаптивный: что лучше выбрать дизайнерам?

Google всегда рекомендовал отзывчивый веб-дизайн (Responsive Web Design или RWD) в связи с выходом большого обновления 21 апреля, после которого «мобильные» сайты получат более высокую оценку. Обновление не означает, что вы обязаны использовать отзывчивый дизайн, это значит лишь то, что сайт, доступный на мобильнике, будет более удобным и производительным.

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

Одним из самых жарких споров, разгоревшихся вместе с ростом числа мобильных устройств, был спор о том, что же выбрать: разработку отзывчивого, адаптивного веб-дизайна (Adaptive Web Design или AWD) для сайта, или сделать отдельный сайт (с m. в URL). Чтобы не отходить от целей данного обсуждения, мы оставим в стороне отдельные сайты для мобильных устройств. Нам кажется, что создание отдельных сайтов для мобильных устройств – не самое любимое решение для дизайнеров и предпринимателей, ведь им придется создавать отдельные сайты (что увеличит первоначальные затраты, а также последующие затраты на техническое обслуживание).

В чём разница?

Итак, для начала определим, в чём же ключевые различия между отзывчивым и адаптивным дизайном?

В двух словах, отзывчивый дизайн – это дизайн, способный меняться и адаптироваться под любой размер экрана, независимо от устройства. Отзывчивый дизайн использует медиа запросы для изменения стилей на основании таких параметров как: тип экрана, ширина, высота и т.д. Хотя только один из этих параметров действительно необходим для адаптации сайта под различные экраны.

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

1. 320
2. 480
3. 760
4. 960
5. 1200
6. 1600.

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

Эти проблемы, в частности, породили огромную дискуссию. На протяжении последних нескольких лет многие сайты даже в версии для настольных ПК загружались очень медленно. Для того чтобы избежать этого, вы можете использовать медиа запросы – но здесь придётся пойти на компромисс, так как сайт с отзывчивым дизайном никогда не будет таким же быстрым, как отдельный сайт для мобильных устройств.

Зачем использовать адаптивный дизайн?

Адаптивный дизайн отлично подойдёт для того чтобы приспособить уже существующий сайт под мобильные устройства. Он позволяет вам контролировать то, как будет выглядеть дизайн для нескольких чётко определённых областей просмотра (viewports). Количество областей просмотра, для которых вы разрабатываете дизайн, полностью зависит от вас, вашей компании и вашего бюджета. Тем не менее, это даёт вам значительный контроль (например, над контентом и макетом), при этом разрабатывать отзывчивый дизайн необязательно.

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

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

Если вы хотите разрабатывать адаптивный дизайн с нуля, это тоже вполне нормально. В этом случае также начните с проектирования макета для устройств с низкими разрешениями и двигайтесь дальше. Вы можете использовать медиа запросы для того чтобы адаптировать ваш макет и для более высоких разрешений. Тем не менее, если вы проектируете макет для нескольких разрешений, вы можете обнаружить эффект «скачка» при изменении размеров окна.

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

Зачем использовать отзывчивый дизайн?

Большинство новых сайтов сейчас используют отзывчивый дизайн, который проще сделать разработчикам и дизайнерам благодаря доступности тем для таких CMS как WordPress, Joomla и Drupal.

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

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

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

Соображения, которые необходимо принять во внимание

Как обсуждалось ранее, у отзывчивого дизайна сайтов есть проблемы (если они плохо спроектированы), когда дело касается скорости работы.

Отзывчивый дизайн также требует больше программирования для того чтобы соответствовать любому экрану, на котором он просматривается. Тем не менее, бОльшее количество работы над дизайном является спорным вопросом (по сравнению с адаптивным дизайном), поскольку адаптивный дизайн требует сопровождения HTML и CSS кода для каждого макета. При модификации адаптивных сайтов вы также, скорее всего, столкнётесь с трудностями, поскольку нужно убедиться, что на сайте всё корректно функционирует (например, SEO, контент и ссылки).

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

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

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

Решение

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

Также многое будет зависеть от того, есть ли у вас сайт, с которым вы будете работать, или же вы разрабатываете его с нуля. Отзывчивый дизайн стал переходной техникой дизайна и пока около 1/8 сайтов используют его (в то же время касательно адаптивных сайтов таких данных мало). Темпы внедрения отзывчивого дизайна также быстро растут и почти достигли уровня мобильных сайтов.

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

Однако если у компании есть средства, адаптивный дизайн может быть лучшим выбором исходя из теста, проведённого Catchpoint. Они создали два сайта на WordPress: один с использованием стандартной темы TwentyFourteen (отзывчивый дизайн), а на другой сайт установили плагин Wiziapp.

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

Результаты говорят сами за себя:

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

Опять же, это может быть исправлено с помощью медиа запросов, но то, что показано выше служит прекрасным примером того, что отзывчивый дизайн – который является самым популярным выбором – это не всегда лучшее решение для мобильных устройств. Пока лучшее решение ещё не найдено, сложно понять, что мы можем с этим сделать кроме того, чтобы узнать как писать код более правильно и создать хороший сайт с отзывчивым дизайном.

Итак, каков же вывод?

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

Оригинал статьи

Отзывчивость, Адаптив И Media Queries / WAYUP

Добро пожаловать в «Дизайн-кладовку»!

Это наш третий выпуск и сегодня мы будем говорить о том, как сделать сайт адаптивным и отзывчивым: в чем разница между двумя этими понятиями, что такое медиа-запросы, как с минимальными знаниями html и css сделать свою первую адаптивную страничку.

Как вы поняли, существуют два понятия — адаптивность и отзывчивость. В среде разработчиков эти понятия называются на английском — adaptive и responsive. 

Adaptive (адаптивность)

Что же такое адаптивность?

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

Что входит в понятие адаптивности?

1. Кодинг.  Верстальщик или фронтенд-разработчик делают ту самую магию в коде, которая позволяет нам просматривать различные состояния одной и той же страницы на мобильных устройствах и на десктопах.

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

3. Постоянное улучшение. Адаптивный веб-дизайн находится в постоянном развитии, в поиске новых  решений.

Ранее адаптивность реализовывалась с помощью поддоменов. Если у нас был домен sitename.ru для десктопной версии мы заходили на него с мобильного и автоматически перенаправлялись на поддомен  m.sitename.ru. Именно на этом поддомене располагалась, так называемая, легкая версия сайта, без графики или с минимальной графикой, так как ранее мобильные операторы предоставляли очень низкую скорость подключения, следовательно, не было возможности показывать большие картинки.

Responsive (отзывчивость)

Что же такое отзывчивость?

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

Как это выглядит на примере? Мы с вами заходим через десктоп на sitename.ru и видим обычную картину обычного сайта.

 

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

 Если мы введем тот же самый адрес с мобильного устройства, то увидим уже адаптированную под мобильные гаджеты версию этого сайта.

 

Как реализуется отзывчивость на практике?

Единственный способ сделать HTML-страницу «отзывчивой» — использовать медиа-запросы (media-querlies)  в CSS.

Что это такое?

Давайте представим обычную ситуацию. Описан обычный  код CSS. Это блок с классом «block», с длиной 500 px, высотой 300 px и сплошной границей 1 px серого цвета. Вот он на изображении справа:

А что если мы в тот же самый код CSS  добавим еще одно правило?

Мы добавляем контейнер media screen and (max—width: 1024px), в котором находится тот же самый код для элемента «block», но с небольшими изменениями: я поменял высоту и толщину границы. Это и есть медиа-запрос. И теперь наш блок будет преобразован только тогда, когда человек зашел на наш сайт с устройства, у которого разрешение меньше, чем 1024px. Для всех остальных случаев будет использоваться первый кусочек кода.

Давайте представим второй пример, где уже три элемента. Код, который находится слева, реализует объект, находящийся справа.

Добавим в наш CSS-файл вот такой участок кода:

Здесь те же самые свойства,  но  немного переопределены отдельные элементы. Все это заключено в контейнер media screen and (max— width: 480px), что означает, если у пользователя будет разрешение мобильного устройства до 480px, он увидит следующую картину — те же самые блоки, но преобразованные.

                                                                                                                       

Это позволяет  управлять нашими элементами в зависимости от устройств.

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

                                                                  

Первая часть нужна для того, чтобы показать нам десктопную версию. Затем, когда пользователь заходит с планшетного устройства, мы показываем ему несколько переопределенные CSS-свойства (вторая часть), которые будут подгоняться под размеры планшетов. Мобильные устройства добавляют еще одну часть кода в CSS – третью.

Вы  видите, что первая часть отвечает за диапазон от 961px и выше. Если у пользователя будет экран с разрешением от 769px до 960px, то он увидит то, что было прописано во второй части кода. Если же устройство будет иметь диапазон от 0 до 768px, пользователь увидит совершенно иную картину.

 Таким образом, в одном CSS-файле мы показываем все состояния и все поведения элементов для различных устройств.

Предлагаю рассмотреть пример на странице моего бесплатного курса по веб-дизайну.  Когда вы перейдете по ссылке, то увидите вот такую десктопную версию:

Нажимаем клавишу F12, чтобы получить Dev Tools в Chrome — мы видим html и CSS коды. По прошлому выпуску «Дизайн-кладовки» вы уже знакомы с этими понятиями.

Находим контейнер с классом left-side и если посмотрим на макет с разрешением 1024px, то увидим, что длина left-side показана в CSS 50%, т.е. контейнер равен половине разрешения нашего монитора.

Если же посмотреть на макет с разрешением 768px, CSS нам показывает, что длина у контейнера left-side 100%. Раньше она была 50%, а теперь переопределена новым участком кода.

Медиа-запрос в данном случае выглядит вот так: media screen and (max— width: 998px)

Почему именно 998px? Потому что для большого проекта, как правило, берется немного больше диапазонов, чтобы более детально и четко контролировать поведение отдельных элементов на различных диапазонах.

В заключение

Надеюсь, что этот урок поможет разобраться с тем, что такое отзывчивость и адаптивность. Обязательно рекомендую посмотреть мой бесплатный мастер-класс на «День верстальщика», с помощью которого вы без знания HTML и CSS, либо с минимальной базой, сможете создать свою первую настоящую профессиональную веб-страницу.

До встречи в новых выпусках «Дизайн-кладовки».

Впереди еще много крутых тем для веб-дизайнеров, разработчиков, верстальщиков, фрилансеров и просто свободных людей!

Респонсив или адаптив – какой сайт нужен вашей компании (ИНФОГРАФИКА)

Responsive Web Design (RWD) — отзывчивый веб-дизайн. Adaptive Web Design (ADW) — адаптивный веб-дизайн. Каждый из терминов обозначает особый подход и используется для описания процесса создания веб-сайта, который будет удобно просматривать с различных мобильных устройств.

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

По сути, ADW и RWD решают одну и ту же задачу, но разными способами. При создании респонсив веб-сайта используется гибкая структура страницы — «резиновый макет» (fluid grid), пропорции и размеры элементов которого задаются в процентах. Помимо «резиновой» структуры, используются гибкие изображения (fluid images), «резиновые» текстовые блоки. При уменьшении ширины такой страницы весь контент плавно сжимается, структурные элементы сокращаются относительно друг друга. Так, если веб-сайт имел трехколончатую структуру, то на более узком экране будут показаны две или одна колонка контента.

Для создания респонсив версии веб-сайта используются медиазапросы (media queries) — блоки кода с указанием параметров устройств вывода. Медиазапросы позволяют применять определенные правила (стили) для вывода разных контентных блоков в различном порядке и пропорциях в зависимости от ширины экрана и возможностей устройства, на котором происходит просмотр веб-сайта.

Вот отличный анимированный пример «резинового» (респонсив) сайта:

Чтобы еще лучше понять, как работают респонсив сайты, можно посетить www.bostonglobe.com  и, постепенно уменьшая размер окна браузера, следить, как содержание (картинки и текст) будет отвечать изменениям размера окна, либо посетить сайт www.liquidapsive.com, в меню которого можно выбирать различные варианты отображения страницы.

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

Например, при создании сайта проектируется дизайн страниц нескольких типовых размеров по ширине: 320px – для смартфонов, 760px и 1024px – для планшетов,1680px – для десктоп браузеров. Когда пользователь заходит на адаптивный сайт, сервер определяет, при помощи какого устройства осуществляется просмотр, и показывает юзеру нужный контент и шаблон.

Данный подход позволяет достичь гораздо более глубокого и полного взаимодействия пользователя с сайтом. Например, определив, что человек зашел на сайт при помощи iPad, можно использовать возможности тачскрин навигации (свайпы), которая недоступна в браузерной версии, или, наоборот, отключить/заменить лишние блоки с flash-баннерами или flash-элементами, которые не воспроизводятся на iOS, а также задействовать другие характерные возможности устройств, с которых происходит просмотр веб-сайта.

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

Чтобы лучше понять и увидеть адаптивный веб-сайт в действии, посетите www.lufthansa.com со стационарного компьютера и смартфона. Другой отличный пример — www.colly.com. Потянув за угол окна браузера, можно отследить, как при достижении определенной ширины окна шаблон сайта начнет изменяться.

Теперь нужно решить, какой подход использовать при создании сайта.

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

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

К сожалению, универсального решения не существует, и каждый случай создания мобильного сайта нужно рассматривать отдельно. Для простоты принятия решения ниже представлена небольшая сравнительная таблица использования ADW (adaptive web design) и RWD (responsive web design).