Респонсивный и адаптивный дизайн — это метод по которому веб-страница подстраивается под конкретный размер экрана.
Если коротко...
Респонсивный дизайн можно представить как резину, когда содержимое сайта растягивается и сжимается одновременно с изменением размеров окна браузера.
Адаптивный дизайн имеет четкие ограничения когда содержимое страницы переключается на новый, допустим более компактный (при сжатии браузера) вид.
Рассмотрим более подробно
Сайты имеющие респонсивный дизайн обычно без полей, скорее они имеют заданные отступы. Так технология разметки позволяет задать расстояние от края экрана до начала блока и при этом изменять содержимое блока.
Адаптивные сайты сделаны наоборот. Содержимое блока является строго заданным и имеют точную минимальную и максимальную ширину. А поля вокруг содержимого уменьшаются и увеличиваются в зависимости от размера браузерного окна.
Что удобнее?
Респонсивный дизайн не обеспечивает достаточного контроля над размером экрана. В связи с этим могут быть проблемы с корректностью расположения блоков. Это особенно важно при внедрении рекламных блоков на сайт.
В адаптивном дизайне используется несколько макетов для адаптации к разным размерам экрана. Обычно это размер 320px, 480px, 760px, 960px, 1200px и 1600px — это наиболее популярные переходы размеров экрана от мобильного до десктопного. Что позволяет контролировать корректное отображение всех блоков на всех экранах.
Скорость и производительность
Респонсивный дизайн требуется больше времени для загрузки на мобильный телефон, что особенно плохо при медленном интернет соединении.
В адаптивном дизайне подгружается конкретная адаптивная сетка и её содержимое, поэтому загрузка происходит в разы быстрее.
Итог
На данный момент чаще используется адаптивный дизайн. В большей степени это связано с часто используемой мобильной версией сайта. Адаптивный дизайн позволяет создавать лучший пользовательский интерфейс для соответствующего устройства.