Адаптивный или адаптированный сайт – как выбрать наилучший подход


Оглавление (нажмите, чтобы открыть):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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).

Респонсивный Vs адаптивный дизайн: что лучше для пользователя?

И хотя такой подход достаточно хорош с точки зрения Google, который «любит» респонсивные сайты — это далеко не единственный вариант, способный приспосабливаться под нужды пользователя.

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

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

Респонсивный веб-дизайн

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

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

Помимо своей изменяющейся структуры, у респонсивного дизайна есть несколько других преимуществ:

1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах2. Наличие у сайта одинакового URL, что способствует SEO-оптимизации3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент

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

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

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

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

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

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

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

Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:

  1. Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
  2. Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
  3. Разработчики пользуются свободой творчества, ведь они могут создавать различные версии сайтов и подгонять их под соответствующие типы устройств, чтобы сделать их более удобными для мобильных пользователей.

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

Какой вариант и для чего подходит?

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

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

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

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

IT Keys

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

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

Мастер Йода рекомендует:  AJA - AJAX без XML

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

Отзывчивый дизайн (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.

Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Что мы получим, если совместим адаптивный и отзывчивый подходы? Представляем адаптивную + отзывчивую модель (Adaptive + Responsive model).

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

Хотя отзывчивый дизайн использует CSS и / или JS для адаптации макетов и контента на основе предварительно определенных контрольных точек (breakpoints), адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе пользовательского агента (user agent) и типа устройства. Основное различие между ними заключается в DOM-структуре. При отзывчивом дизайне у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как при адаптивном у нас другая структура кода и потенциально разный опыт.

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

Методы отзывчивого дизайна

При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом:

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

Изменение размера (Resize): некоторые компоненты интерфейса являются текучими, как большинство HTML-элементов. Они заполняют доступное пространство и при необходимости меняют структуру.

Показать / Скрыть (Show/Hide): некоторые части интерфейса скрыты из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.

Метод адаптивного дизайна

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

Представляем модель A+R

Оба подхода имеют свои плюсы и минусы, но что мы получим, если захотим использовать оба сразу? Модель A + R сочетает в себе как отзывчивый, так и адаптивный подходы, основанные на одной основной контрольной точке.

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

Как упомянуто выше, адаптивный подход позволяет нам дифференцировать пользовательский опыт, контент и даже функциональные возможности на основе пользовательского устройства. Рассматривая 960px, как главную адаптивную контрольную точку (определенную на основе глобальной статистики), мы имеем нечто похожее на:

  • Область просмотра слева представляет все экраны с разрешением меньше 960px с определенным макетом / контентом
  • Область просмотра справа представляет все экраны с разрешением 960px или более с другим макетом.

R обозначает Отзывчивый

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

Адаптивный + отзывчивый

Комбинируя адаптивный и отзывчивый подходы, мы получаем модель A + R. С помощью адаптивного метода мы будем работать с опытом и функциональностью, создавая два разных контекста. С отзывчивым методом мы обрабатываем компоненты интерфейса и макеты, которые находятся внутри контекста.

Когда выбрать модель A + R

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

Используя модель A + R дизайнеры и разработчики (но также и владельцы продуктов) могут сосредоточиться на улучшении всех возможностей, которые может предложить продукт, вместо того, чтобы обеспечить «хороший» опыт только в одной среде.

Кто использует эту модель?

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

Подпишитесь на автора

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

Все изображения сделаны автором и ребятами из Contactlab UX.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

Что выбрать: адаптивный дизайн или мобильную версию?

Всем привет! Помню, лет 5 назад фраза «мобильная версия сайта» воспринималась для меня как что-то ненужное и сделанное только некоторыми крупными онлайн-проектами. Об адаптивном дизайне в то время речи не велось вообще. Но интернет — это быстро меняющееся пространство и сейчас этими понятиями часто оперируют вебмастера и разработчики сайтов.

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

Перед тем, как что-то предпринимать я задался логичным вопросом — «Что лучше: мобильная версия или адаптивный дизайн?». Уверен, что и вы задавались данным вопросом, либо он у вас стоит на повестке дня. В посте я хочу разобрать все плюсы/минусы данных типов удобного отображения сайта для мобильных пользователей и «нарисовать» небольшую сводную таблицу. Вам будет легче определиться с выбором.

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

UPD. Новая wordpress-тема была разработана адаптивная (старая mobile-версия удалена).

У адаптивности есть 2 плюса — удобство для пользователей + возможность влияния на ранжирование. Подчеркнул возможность, потому как сам наглядно такого влияния не замечал. Да и первого плюса достаточно, чтобы немного раскошелиться .

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

1. Стоимость

Мобильная версия для блога обошлась мне в 50$. Адаптивный дизайн в районе 120-150$ (это именно цена за адаптивность wordpress-темы слегка портального типа). Здесь выигрывает первый вариант. Стоит учитывать то, что сайты бывают разные и стоимость будет разной. Многое зависит от сложности. Я публикую цифры, которые получились у меня.

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

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

2. Монетизация

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

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

3. Отображение

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

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

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

4. Удобство и функционал

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

5. Скорость загрузки

А здесь обычно выигрывает мобильная версия. Все из-за того, что в ней нет ничего лишнего.

Обещанная сводная таблица .

Критерий Адаптивный дизайн Мобильная версия
Стоимость Дешевле Дороже
Монетизация Более удобно Менее удобно
Отображение Более похож на основной дизайн Похож менее
Функционал Полный Менее полный
Скорость загрузки Ниже Выше

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

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

Мобильный сайт или адаптивная вёрстка: что лучше с точки зрения SEO

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

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры», рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

Преимущества адаптивных и мобильных сайтов

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» — мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

  • Нам не требуется отдельная структура страниц для отображения на мобильных устройствах. Достаточно откорректировать десктопную версию сайта с помощью CSS.
  • Для десктопной и мобильной версий используется единый URL-адрес. Поэтому контент сайта не дублируется, страницы не конкурируют между собой, а работа по продвижению влияет на ранжирование в десктопном и мобильном поисках.

Мобильная версия — более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

Хочу отметить ещё одну технологию — RESS. Она показывает пользователю десктопный или мобильный шаблоны в зависимости от устройства, но при этом URL-адрес страницы не меняется. RESS сочетает описанные выше плюсы адаптива и мобильной версии. Но у неё есть и два минуса: сложная и дорогая реализации и ошибки с определением редких и непопулярных моделей телефонов.

Проблемы с адаптивной вёрсткой

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

Ошибочная интерпретация адаптива

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


  1. Все элементы контента загружаются дважды: тексты, изображения, заголовки H1 и H6, хлебные крошки, сопутствующие и рекомендуемые товары и так далее. А поисковые системы очень не любят дубли.
  2. Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявляла, что игнорирует содержание скрытых блоков, а «Яндекс» — что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создаёт риск попадания под санкции.
  3. Код дублируется, и сайт загружается медленнее.

Подобная реализация — неправильный подход к технологии RESS.

Скрытие ненужных элементов

Чтобы сделать интерфейс адаптивной версии удобнее, некоторые избавляются от части функциональности: отвлекающих блоков, больших текстов в категориях каталога и так далее. Всё лишнее скрывают с помощью display: none . Но проблема в том, что для загрузки страницы используется весь код, и сайт работает медленно. К тому же, как уже говорилось выше, у поисковиков спорное отношение к такому контенту — есть риск попасть под санкции.

Неверное использование JavaScript

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

Почему всё-таки используют адаптивный дизайн

Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.

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

А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.

Можно пойти другим путём — использовать геоподдомены, чтобы повысить текстовую релевантность страниц. В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Ещё один плюс — для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам. Такой способ продвижения практикует MediaMarkt.

Проблемы с мобильными версиями сайтов

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

Двойная работа по продвижению

Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel=»alternate» , настройте индексацию и генерацию XML-карты.

Хаос из-за абсолютных ссылок в контенте

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

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

При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/ .

Противоречия рекомендаций Google

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

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

У «Яндекса» в этом плане всё чётко — он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel=»alternate» с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.

Неясность требований mobile-first индекса

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

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

Бездумное использование турбостраниц

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

Мастер Йода рекомендует:  Бесфайловый GhostMiner принёс разработчикам чуть более 200 $

Снижение эффекта от внешних ссылок

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

Особенности продвижения в регионах

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

В первом случае мы продвигаем основной домен и мобильный поддомен m.site.ru. Каждому из них нужно задать регионы через «Яндекс.Справочник». Проблема в том, что иногда самостоятельно привязать мобильную версию сайта к филиалу невозможно. Придётся обратиться в техподдержку, но и это не гарантирует результат. Создать отдельную организацию под мобильную версию сайта нельзя. Поэтому, если филиалов много, привязка может затянуться надолго.

Вариант с использованием поддоменов вроде m.spb.site.ru или spb.m.site.ru мы вообще исключаем. Хотя «Холодильник.ру», например, его использует. Но в этом случае нужно настраивать адресацию между всеми регионами мобильных и десктопных версий, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров. Это огромная работа, которая вряд ли окупится.

Отправка на проверку «мобилопригодности»

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

Почему же используют мобильные версии

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

Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива. Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование.

Какой вариант выбрать

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

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

Также можно использовать технологию RESS, но помните, что в этом случае Google отдаёт предпочтение мобильной версии.

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

Благодарю SEO-специалистов Валентину Кузнецову, Алексея Афонина и Игоря Малышева, которые помогли собрать информацию, используемую в колонке.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

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

Если «нормальные» адаптивные решения работают отлично именно у Вас, как у пользователя, это не значит, что у других тоже все в порядке — у многих адаптивы могут загружаться и отрисовываться очень долго. Тогда мобильная версия или RESS будут намного выигрышнее смотреться. А еще не забываем про Speed Update от Google, где скорость загрузки будет играть более значимую роль. Ну и AMP не панацея даже для Гугла, не говоря уже о Яндексе.

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

Такой вариант тоже не исключен)

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

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

Процитируя вас Яндекс Маркету получается «нехер чё делать» ? 🙂

Интересно, кто составляет контент-план этим странным людям, пишущим на темы, потерявшие актуальность лет так 5 назад.
А текст похоже генерирует то самое ПО для копирайтинга, которое делает описания для товаров на Taobao и Tmall.

Из перечисленного, 5 лет назад были только различные способы адаптации. Ранжирование же и в целом восприятие адаптированных сайтов поисковыми системами коренным образом изменилось. Если Вам это понятно, кажется очевидным и не требующим объяснений — это замечательно) Но на практике, в работе постоянно приходится сталкиваться с сайтами, у которых одни и те же ошибки и проблемы. Проблема есть — значит тема актуальна, тем более во время повсеместного включения MFI для сайтов в Google. Именно для владельцев/маркетологов таких сайтов и написана эта статья.

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

Некоторое недоумение вызывает вот этот пункт:
«Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона. Все элементы контента загружаются дважды»

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

Ну по факту, с появлением и массовым распространением смартфонов, которые де факто те же компьютеры, я думаю адаптив логичнее выбирать.
Другой вопрос что сам сайт нужно по человечески делать, чтобы он был априори не перегружен и не тормозил. Некоторые любят так нафигачить, что и на десктопе тупит. Да что там говорить, последние поколения смартфонов уже быстрее большинства домашних ноутбуков, так что то что десктоп выдерживает «мощные» сайты — миф, они и там тормозят.
Сейчас был очередной забавный пример этого, когда часть американских сайтов отдавали пользователям из ЕС (из-за gdpr) облегченную версию (без следящих свистелок и перделок) и многие пользователи таким версиям возрадовались не из-за отсутствия слежки, а из-за значительно более легкого интерфейса и более быстрой работы самих сайтов.

Совершенно верно, об этом и речь) Многие отмечают, что при переходе на m-поддомен трафик с поиска растет.

Сначала в статье мы «впариваем» людям проблемы, потом героически их преодолеваем:
1) «Два шаблона на страницу» — это критерий жуткого непрофессионализм, и в этом случае, наверняка верстка с двумя шаблонами будет самым меньшим из зол всего проекта. Там уж точно не до SEO

2) «Скрытие ненужных элементов через diplay:none, которое приводит к замедлению работы проекта, поскольку ненужный код грузится все равно». Открываем диаграмму загрузки «среднестатистического» проекта, и смотрим долю разметки в общей доли загрузки всей страницы. Понимаем какую чушь мы написали и идем заниматься оптимизацией медиа контента. Доля такого «лишнего кода» не будет составлять и 1% от всего проекта. Которые ну никак не повлияют даже в случае параноидальной оптимизации и попытки всунуть стартовую страницу в первые 14кб запроса.

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

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

3) Этот пункт сродни пункту 1. Зачем городить велосипеды, если современный CSS с этим справится гораздо лучше?

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

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

Адаптивная верстка vs. мобильный сайт, или Какая стратегия адаптации к мобильному трафику выиграет в будущем?

Время чтения: 23 минуты Нет времени читать? Нет времени?

В марте 2020 года основатель Facebook Марк Цукерберг в разговоре с создателем Alibaba Group Джеком Ма объявил скорое завершение эпохи смартфонов и планшетов. По словам Цукерберга, каждые 10 лет появляются принципиально новые девайсы, меняющие представления человека о способах взаимодействия с компьютером.

Думаете, пророчества Цукерберга должны интересовать только производителей и продавцов смартфонов? Они касаются и вас лично. Если вы планируете адаптировать ресурс к мобильному трафику, этот материал для вас. Из него вы узнаете о преимуществах и недостатках адаптивной верстки и мобильных сайтов. Также вы узнаете, что выбрать на перспективу: RWD-сайт или отдельные ресурсы для пользователей мобильных девайсов и десктопов.

Какие стратегии адаптации к мобильному трафику работают сегодня

Есть две основные стратегии создания дружественных к мобильным пользователям ресурсов. Первая предполагает использование адаптивной верстки. Страница с RWD (от англ. Responsive Web Design) автоматически подстраивается под размеры экрана посетителя. Благодаря этому ее удобно просматривать на любом устройстве: десктопе, планшетном ПК и смартфоне.

Вторая стратегия предполагает создание для мобильных пользователей отдельного сайта. Он адаптирован исключительно для просмотра на небольших экранах. Поэтому с мобильных версий сайта исчезают многие элементы десктопной версии, включая flash-анимацию и «тяжелую» графику. Мобильные версии имеют отдельный URL. Например, несмотря на использование адаптивного дизайна, «Лента.ру» предлагает пользователям отдельный мобильный сайт. Он находится по адресу m.lenta.ru.

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

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

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

Адаптивный дизайн: преимущества и недостатки

Крупнейшая в мире поисковая система Google рекомендует делать сайты mobile-friendly с помощью адаптивного дизайна («We recommend using responsive web design»). Представьте, что ваш коллега просматривает страницу сайта на смартфоне, а вы открываете ту же страницу на стационарном ПК. При переходе на выбранный URL ваши браузеры загружают одинаковый HTML-код.

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

А вы видите сайт так:


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

  • Более высокие позиции ресурса в мобильной поисковой выдаче. Здесь нужно отметить две принципиальных позиции. Во-первых, это универсальное преимущество всех стратегий адаптации к мобильному трафику. Поисковые системы считают корректными как RWD или динамический показ, так и мобильную версию сайта. Во-вторых, наличие или отсутствие адаптации под мобильный трафик влияет исключительно на мобильную выдачу. Вот подтверждение от «Яндекса», а вот от Google. Вот еще один четкий ответ от представителя Google (см. Вопрос № 2): адаптация под мобильный трафик влияет только на мобильную выдачу.
  • Удобный мониторинг сайта с помощью систем аналитики. Если вы используете RWD или RESS, с помощью Google Analytics и «Яндекс.Метрики» можно следить за эффективностью сайта для всех типов трафика.
  • Экономия средств. Адаптивная верстка обойдется вам дешевле, чем создание и содержание отдельной версии ресурса для мобильных девайсов.
  • Отсутствие необходимости настраивать редиректы. Как сказано выше, при использовании RWD браузер автоматически адаптирует к экрану страницу, расположенную по одному адресу.
  • Простота управления. Чтобы показать контент владельцам десктопов и мобильных гаджетов, достаточно один раз сверстать и опубликовать статью.
  • Отсутствие дублей контента. Все пользователи посещают страницу, расположенную по одному адресу.
  • Простота реализации. Фреймворки типа Bootstrap значительно упрощают работу веб-разработчиков. Более того, даже если вы ничего не понимаете в коде, можно воспользоваться плагинами для популярных CMS. Например, чтобы сделать дизайн сайта на WordPress отзывчивым, установите плагин WPtouch.

Как видите, Google не зря рекомендует RWD для адаптации ресурсов к мобильному трафику. Значит ли это, что отзывчивый дизайн можно считать панацеей? Нет, так как…

… адаптивная верстка имеет недостатки

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

Потребности аудитории не учитываются

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

Страдает юзабилити и пользовательский опыт

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

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

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

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

Страницы долго загружаются, создается избыточная нагрузка на «железо»

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

Факт остается фактом: чтобы открыть страницу, мобильный телефон и стационарный компьютер загружают одинаковый объем информации и совершают одинаковый объем вычислений, который нагружает процессор. Подключенный к быстрому интернету десктоп с мощным «железом» справляется с этой задачей на ура. А как себя чувствует смартфон с менее мощным процессором? Если вы подключаетесь к интернету не через офисный Wi-Fi, а через мобильные сети, объем загружаемой информации играет критически важную роль.

Отсутствие выбора

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

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

Мобильная версия сайта: за и против

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

Преимущества мобильного сайта

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

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

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

… недостатки мобильной версии сайта

Мобильная версия имеет целый ряд серьезных недостатков.

Мобильный сайт подходит не для всех мобильных устройств

Как вы помните, RWD гарантирует корректное отображение ресурса на экране любого девайса. Мобильные сайты также корректно открываются с любого устройства. Однако мобильная версия обычно смотрится нелепо на экране десктопа. Более того, большинство мобильных сайтов невозможно использовать на планшетах с большим экраном. Посмотрите, как выглядит мобильная версия «Живого Журнала» на экране 10”:

Управлять двумя сайтами сложнее, чем одним

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

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

Дополнительные расходы

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

Проблемы с дублированием контента

Представьте, что опубликовали на основном сайте классную статью. Если вы тут же опубликуете ее на мобильном сайте, он будет пессимизирован за воровство контента. Чтобы решить проблему, вам придется потрудиться: информировать «Яндекс» и Google о родственности основной и мобильной версии ресурса с помощью атрибутов rel=alternate и rel=canonical.

Кастрированная функциональность и контент

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

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

В теории проблема решается ссылкой на полную версию сайта. Но некоторые посетители наверняка предпочтут искать необходимую информацию и функции на сайтах-конкурентах с RWD.

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

Динамический показ: шах или мат мобильному сайту?

Динамический показ или RESS — это улучшенный вариант адаптивного дизайна. Он работает так: после запроса к URL сервер определяет характеристики устройства посетителя. Затем браузер получает HTML-код страницы, адаптированной к просмотру на конкретном экране. Благодаря динамическому показу устраняется один из главных недостатков RWD: большой расход трафика и нагрузка на устройство пользователя.

Когда вы заходите на сайт с RESS со смартфона и десктопа, ваши браузеры загружают разный код. При этом вы получаете всю информацию, содержащуюся на странице. Более того, вы можете адаптировать навигацию, меню, дизайн и контент страниц к нуждам владельцев конкретных девайсов. Самый простой пример адаптации контента: благодаря определению сервером устройства пользователя вы можете показывать владельцам девайсов под управлением iOS и Android ссылки на скачивание приложений в App Store и Google Play соответственно.

Корректную работу сайтов с RESS обеспечивает HTTP-заголовок Vary, содержащийся в ответе сервера на запрос. С его помощью браузер загружает соответствующий характеристикам устройства HTML-код. Также благодаря HTTP-заголовку Vary поисковые системы определяют мобильную дружественность ресурса.

RESS используют SlideShare, CNN, WordPress.com и другие сайты. Например, если вы откроете сайт CNN со стационарного компьютера, в коде страницы будет JavaScript.

В коде страницы, загруженной со смартфона, JavaScript отсутствует.

Почему Google рекомендует адаптивный дизайн, если есть улучшенный вариант? Почему владельцы сайтов массово не внедряют динамический показ? Как любой другой инструмент, RESS имеет недостатки:

  • Для определения устройства или браузера пользователя информация о нем должна быть на сервере. Чтобы не вносить информацию о каждом новом устройстве или каждом обновлении браузера, придется воспользоваться сервисом определения девайсов, например, Netbuiscuits. А это связано с дополнительными расходами.
  • Динамический показ повышает нагрузку на сервер. Из-за этого может увеличится время загрузки страниц. Для решения проблемы придется увеличить расходы на хостинг.
  • Чтобы сделать разную верстку и контент для владельцев разных устройств, потребуются дополнительный ресурсы.
Мастер Йода рекомендует:  Встречают по одежке или используем английский в IT

Google рекомендует RWD, а не RESS, из-за ресурсозатратности второго инструмента. Чтобы обеспечить динамический показ, придется решать проблему определения устройств пользователей, увеличивать расходы на хостинг и тратить время и деньги на создание разного HTML-кода для одного URL. Позволить себе дополнительные затраты может далеко не каждый проект. Поэтому в настоящее время RESS нельзя назвать матом и даже шахом мобильным сайтам и адаптивному дизайну.

Как влияет на выбор стратегии эволюция мобильных экранов

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

Дисплеи становятся гибкими

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

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

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

Смартфоны, планшеты и носимые устройства создают дополненную реальность

Простой пример: если во время путешествия посмотреть на улицу незнакомого города, можно увидеть красивые здания и памятники. Если посмотреть на эту же улицу через Google Glass или Samsung Gear VR, можно увидеть красивые здания и получить информацию о них.

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

От трехмерных изображений к объемным голограммам

Смартфоны и планшеты уже умеют воспроизводить 3D-изображения. Что дальше? Некоторые производители разрабатывают системы, которые позволят оснастить смартфоны и планшеты проекторами голограмм.

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

А как насчет интернета без экранов?

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

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

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

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

Какую стратегию выбрать

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

Характеристика /Стратегия

Адаптивная верстка

Мобильный сайт


Динамический показ

Реализуется легко. Есть готовые решения: адаптивные шаблоны и плагины для популярных CMS, фреймворки типа Bootstrap для веб-разработчиков.

Есть готовые решения. Но обычно речь идет о разработке нового сайта.

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

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

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

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

Влияние на опыт мобильных пользователей

Сайтом удобно пользоваться. Могут быть проблемы со скоростью загрузки страниц и нагрузкой на «железо» смартфонов.

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

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

Влияние на опыт пользователей десктопов

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

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

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

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

Придется управлять двумя сайтами.

Если используется разная верстка и публикуется разный контент, управлять сложно.

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

Да, особенности проекта и нужды его аудитории учитывать необходимо. Да, основные стратегии адаптации к мобильному трафику имеют преимущества и недостатки. Да, каждая из стратегий имеет сторонников и противников. Например, основатель Nielsen Norman Group Якоб Нильсен не любит адаптивный дизайн и рекомендует делать мобильную версию сайта. А автор бестселлера «Изучаем HTML 5» Брюс Лоусон рекомендует использовать RWD и отказаться от мобильных сайтов. Но это теория.

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

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

FAQ и лучшие практики по реализации адаптивного веб-дизайна

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

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

Почему я должен переходить на адаптивный дизайн?

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

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

  • Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
  • Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
  • В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
  • То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
  • Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.

Что нужно знать перед началом работы с адаптивным дизайном?

Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, по которому при размере экрана менее 320px не будет показываться боковая панель, или при размере экрана более 1920px (широкоэкранный монитор) размер шрифта основного текста будет увеличен до 15px.

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

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

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

В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.

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

Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).


Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?

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

Есть ли какие-то недостатки в использовании адаптивного дизайна?

  • Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
  • Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
  • Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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