И адаптивный, и отзывчивый дизайн преследуют одну цель — обеспечить оптимальный просмотр сайта на любых устройствах. Оптимальный просмотр подразумевает, что для доступа к контенту требуется минимум операций прокрутки, приближения/отдаления страницы или изменения размеров окна.
Грамотная подача контента — это то, на чем фокусируются обе концепции («думайте о пользователе, а не о браузере»). Разница же заключается в том, каким способом достигается такая цель.
Теперь представим, что вам нужно решить, какой подход будет использоваться при создании вашего сайта.
Респонсив сайты больше подходят тогда, когда нет разницы между просмотром и использованием веб-сайта на мобильном и десктоп устройстве, а также когда бюджет и срок разработки ограничены.
Адаптивные сайты подходят в большинстве случаев, но наиболее востребованы именно тогда, когда важна скорость загрузки страниц и взаимодействие пользователя с мобильной версией сильно отличается от использования браузерной десктоп версии.
К сожалению, универсального решения не существует, и каждый случай создания мобильного сайта нужно рассматривать отдельно. Для простоты принятия решения предлагаем вам небольшую сравнительную таблицу использования ADW (adaptivewebdesign) и RWD (responsivewebdesign).
1. Определение устройства
- Используется серверное или браузерное определение устройства, после чего задействуйте конкретный шаблон именно для вашего типа устройства.
- Используются медиазапросы формирующие структуру страницы относительно размеров экрана устройства. Для всех устройств используется один и тот же шаблон.
2. Оптимизация контента
- Загружается подготовленный и оптимизированный конкретно под ваше устройство контент.
- Загружается весь контент для всех типов устройств, вне зависимости от того используется он или нет.
3. Адаптация под устройство и его особенности
- Уникальные шаблоны адаптируются под каждое устройство. Изменяется поведение сайта в завмсимости от типа устройства.
- Имеет один и тот же шаблон для всех устройств. Используются одни и те же блоки, модули, медиа файлы, как для мобильного так и для десктопного просмотра.
4. Скорость загрузки
- Скорость загрузки выше, так как загружается непосредственно необходимый для определенного устройства и его разрешения экран оптимизированный под контент.
- Скорость загрузки ниже, так как пользователю нужно ждать, пока загрузится весь контент и все структурные элементы для всех разрешений экрана.
5. Разработка и запуск
- Адаптивные шаблоны могут разрабатываться на базе существующего сайта, без его изменения. Требуется более высокая квалификация разработчиков, этап проектирования и дизайна длится дольше, соответственно создание такого сатй будет более затратным.
- Требуется переработка основного сатйа, если он существует. Припроектирований и разработке сайта, нужно учитывать и оптимизировать взаимодействие пользователя сразу под все возможные устройства.