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

Создание адаптивного или респонсив сайта — что нужно вашей компании?

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

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

Mary Meeker’s 2014 Internet Trends Report

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

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

Попробуем разобраться в этом вопросе, и поделиться накопленным AGENTE™опытом. Сразу предупредим — универсального решения не существует, сколько бы об этом ни говорили на всех возможных конференциях и воркшопах.

Терминология и отличия подходов.

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

Распродажа курсов по интернет-маркетингу!

Под занавес года Skillbox проводит распродажу всех своих курсов по интернет-маркетингу и менеджменту: системное обучение маркетингу, управлению проектами, сквозной аналитике, и многому другому.
Скидки до 50%, плюс возможность рассрочки платежа! Предложение действует только до конца декабря!

Узнать больше >>>

Реклама

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

По сути, ADW (adaptive web design) и RWD (responsive web design) решают одну и ту же задачу, но разными способами.

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

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

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

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

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

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

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

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

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

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

Какой же подход выбрать?

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

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

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

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

responsive vs. adaptive Автор: agente

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

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

Андрей Терёхин — CEO / Директор по развитию AGENTE™.

Не пропустите!

Маркетинг влияния: 10 сценариев работы с лидерами мнений
Как запустить краудфандинговую платформу «с нуля»: кейс QIWI Fundl
10 непростительных ошибок в контекстной рекламе: чеклист для новичков
Кейс. Заполняем ресторан с помощью соцсетей: у нас две недели и 60 $ на рекламу
Кровь, менструация и Каннские львы. Кейс на сложную тему из Украины
Почему технарю легче стать хорошим копирайтером, чем гуманитарию. Три факта и личный опыт
5 классических факапов с репутацией
«Хантеры рекомендуют на время поиска работы снизить активность в соцсетях», — Алёна Владимирская
«Доброе время суток, Карл!» — Почему нас вдруг стали бесить новомодные словечки и крылатые выражения
Клиентские манипуляции и как их нейтрализовать
6 ошибок в работе со сквозной аналитикой
Меньше денег и сплошные переговоры: что бывает, если фрилансер открывает агентство

Комментарии:

Реклама


🤔 Чем живёт digital?
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Вконтакте, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой