Разница между отзывчивым и адаптивным дизайном

Этот вопрос возникает чаще, чем Вы думаете. Его часто упоминают на форумах CSS-Tricks. И это хороший вопрос!

Отзывчивый веб дизайн стал семейным термином с тех пор, как Ethan Marcotte придумал его на A List Apart 2010; настолько, что мы считаем понимание этого термина само собой разумеющимся. Концепция отзывчивого веб-сайта является одним из самых больших «трюков» CSS в книгах и достаточно важным для того, чтобы отступить, напомнив себе, что делает отзывчивый сайт и как он отличается от адаптивного.

Краткое объяснение

Адаптивные и отзывчивые сайты похожи тем, что они меняют внешний вид в зависимости от браузера, на котором они просматриваются (более распространенное понятие: width).

Отзывчивые сайты откликаются на размер браузера в любой заданной точке. Не важно, какое значение width может быть, сайт настраивает свое расположение (и, возможно, функциональность) таким образом, который оптимизирован для экрана. Является ли браузер 300 пикселей шириной или 30000 пикселей? Не имеет значения, поскольку расположение настроится соответствующе. По крайней мере если все настроено корректно.

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

Другой способ подумать об этом - это различие между плавным и быстрым дизайном. Отзывчивый дизайн плавен, потому что макет настраивается независимо от того, на каком устройстве он просматривается. С другой стороны, адаптивный дизайн защелкивается на месте, потому что страница обслуживает что-то другое из-за браузера или устройства, на котором оно просматривается.

Более долгое объяснение

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

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

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

Отзывчивый дизайн - это средство становления устройства агностичным, в том смысле, что оно стремится создать оптимизированный опыт для любого экрана. Это мышление заставляет нас создавать сайты, которые меняют контекст в зависимости от того, как сайт потребляется в любой момент. Это означает, что наши контейнеры должны быть текучими (как при использовании процентов в качестве единичных мер), активы, которые мы обслуживаем, должны быть гибкими (например, при правильном использовании подходящих активов для правильных устройств в нужное время), и наши медиа-запросы, определяемые там, где происходит разрыв контента (в отличие от width определенного размера экрана, например, iPhone).

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

Отзывчивый лучше чем адаптивный?

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

Вас заставляют выбирать, какой из них лучше? Выбор может быть легче, если Вы знаете, что на Вашем сайте должны поддерживаться определенные устройства. Вы можете решить, что Iphone 6 – это единственное устройство, которое для Вас важно, и адаптация к нему будет намного проще и эффективнее, чем к другим устройствам. С другой стороны, отзывчивый дизайн - хорошая стратегия для будущей проверки сайта против возможности любого (возможно, еще не выпущенного) устройства на рынке.

Заключение

Как отзывчивый, так и адаптивный дизайны одинаковы в том смысле, что они являются методами борьбы с тем, что сайты часто просматриваются на разных устройствах в разных контекстах. Они просто выполняют эту функцию по разному.