Адаптивный дизайн сайтаОсобенности адаптивного дизайна для сайта
Внимательные юзеры обращали внимание на то, что определенные веб-ресурсы по-разному отображаются на разных устройствах. К примеру, если зайти на типичный новостной сайт с ПК или ноутбука, то можно будет увидеть подробное горизонтальное и вертикальное меню, несколько полноценных колонок и крупные кнопки. Но если выполнить вход со смартфона, то пользователь сможет контактировать с сокращенным меню и одной колонкой, а большинство функциональных элементов будет скрыто.
Обывателю может показаться, что для каждого устройства предусмотрен отдельный сайт. К слову, еще 5—10 лет назад именно так и делали. Но сегодня разработчики предпочитают адаптивный дизайн сайта. Это универсальная технология, позволяющая создавать веб-страницы, которые автоматически подстраиваются под любой девайс. Ниже мы рассмотрим подробнее, что такое адаптив и как он реализовывается на практике.
Классификация концепций адаптивного дизайна сайтов
Первым массовым подходом к созданию адаптивного интерфейса стала концепция «резинового дизайна». Работала она максимально просто. После анализа параметров пользовательского дисплея контент пропорционально растягивался или сжимался. Но технология хорошо справлялась только с разными разрешениями ПК и ноутбуков, но адекватно адаптировать контент к карманным мобильным устройствам уже не смогла. Многократное сжатие делало текст и изображения слишком мелкими для восприятия.
Сегодня же используются следующие, более совершенные методики создания видов адаптивного дизайна.
Адаптивный макет.
Эта технология предполагает разработку нескольких форматов сайтов для самых распространенных разрешений. Переключение между макетами происходит автоматически во время перехода на сайт. Здесь все блоки имеют неизменяемые размеры и форму.
Отзывчивый макет.
Эта концепция реализуется путем разработки проекта страницы на базе гибкой сетки. За всеми блоками, функциональными и графическими элементами закрепляются размеры не в пикселях, а в процентном соотношении к доступной площади дисплея. В итоге сайт качественно подстраивается под устройство с любым экраном и способом ввода.
Смешанный макет.
Если стоит задача создать максимально «дружелюбный» к различным форматам дисплеев макет сайта, то может использоваться комбинированный метод. При его применении дизайнер может закреплять размеры отдельных элементов в пикселях, а другие привязывать к процентной пропорции.
При грамотной и качественной реализации любой из перечисленных адаптивных шаблонов имеет право на существование.
Основные отличия между отзывчивыми и адаптивными сайтами
Адаптивный сайтСайт с отзывчивым дизайном создается на следующих структурных принципах:
- резиновый макет;
- приоритет видимости медиазапросов;
- резиновый графический и мультимедийный контент.
На практике это реализуется с помощью технологий CSS и HTML. В результате код отлично подстраивается под любые мобильные и стационарные устройства. Но есть один существенный минус — это очень ограниченная функциональность. По сути, дизайнеру приходится работать с мобильными пропорциями и размерами макетов, добиваясь того, чтобы они хорошо отображались на больших экранах.
Адаптивный шаблон сайта создается в соответствии с фундаментальным принципом mobile first. То есть сначала создается сайт для мобильных устройств, который впоследствии усложняется и масштабируется до «взрослой» десктопной версии. Реализуется это путем «наращивания» на базу из HTML + CSS дополнительных элементов, созданных на основе CSS + JS.
Как это работает на практике
Сайт с адаптивным дизайном, при отображении на дисплее смартфона, получает только базовый функционал для взаимодействия. Почти все дополнительные функции и возможности скрываются. При входе на этот же сайт с помощью планшета на экране появляются некоторые, ранее скрытые функциональные элементы. В десктопной версии веб-ресурс будет отображать все функциональные элементы, включая динамический контент, формы обратной связи, окна для диалога с консультантом и пр.
Адаптивный дизайн средствами универсальных шаблонов
В дизайне, как известно, нет ограничений, но есть проверенные решения. Можно самостоятельно создавать адаптированные макеты, ориентируясь на собственное видение. Но большинство профессионалов все-таки ориентируются на варианты, разработанные Люком Вроблевски — главным идеологом концепции mobile first. Вот каким он видел качественный адаптивный мобильный дизайн.
Mostly Fluid (самый гибкий)
Такие макеты создаются на базе резиновой сетки, которая остается неизменной на полноразмерных экранах: при увеличении разрешения расширяются только боковые поля. При уменьшении дисплея колонки контента сжимаются до определенного «предела комфорта», а после его преодоления элементы группируются друг под другом.
Column Drop (сброс колонок)
Этот вид адаптивного макета работает следующим образом. При уменьшении дисплея колонки постепенно перегруппировываются одна под одну в вертикальном расположении. В отличие от Mostly Fluid здесь можно реализовать настраиваемую контрольную точку для плавной трансформации формата.
Layout Shifter (сдвиг макета)
Это самая сложная в реализации технология. В его рамках создается несколько контрольных точек, с помощью которых автоматически перемещаются не только колонки, но и отдельные блоки контента.
Tiny Tweaks (маленькие хитрости)
Этот вариант дизайна унифицирован для сайтов с одной колонкой. То есть он вполне подходит для различных посадочных страниц, блогов, информационных и развлекательных проектов. Он работает следующим образом. При изменении разрешения в размере меняются картинки и шрифты, а контент разделяется на отдельные блоки.
Off Canvas (за границами)
Логика этой концепции заключается в том, что на полноразмерном экране отображаются все функциональные элементы. Но при переходе на мобильный дисплей все дополнения автоматически скрываются за пределами видимости. Специальными жестами эти элементы можно вызвать или снова скрыть.
Нужно отметить, что перечисленные классические шаблоны хорошо комбинируются между собой, что дает полную свободу дизайнерам.
Подведем итоги
Просто вдумайтесь в следующие факты. Поисковые системы строго «наказывают» неадаптированные сайты. Рост мобильного трафика не остановить. Мобильных продаж становится все больше. Нужно ли в таких условиях делать удобные и функциональные сайты для всех устройств? Вопрос риторический. Но теперь вы знаете, что адаптивный сайт — это не так уж и сложно. А значит, ваши проекты имеют все шансы стать успешными.
