Что такое адаптивный дизайн сайта (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