Оба подхода направлены на создание сайтов, сохраняющих приятный внешний вид, удобную навигацию, легкочитаемый текст и изображения подходящего размера на любом устройстве — от смартфона и планшета до большого монитора или телевизора.
Основные различия адаптивного и отзывчивого веб-дизайна
1.
При отзывчивом веб-дизайне создается один гибкий макет сайта, в котором есть поддержка практически любых устройств. При посещении сайта загружается весь код веб-страницы, даже если отдельные большие его фрагменты не будут использоваться браузером (так как предназначены для других устройств), и изображения в высоком качестве, даже если в браузере они все равно будут динамически уменьшены для соответствия экрану устройства. Это снижает скорость загрузки сайта.
При адаптивном веб-дизайне существует несколько макетов сайта фиксированных размеров для разных устройств (например, с шириной 320 пикселей для смартфонов, 760 — для планшетов, 960 — для компьютеров; в реальности лучше вводить поддержку большего количества размеров). Тип устройства посетителя определяется на стороне сервера, и там же для него выбирается подходящий макет, содержащий только нужный в этом конкретном случае код и изображения, оптимизированные для этого размера экрана. В результате скорость загрузки сайта выше, чем при отзывчивом веб-дизайне.
2.
Если вы решили оптимизировать существующий сайт для мобильных устройств, то отзывчивый веб-дизайн потребует перестраивать весь код сайта, переписывать его почти полностью с нуля.
Адаптивный дизайн может быть внедрен на существующем сайте без столь глубоких и радикальных изменений. Это важно для больших и сложных сайтов.
3.
Отзывчивый макет помогает подстраивать сайт под любые размеры экрана, но при этом пользовательский опыт посетителя остается в целом одинаковым на любых устройствах, так как используется один гибкий макет.
Адаптивный веб-дизайн позволяет создавать отдельные макеты сайта с сильно различающимся пользовательским опытом на разных устройствах. Это актуально, например, для тех сайтов, использование которых на мобильном устройстве должно сильно отличаться от использования на компьютере, если у мобильных и настольных посетителей разные цели.
Какой из двух подходов выбрать?
Отзывчивый веб-дизайн подходит для сайтов с относительно простой функциональностью, для которых не требуется создавать сильно различающийся пользовательский опыт мобильных и настольных посетителей и которые не слишком трудно радикально переделать.
Адаптивный веб-дизайн выбирают владельцы тех сайтов, посетители которых склонны искать разную информацию и выполнять разные действия при использовании сайта с мобильных устройств и компьютеров, и тех сайтов, для которых критически важна скорость загрузки.
На практике оба подхода могут смешиваться. В частности, в адаптивном веб-дизайне применяются технологии отзывчивого веб-дизайна, позволяющие создавать гибкие макеты.
Наши статьи по теме
- Адаптивный веб-дизайн: большие преимущества и подготовка к разработке
- Как превратить сайт в машину продаж с помощью адаптивного дизайна: примеры и рекомендации
- Почему стоит использовать адаптивный веб-дизайн для разработки мобильной версии сайта
Книги по теме
- Ethan Marcotte. Responsive Web Design. Издана на русском языке: «Отзывчивый веб-дизайн», Итан Маркотт.
- Ben Frain. Responsive Web Design with HTML5 and CSS3.
- Tim Kadlec, Aaron Gustafson. Implementing Responsive Design: Building sites for an anywhere, everywhere web (Voices That Matter).
- Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.
- Luke Wroblewski. Mobile First. Издана на русском языке: «Сначала мобильные!», Люк Вроблевски.