Адаптивный дизайн стал необходимой и стандартной частью инструментария любого веб-дизайнера. Любой современный проект обязан быть адаптивным хотя бы отчасти, чтобы считаться успешным.
Современный адаптивный дизайн – это не просто размещение элементов на разных по размерам экранах, это своего рода творчество, где постоянно появляются новые способы и приемы.
С этой точки зрения возможно и даже необходимо рассмотреть несколько примеров, которые находятся на переднем крае великолепного адаптивного веб-дизайна.
The Washington Post
Одной из сложнейших задач современного дизайна является перенесение крупного сайта на небольшие мониторы, не теряя при этом его уровня конверсии и интереса со стороны пользователей.
В то время, как десктопная версия сайта является многоколоночной, планшетная и мобильная его версии отлично справляются с сжатием и эффективным распределением контента на своих экранах.
99U
Это онлайн-магазин для профессионалов от Adobe. Его отличает великолепная простота отображения на экране любого размера.
Использование светлого фона и крупного шрифта делает этот сайт простым в восприятии с любого устройства. Отличительной чертой является то, что в мобильной версии сайта футер спрятан в меню-гамбургере. Этот простой и хитрый прием позволяет сэкономить пространство для контента.
Vox
Vox – это новостной сайт, навигация которого отличается в его мобильной версии.
Вместо повсеместно используемого гамбургера, меню сайта просто сжимается при отображении его на мобильном устройстве. Но вместо просто сжимающегося меню, его элементы исчезают при уменьшении экрана переходя в пункт «Больше» («More»).
Etsy
Интересной «фишкой» этого сайта является то, что фотокарты в несколько колонок трансформируются в текстовый список в мобильной версии.
Honda
Компания имеет несколько направлений производства, но это не мешает ей правильно представлять всех их на своем веб-ресурсе вне зависимости от устройства, на котором он отображается. На сайте для разграничения разных видов продукции используются разные цвета. Этот простой пример позволяет пользователю сразу найти то, что его интересует.
Адаптивная революция
Если взглянуть на любой упоминавшийся в этой статье сайт, можно увидеть, что ни один прием его дизайна не является революционным. Но, при этом, каждый использует свой способ, создающий собственную философию сайта.
Эти сайта не могут считаться революционными, но они являются частью этой революции.