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

Существует два подхода в верстке сайтов, которые учитывают возможность их просмотра с любого устройства - адаптивная верстка (adaptive markup) и респонсивная верстка (responsive markup) (она же отзывчивая). Понятия следуют из соответствующе отрисованных дизайнов (адаптивный и респонсив дизайн) и выбранной стратегии верстки. И хотя оба подхода могут иметь одинаковый визуальный эффект и вцелом предназначены для решения одной и той же задачи - сверстать сайт, они отличаются способом их реализации.

Респонсивная верстка

Метод респонсивной верстки заключается в том, что пользователь получает один и тот же HTML и CSS, не важно с какого устройства он посетил его. Внешний вид страниц будет отображен в зависимости от прописанных стилей и медиа-запросов. Это значит, что если вы откроете такой сайт у себя в браузере на своем компьютере и поизменяете размер окна - вы увидите, как элементы страницы перестраиваются в зависимости от ширины/высоты области просмотра. Обычно верстка таким способом подразумевает наличие нескольких брейкпоинтов в стилях с прописанными правилами при их достижении. Как правило, элементы страницы в респонсивном дизайне всегда остаются на странице и могут просто менять свое расположение.

Адаптивная верстка

Метод адаптивной верстки используется, когда есть необходимость для каждого вида устройства отображать определенный макет, схожий на остальные или совсем отличный. Это значит, что когда пользователь посещает сайт со своего устройства, первое, что происходит - идет определение этого устройства и его размеров, а дальше - в зависимости от этого, он получает соответствующий HTML и CSS. Количество таких сверстанных макетов диктуется дизайном и требованиями проекта. Часто их делают три - под десктоп, планшет и мобильные устройства, однако существуют и более разнообразные и точные виды. Не редко определение основных видов макетов осуществляется путем предварительной аналитики на предмет того, с какого устройства сайт наиболее посещаем.

Плюсы и минусы респонсивного дизайна

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

Минусом респонсивного дизайна является большое количество лишнего кода, поскольку CSS для всех устройств един и будет загружаться не зависимо от девайса. Результат этого - медленная загрузка страницы, потребность в постоянной оптимизации, создании критических стилей. А если дизайнером было решено убрать/показать какой-либо из элементов страницы - пользователь получит еще и лишний (скрытый) HTML-код.

Однако, несмотря на недостатки, способ респонсивной верстки является предпочтительным решением для большинства сайтов, как более гибкий, универсальный и менее ресурсозатратный.

Плюсы и минусы адаптивного дизайна

Для дизайнеров отрисовать несколько видов страницы - обычная работа, которая мало зависит от того, будет ли сайт сверстан адаптивно или респонсивно, разве что в каких-нибудь UI-нюансах. Для фронт-энд разработчиков имплементация такого вида верстки является непростой задачей. Каждый макет (для каждого выбранного устройства) должен быть сверстан отдельно, должен иметь свою разметку и стили. Такую верстку тяжелей поддерживать - ведь, если меняется внешний вид элемента страницы - необходимо его поменять в каждой из версток.

Однако, у такого подхода есть очевидный плюс - пользователь получит именно тот HTML и CSS, которые будут соответствовать его устройству. Нет лишнего кода в разметке, стили только те, которые нужны для данного девайса - все работает намного шустрее и легче. Метод верстки адаптивным дизайном обычно является следствием развития и оптимизации сайта. К примеру, аналитически было определено, что наибольшая конверсия идет от пользователей мобильных устройств - тогда имеет смысл отверстать отдельную версию сайта под данный вид девайса без лишних десктопных стилей и медиа-правил.