Отзывчивом дизайне


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.

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

Responsive design 2

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

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

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

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

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

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

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

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

Решение

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

Responsive design 3 screen

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

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

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

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

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

Responsive and adaptive design test

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

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

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

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

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


Источник: http://dev-city.me/2015/05/18/responsive-vs-adaptive-design


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? / Хабрахабр
Модное короткое каре без челки фотоЧто носить с высокими туфлями на платформеМодный набор одежды для куколДизайн квартир 120 кв.м. фотоИнтерьер однокомнатной на семью с ребенком


Отзывчивом дизайне Отзывчивом дизайне Отзывчивом дизайне Отзывчивом дизайне Отзывчивом дизайне Отзывчивом дизайне


ШОКИРУЮЩИЕ НОВОСТИ