Что такое адаптивный/responsive дизайн сайта?

 In Веб технологии и сайты

A

даптивный дизайн сайта 

Согласно исследованиям от 2015 года, доля мобильных пользователей в Рунете составляет около 40%, а мире — более 50%. Каждый год идет значительный прирост, который вы легко заметите на улицах городов: почти все люди, не отрывающиеся от телефона или планшета в общественных местах, серфят по сети или только что закрыли браузер.

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

Адаптивный веб-дизайн (Responsive Web Design) — дизайн веб-сайтов и страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы сайт было удобно просматравить с мобильных и планшетов, с различных экранов и форматов любого разрешения (iOS, Android, iPad Retina, FullHD, др.), т.е веб-сайт, созданный по технологии адаптивного веб-дизайна универсален, и не нужно создавать отдельные версии сайта для отдельных видов устройств. Один сайт может прекрасно работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств[1].

Всё для пользователей

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

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

Достоинства и недостатки адаптивного дизайна

Раз уж мы сняли с адаптивного дизайна нимб, посмотрим объективно его достоинства и недостатки. Вам это будет полезно, потому что лучшие конструкторы сайтов обязательно поставят перед вами вопрос: адаптивный или обычный?

Достоинства:

  • Один сайт для разных платформ. Не нужно тратиться на создание мобильной версии или приложения
  • Увеличение количества посетителей за счет мобильных пользователей
  • Эффективное отображение на новейших устройствах с разрешением Retina/Full HD.

Недостатки:

  • На сайте может быть масса информации, которая замедляет загрузку страницы
  • Скроллинг больших страниц превращается в мало увлекательное соревнование «Найди нужное место»
  • Отсутствие возможности посмотреть полную версию сайта.

Основные принципы в отзывчивом дизайне:

  • применение гибкого макета на основе сетки  grid-based layout)
  • использование гибких изображений (flexible images)
  • работа с медиа-запросами (media queries)

в дополнение к этому в адаптивном дизайне:

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

По материалам: wikipedia.org/wiki/Адаптивный_веб-дизайн, uguide.ru

Recent Posts

Leave a Comment

Start typing and press Enter to search