Адаптивный дизайн сайта - что это такое и для чего он нужен

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

Адаптивный дизайн сайта - что это такое и для чего он нужен

Разработка даже относительно небольшого сайта - это сложный процесс, который включает в себя верстку макета, написание программного кода различных модулей, создание дизайна (внешнего вида) и другие действия. При этом разработчики должны учитывать множество разных нюансов, к примеру, возможность просмотра страниц сайта с устройств, сильно отличающихся друг от друга по разрешению и размеру дисплея. В идеале сайт должен без каких-либо проблем просматриваться с разных по формату мониторов обычного ПК, с планшетов, со смартфонов, ноутбуков.

Адаптивный дизайн – это разработка такого макета сайта, который будет автоматически подстраиваться под характеристики дисплея устройства. К примеру, если интернет-ресурс просматривается с широкоформатного монитора обычного ПК, то область основного контента должна максимально расширяться, заполняя большое количество свободного пространства. Если для просмотра используется смартфон, то со страницы должны убираться лишние и второстепенные элементы. При этом расположение структурных блоков на странице также меняется. Все это делается для того, чтобы обеспечить более удобный просмотр страниц сайта (при просмотре с мелких дисплеев пользователи не должны часто масштабировать страницу, чтобы прочитать нужное слово или нажать на нужную ссылку).

Еще несколько лет назад адаптивный веб-дизайн практически не использовался. Связано это было с тем, что большинство пользователей просматривали сайты при помощи стационарных компьютеров, параметры дисплея у которых были приблизительно одинаковыми. Однако с течением времени увеличивалось число смартфонов и планшетов на душу населения. Кроме того, постоянно «росла» диагональ среднестатистического монитора. Таким образом, люди стали просматривать сайты с совершенно разных по характеристикам дисплеев. И возникла необходимость разработки такого макета, который одинаково хорошо отображал сайт на разных устройствах.

Не стоит путать адаптивную версию сайта и так называемые мобильные приложения, которые сегодня разрабатываются для многих крупных интернет-проектов. Отличий между ними довольно много. Кроме того, мобильные приложения обладают рядом недостатков. Во-первых, отдельно взятое приложение работает только на отдельно взятой операционной системе. Поэтому для каждой ОС придется разрабатывать собственную версию приложения. К примеру, приложение от vk.com для Андроида и для iOS – это две совершенно разные программы. Адаптивная версия работает на всех ОС одинаково. Во-вторых, приложение нужно скачивать и устанавливать. Соответственно, пользователю нужно тратить время и силы на скачивание и установку (далеко не все на это пойдут). Адаптивная версия сайта будет работать напрямую из браузера. В-третьих, приложение обычно разделяет трафик интернет-ресурса. Другими словами, люди, пользующиеся приложением, могут не учитываться статистикой посещаемости. С адаптивной версией таких проблем нет. В-четвертых, необходимо интегрировать контент с основного сайта в приложение. На это уйдет большое количество сил и времени.

Основные принципы адаптивного веб-дизайна

Теперь перечислим основные принципы адаптивного веб-дизайна на примере проектирования макета для просмотра сайта на смартфоне:

  1. Создание гибкого макета, который автоматически меняет расположение структурных блоков (сайдбаров, области основного контента, меню) при изменении разрешения дисплея и изменении типа устройства, с которого происходит просмотр сайта.
  2. Использование так называемых гибких изображений (автоматически меняют свой размер в зависимости от разрешения дисплея и типа устройства).
  3. Корректная обработка медиазапросов и различных действий пользователей.
  4. Постепенное улучшение и доработка макета.

Как правило, при создании адаптивного дизайна разработчики «заставляют» съезжать вниз отдельные структурные блоки страниц (при незначительном изменении размера дисплея происходит простое сужение, при значительном – правый блок проваливается вниз). Таким образом, 3-колоночный макет становится более компактным 2-колоночным, а 2-колоночный – более компактным одноколоночным. Кроме того, может быть использовано боковое выдвигающееся меню (как у адаптивной версии Вконтакте). В этом случае будет экономиться довольно много места под область основного контента.