Когда только интернет начал входить в наши жизни, мониторы компьютеров представляли из себя простые устройства с одинаковым разрешением экрана. Дизайн было сделать очень легко, фиксированная ширина гарантировала одинаковый вид сайта у всех пользователей, каким он и был задуман веб-мастером. С тех пор много что поменялось в мире, выросли города, разрослись курорты, был построен Олимпийский Парк и Сочи Парк. Как доехать из Сочи до Олимпийского парка подскажет специальный сайт, можно заказать путевку, билеты на мероприятия, выбрать отель в курортном городе, в общем присутствует вся необходимая информация для туриста. Для нас же, в настоящий момент, он является ярким представителем современного адаптивного дизайна, но давайте обо всем по порядку.
Делать статический сайт с фиксированным дизайном уже мало актуально, так как мониторы пользователей имеют широкий разбег по разрешению экранов, а в интернет выходят с различных устройств. Что же делать, чтобы пользователи пришедшие на сайт могли пользоваться им в удобном виде с компьютеров, планшетов и смартфонов? Вышли из этого положения, став делать мобильную версию сайта с урезанным функционалом. Рост популярности мобильных устройств шел огромными шагами и уже не все портативные устройства могли правильно отображать дизайн, да и пользователям хотелось видеть все же полноценный сайт со всем функционалом. Так родилась идея делать одну версию сайта, но хорошо работающую на любых устройствах, так получил рождение «адаптивный». До сих пор еще не все понимают смысл адаптивного дизайна, путая его с резиновым и отзывчивым, в этом и попробуем разобраться.
Резиновый дизайн
После статического сайта первым, как раз появился резиновый дизайн, главной целью которого стало автоматическая подстройка ширины сайта под разные разрешения мониторов компьютеров и ноутбуков. Верстка выполнялась не в пикселях, а в процентном соотношении, тем самым сайт занимал всю полезную область экрана на различных дисплеях. Применение резиновой верстки получило широкое распространение до тех пор, пока для выхода в интернет не стали применять мобильные девайсы, резиновый дизайн уже не мог корректно на них работать, да и на мониторах компьютеров большого разрешения внешний вид сайте переставал быть привлекателен. Опять понадобились новые решения.
Адаптивный дизайн
Чтобы внешний вид сайта хорошо смотрелся на абсолютно любых разрешениях и платформах пришлось вернутся к варианту, когда использовалась дополнительная мобильная версия. Только теперь добавилась не одна, а несколько вариантов под разные разрешения, к тому же они обладали некоторыми резиновыми свойствами и все это реализовывалось в стилях, которые автоматически переключались в зависимости от устройства просмотра. Так появился адаптивный дизайн, великолепно работающий на всех видах современной техники.
Отзывчивый дизайн
Это более усовершенствованная версия адаптивного дизайн, главное его отличие является в полном резиновом исполнении, в том числе и картинок, может манятся расположение блоков, срываться и показываться или видоизменяться различные элементы. Например, горизонтальное меню на компьютере преобразуется в боковое на ноутбуке, а в мобильном виде вообще свернется в выпадающий список. Отзывчивый дизайн впечатляет своими возможностями, но в тоже время имеет свои недостатки, некоторые старые устройства просто-напросто его поддерживают и вес страниц могут замедлять работу слабых машин. Какой дизайн использовать ложится на плечи веб-мастера и главным критерием выбора выступает задача, которую будет решать сайт, от этого и нужно исходить.
