Главная / Блог / Полезная информация / Адаптивный дизайн сайта - что это такое и зачем он нужен?

17 Ноя 16

Адаптивный дизайн сайта — что это такое и зачем он нужен?

адаптивный дизайн сайта
Автор: admin Категория: Полезная информация

Что такое адаптивный дизайн сайта (Adaptive Design), зачем он нужен и какие задачи решает? Чем отличается мобильная версия сайта от адаптивного дизайна? Какие бывают типы адаптивной верстки? Ответы на эти вопросы вы найдете в этой статье.

Предпосылки возникновения адаптивной верстки сайта

Исследования Google показали, что в 2016 году в России мобильным интернетом ежемесячно пользуется более 52 миллионов человек. Рынок m-commerce постоянно развивается – рост в 2015 году составил 115%, в 2016 прогнозируемый рост – 86%. Доля покупок с мобильных устройств в РФ составляет от 10 до 20% от всего оборота рынка e-commerce.

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

Пример адаптивного сайта – profi-site.info

Можете зайти на наш сайт с любого мобильного устройства – он везде отображается корректно.

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

Благодаря адаптивному дизайну сайт динамически подстраивается под любое разрешение экрана, то есть его одинаково удобно просматривать с компьютера, планшета или смартфона.

Какие задачи решает адаптивный дизайн сайта?

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

Основные отличия мобильной версии сайта и мобильного приложения от адаптивной верстки

Мобильная версия сайта, равно как и мобильное приложение, решает проблему отображения сайта на смартфонах и планшетах, но имеет ряд недостатков:

  • дополнительные затраты на разработку;
  • усеченный дизайн, придется отказаться от некоторых функциональных возможностей;
  • разные адреса для обычной и мобильной версии сайта;
  • для мобильной версии потребуется создать дополнительный контент;
  • для мобильных приложений – условная доступность, поскольку приложение сначала нужно скачать и установить; кроме того – разделение трафика на сайт и приложение.

Плюсы адаптивной верстки

  • один дизайн;
  • один адрес сайта;
  • общий контент;
  • одна система управления;
  • легкость разработки.

Принципы адаптивного дизайна сайта

  • mobile-first, то есть изначальное проектирование сайта под мобильные устройства
  • flexible (fluid) images, “гибкие изображения” – гибкое значение ширины и высоты изображения, оно может растягиваться или сжиматься в зависимости от параметров устройства, с которого просматривается сайт.
  • использование media queries (медиа запросов), которые определяют такие свойства, как ширина или высота экрана устройства, области просмотра, ориентация устройства (горизонтальная или вертикальная)
  • применение гибкого макета на основе сетки (flexble, grid-based layout), который обеспечивает универсальность разметки, то есть, меняя только один css-файл, можно просто реализовать адаптивность сайта под разные типы устройства.

Типы адаптивной верстки

Перенос блоков

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

Перенос блоков

Резиновый макет

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

Резиновый макет

Простая адаптивность

Масштабирование элементов типографики и изображений. Основной минус этого макета – отсутствие гибкости, поэтому для сложных сайтов он не подойдет.

Простая адаптивность

Переключение макетов

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

Переключение макетов

Панели

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

Панели

Теги:

Комментарии:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>