Адаптивный дизайн для front-end

Что такое адаптивный дизайн (adaptive)

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

Отличия фронтенд-части

Веб-сервис делится на веб-часть, фронтенд и бэкенд. Адаптивный дизайн для фронтенд-части позволяет наладить оперативную и гибкую работу с любого устройства.

Веб-часть

Веб-часть — это общедоступный клиентский интерфейс, с которым работает конечный пользователь.

Фронтенд

Фронтенд — интерфейс для внутреннего пользователя и управления сервисом. С ним работают программисты, администраторы, контент-менеджеры (например, консоль для управления сервисом, система управления сайтом).

Бэкэнд

Фронтенд связывает внутреннего пользователя с бэкэндом — серверной частью сервиса.

Ключевые отличия responsive от adaptive

Из-за сходства терминов адаптивный / отзывчивый, принято думать, что это одно и то же. На самом деле есть существенные различия между responsive от adaptive в процессе дизайна и разработки.

В отзывчивом дизайне (responsive) используется так называемая «резиновая верстка»: все элементы UI и контента масштабируются в зависимости от размера экрана. В responsive не применяется JavaScript, только CSS и HTML. Дизайн находится в рамках сетки без возможности замены одних элементов другими или смены их поведения. При загрузке отзывчивой страницы подгружаются только элементы, необходимые для текущего устройства и пользователь видит, что интерфейс перестраивается.

В адаптивной верстке обязательно используется JavaScript. Под каждое устройство создается отдельный лайаут и, соответственно, разные макеты дизайна. При загрузке адаптивная страница определяет устройство и нужный лайаут, который следует отобразить.Таким образом пользователь сразу видит интерфейс в самом удобном для работы формате.

Элементы дизайна адаптивной страницы могут быть взаимозаменяемыми. Это дает возможность расставить приоритеты в функциональности: для десктопной версии — полная, для мобильной — опциональная (полная, но в первую очередь видны самые важные опции интерфейса).

Использование adaptive

Адаптивный дизайн интерфейса используется для больших многофункциональных продуктов и требует достаточной квалификации специалистов, отзывчивый — для более «легких» сайтов, так как проще в освоении и реализации.