Виды макетов адаптивного дизайна

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

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

Существует несколько вариантов макетов адаптивного дизайна, использующихся веб-мастерами:

• Резиновый. Макет считается самым простым из всех возможных и реализуется с помощью адаптивных CSS-фреймворков. Блоки при использовании такого вида дизайна сжимаются, подстраиваясь под ширину используемого экрана, если это невозможно, то блоки перестраиваются в ленту. Такой результат достигается тем, что вместо статических показателей ширины блока используются относительные, то есть процентное соотношение.

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

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

• Адаптивность «малой кровью». Получил такое название в связи со своей простотой. Такой вариант макета предпочтителен для простых сайтов. Адаптация под размеры экрана достигается масштабированием элементов и блоков сайта. К сожалению, этот вариант не обладает должной гибкостью, потому не отличается популярностью.

• Переключение макетов. Данный вид подразумевает создание отдельного макета под разные показатели экрана. Очень трудоемкий и потому непопулярный метод. При изменении характеристик экрана выдается макет сайта, наиболее подходящий для текущих размеров.

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