Отзывчивый или адаптивный дизайн: что лучше для издателей?

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

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

Последнее исследование «Pew» показывает, что пользователи мобильных устройств не просто просматривают заголовки, как ранее предполагалось, но «многие из них также читают новости - 73% взрослого населения, которое изучает новости на планшетах, иногда читают аналитические статьи, включая 19% тех, кто делает это ежедневно. Всего  61% потребителей новостей со смартфонов хотя бы иногда читают длинные истории, 11% делают это регулярно». Поэтому, установив важность создания сайта, хорошо приспособленного для просмотра в мобильных устройствах, вопрос состоит в том как издателям лучше всего это сделать, с использованием адаптивного или отзывчивого веб-дизайна?

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

Есть несколько способов сравнения двух этих методик.

Отличие Клиент-Сервер, упрощенное

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

Отзывчивый дизайн является клиентским, это означает, что веб-страница передается в браузер устройства (клиенту), а затем браузер меняет вид страницы в зависимости от размеров окна браузера.

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

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

Именно так мне описали их различие Илико Элиа (@ilicco), который является бывшим главой отдела мобильных технологий в «Reuters» и в настоящее время возглавляет отдел мобильных технологий в агентстве Digital-маркетинга и Интернет-технологий «LBi» в Лондоне, и его коллега Лоренцо Вуд (@lorenzowood), технический директор в «LBi». Если вы еще не слышали об «LBi», они в последнее время работали над ребрендингом «Sony Mobile» и разработали полностью отзывчивую домашнюю страницу бренда на sonymobile.com.

Контрольные точки

После недавней конференции в Париже, я получил возможность задать те же вопросы Юлии Бейзер (@juliabeizer), главе отдела мобильных технологий в «Washington Post». Команда Бейзер работала над некоторыми проектами отзывчивого веб-дизайна, а совсем недавно запустила этот сайт для регистрации участия в инаугурации Обамы в 2013 г. Во время нашей беседы в Париже, она описала различия с точки зрения контрольных точек.

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

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

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

Как правило, издатели будут разрабатывать различные версии сайта для минимум трех типов устройств (мобильных телефонов, планшетов и настольных ПК). Однако, как я уже упоминал выше, команда, разработавшая отзывчивый сайт «Boston Globe», определила 6 контрольных точек, которые соответствуют «смартфонам, мобильным телефонам, планшетам, ноутбукам, ПК и т.д».

Четыре версии отзывчивого сайта «Boston Globe». Права: mediaqueri.es

Этан Маркотт (@beep), который первым ввел термин «отзывчивый дизайн» в 2010 г. в статье «A List Apart», а также работал над отзывчивым сайтом «Boston Globe», описывает изменения версий сайтов в соответствии с контрольными точками:

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

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

Как и все технологические решения, с которыми сталкиваются издатели, решение дилеммы отзывчивого или адаптивного дизайна во многом зависит от стратегии, и должно быть принято издателями, учитывая желаемые результаты. Технический директор «dotMobi», Ронан Кремин (@xbs), разработал категоризацию двух типов результатов, которых издатели хотят достичь в результате применения разработанной мобильной стратегии:

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

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

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

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

Батист Бенецет (@Ba_B), генеральный директор французской компании по разработке мобильных технологий «Applidium», дал еще один совет об отзывчивом и адаптивном дизайне. После коллективного обсуждения вопроса, в рамках которого крупные французские медиа-холдинги обсуждали будущее мобильных новостей, Бенецет сказал мне, что еще до принятия решения о методе дизайна, «издатели должны разобраться в системе управления контентом, более того, в ИПП, чтобы определить стандартный способ работы с контентом». Только с эффективными системами управления контентом и ИПП издатели смогут организовать собственный контент в нескольких вариантах для оптимального потребления в целом ряде устройств.

Заключение

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

Если издатель выберет адаптивный дизайн, это сможет позволить ему пойти еще дальше в оптимизации версий для мобильных телефонов и планшетов, путем использования дополнительных функций этих устройств, например геолокации и сенсорных жестов. Кроме того, предложение лучшей версии сайта пользователю может сократить время загрузки, способствуя дальнейшему совершенствованию. Это могло бы объяснить, почему из 100 лучших мировых сайтов, по версии «Alexa», 82% используют определенную серверную форму обнаружения устройств для передачи контента в основную точку входа на сайт. Вот что Бейзер написал в электронном письме:

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

Дополнительная информация

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

• История отзывчивого сайта «Boston Globe», рассказанная командой специалистов, которая его создала
• Оригинальная статья об отзывчивом дизайне от человека, который ввел это понятие, Этана Маркотта
• Интересная аналогия концепции прогрессивного улучшения (HT @juliabeizer)
• Сравнение адаптивных и отзывчивых сайтов (HT @talkingnewmedia)
• Иллюстрации вебсайтов, использующих отзывчивый дизайн с примерами контрольных точек

Эта статья была первоначально опубликована в «Huffington Post»

Автор этого материала Гаретт Гудман - новый медиа-консультант, занимающийся вопросами развития бизнеса для новой компании «Worldcrunch», которая находится в Париже. Он также пишет об инновациях в области журналистики для «Huffington Post».

Оригинал публикации

Редакторский портал