54.80.93.19

Responsive или Adaptive Web Design


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

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

 

Почему адаптивный веб-дизайн стал необходимостью?
• Увеличение количества устройств с доступом в интернет
Сегодня есть множество устройств, которые используются для выхода в интернет. Эти устройства отличаются размером экрана, разрешением, а также тем, как на них отображаются страницы сайтов. Именно поэтому важно, чтобы Ваш сайт идеально отображался на любом устройстве пользователя.
• Рост популярности мобильных устройств, имеющих выход в интернет, и мобильного интернет-трафика.
За последнее время доступ в интернет со смартфона или планшета стал доступен практически каждому. Следовательно, каждому из пользователе должно быть комфортно на вашем сайт, в противном случае – они просто перестанут его использовать.
•Быстрая информация
Быстрый темп жизни диктует новые сценарии поведения пользователей. Сейчас ничего нет удивительно в осуществлении покупок с мобильного телефона или поиске контактов ближайшего нужного магазина, сервиса, ресторана.

Основные отличия мобильной версии сайта от адаптивного сайта
Мобильные версии сайтов и мобильные приложения, которые специального разрабатывались для различных мобильных устройств, могут сделать просмотр сайта удобным и приятным. Но у них есть определенные недостатки:
• Под каждый тип операционной системы должно быть создано свое приложение либо версия сайта, а это означает использование дополнительных ресурсов, то есть финансов и времени.
• Необходимость загрузки приложения. Чтобы пользователь мог использовать Ваше приложение ему потребуется его установить на свой гаджет. Следовательно, это требует от пользователя дополнительных усилий, поэтому большинство не будут выполнять таких действий, если у них нет уверенности в том, что это приложение им необходимо и они собираются его постоянно использовать.
• Разделение трафика. Главное неудобство мобильного приложения заключается в том, что весь трафик ресурса разделяется на два «потока» — трафик сайта и трафик приложения. Это означает, показатель посещаемости сайта будет значительно ниже, чем до создания мобильного приложения.
• Потребность в интеграции материалов сайта. Если используется мобильное приложение, тогда необходимо осуществлять синхронизацию сайта с приложением (что потребует использование дополнительных ресурсов), либо осуществлять двойную работу, под которой подразумевается наполнение сайта и приложения одинаковыми материалами.
Главным отличием адаптивного дизайна заключается в том, что сайт будет иметь один адрес, один дизайн, одну систему управление и один контент.

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

 

Отличия подходов  Responsive Web Design (RWD) и Adaptive Web Design (ADW)

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

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

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

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

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

Вот хороший пример «резинового» сайта:

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

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

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

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

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

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

Какой подход стоит выбрать?

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

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

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

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

Oksana Davidchenko


"Мечты не работают пока не работаешь ты"