Отзывчивый дизайн против адаптивного: как выбрать между ними?
Адаптивный дизайн все чаще позиционируется как золотой стандарт для создания новой линейки веб-приложений. Однако из-за сложностей, возникающих из-за использования одного и того же кода в каждой версии веб-сайта, бренды обращаются к альтернативе технологии RWD, известной как адаптивная доставка или дизайн. Как бы вы выбрали между ними двумя? Эта статья о том же.
Отзывчивый веб-дизайн уже не новость. Сообщество веб-дизайнеров, техническое сообщество и даже среднестатистический самопровозглашенный веб-фрик теперь знают, что адаптивный дизайн — это путь вперед. Смартфон, устройство, изменившее правила игры, действительно заставил веб-дизайнеров создавать веб-сайты, которые могли бы автоматически реагировать и адаптироваться к любому устройству с любым размером экрана, и таким образом родился адаптивный веб-дизайн. С помощью методов RWD макет сайта можно оптимизировать в соответствии с размером экрана устройства, на котором он просматривается. Тогда откуда берутся разговоры об адаптивном дизайне?
Для непосвященных оба модных слова могут показаться взаимозаменяемыми терминами для одной и той же техники. Однако по мере того, как все больше и больше трафика поступает с мобильных устройств, для издателей становится все более важным знать различия между ними и выбирать лучшее для своего сайта. Кроме того, опрос Millenial Media и comScore, проведенный в США, показывает, что 56% онлайн-контента в настоящее время потребляется через смартфоны и планшеты, а остальные 44% — через настольные компьютеры. И сдвиг продолжает ускоряться. Таким образом, это раз и навсегда решает важность наличия сайта, хорошо подходящего для мобильной аудитории. Теперь вернемся к вопросу: как выбрать между ними?
Какая разница?
Самый простой способ выбрать один вариант из двух — это понять различия и преимущества, которые предлагает один по сравнению с другим.
В то время как адаптивный дизайн — это подход на стороне клиента, при котором вся страница доставляется клиенту (браузеру устройства), адаптивный дизайн обычно выполняется на стороне сервера, где сервер сначала определяет атрибуты устройства, как правило, с помощью подключаемых модулей на стороне сервера или пользовательского пользовательского интерфейса. обнаружение агента, а затем загружает версию сайта, оптимизированную для его размеров и собственных функций. Таким образом, адаптивная доставка использует предопределенные макеты, созданные для различных размеров экрана. Когда определяется определенный размер экрана, соответствующий макет активируется и сопоставляется с таблицей стилей. В адаптивном дизайне макеты меняются на основе точек останова.
Существует также другая альтернатива — адаптивный подход на стороне клиента, при котором обширный JavaScript используется для оснащения веб-сайтов расширенными функциями и настройками. Немного похожий на адаптивный веб-дизайн, этот тип доставки работает на стороне клиента или в браузере пользователя, который обнаруживает различные устройства и загружает соответствующий шаблон для пользователя. Преимущество здесь в том, что для использования на всех устройствах требуется только один набор HTML и JavaScript, что значительно упрощает внедрение изменений.
Отзывчивый против адаптивного: какой выбрать?
Одно из больших преимуществ адаптивного дизайна, которое мгновенно сделало его популярным, заключалось в том, что единая кодовая база хорошо подходила как для настольных компьютеров, так и для мобильных пользователей. Это сделало жизнь разработчика проще, поскольку почти избавило от кошмарного опыта работы с несколькими версиями кода для разных типов устройств. Однако одинаковый код для обоих устройств означает, что веб-сайт, запускаемый на смартфоне, будет иметь тот же размер и сложность, что и версия для настольного компьютера, что является основной причиной того, что адаптивные веб-сайты ведут себя странно и раздуты на мобильных устройствах.
С другой стороны, используя адаптивный подход, сервер может выбирать, как оптимально отображать страницы, удаляя или добавляя функциональные возможности на лету, на основе обнаруженного устройства и информации о пользователе.
Преимущества можно резюмировать следующим образом:
- Разработчикам не пришлось бы воссоздавать веб-сайт с нуля, как это было бы необходимо при переходе на адаптивный сайт. Большинство веб-сайтов со временем становятся слишком сложными, когда одна функциональность добавляется поверх другой, и сбрасывать со счетов все усилия — нежизнеспособный вариант. Этап проектирования и тестирования особенно сложен, поскольку сложно настроить пользовательский интерфейс для каждого устройства или контекста.
- Адаптивные веб-сайты быстрее и иногда более удобны для пользователя. Причина достаточно проста. Поскольку адаптивная доставка работает путем передачи только определенных ресурсов устройства, изображения и мультимедийный контент могут быть оптимизированы на лету в соответствии с разрешением и размером экрана.
Адаптивность на стороне сервера предлагает отдельные шаблоны для каждого устройства, что обеспечивает более высокий уровень настройки и более быструю загрузку веб-страниц. Кроме того, он совместим с различными серверными плагинами, которые доступны для популярных систем управления контентом и систем электронной коммерции, таких как Magento. Однако этот подход требует значительных изменений в серверных системах, и если у вас ограниченный бюджет, это может оказаться немного болезненным. Вам потребуется управлять несколькими шаблонами, что отразится на стоимости обслуживания. Проблемы с производительностью также могут возникнуть, когда серверы находятся под большой нагрузкой.
Нижняя линия
Веб-сайты с большим количеством контента, где нет большой разницы в намерениях пользователей между настольными и мобильными пользователями, обычно выбирают адаптивный дизайн. Однако, если вы разрабатываете веб-сайт, на котором намерения мобильных пользователей значительно отличаются от целевой аудитории настольных компьютеров, адаптивный дизайн будет лучшим выбором. Примером являются сайты электронной коммерции.
Кроме того, если веб-мастер выбирает адаптивный дизайн, он или она может дополнительно оптимизировать взаимодействие с пользователем, используя дополнительные функции, которые предлагают эти устройства, например, определение местоположения. Именно поэтому 82 процента из 100 лучших глобальных сайтов Alexa используют какое-либо обнаружение на стороне сервера для предоставления контента.
Для большинства организаций хорошо работает адаптивный дизайн в сочетании с адаптивной доставкой. Контентная часть сайта использует адаптивный подход, позволяющий читателям получать контент удовлетворительным образом, независимо от того, на каком устройстве они находятся. С другой стороны, части сайта с высокими намерениями хорошо работают благодаря адаптивной доставке. Ключ в том, чтобы найти баланс между обслуживанием ваших пользователей и достижением бизнес-цели.
Веб-дизайн — одна из самых востребованных профессий на рынке прямо сейчас. Согласно данным о занятости, предоставленным Бюро статистики труда, перспективы трудоустройства веб-разработчиков составляют 20%, что выше среднего. В отчете USNews о лучших вакансиях за 2014 год работа веб-дизайнера входит в тройку лучших профессий в области технологий. Таким образом, для начинающего веб-дизайнера знание нюансов дизайна, описанных выше, может быть очень полезным.