Хотите спросить об оптимизации Вашего сайта? Пишите, ответим, подскажем.
+7(968)000-10-11 (в Москве)

Преимущества адаптивного дизайна

Для чего нужна адаптивная верстка

Intro

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

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

Для игрока лучше всего подойдет широкий экран с хорошими графическими характеристиками и высоким разрешением. Для обычного пользователя вполне подходит небольшой гаджет. Веб-приложение должно поддерживать все эти размеры экрана. Юзабилити и впечатление пользователя от приложения или ресурса напрямую зависят от этой адаптивности. Особенно это касается сферы e-commerce. Если пользователь мобильного устройства попадает на десктопный интернет-магазин, это неизбежно оборачивается потерей лида.

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

Почему надо срочно делать адаптивный дизайн

Наиболее важные и существенные плюсы, которые Вы получаете, заказав мобильную версию сайта:

  • Положительный опыт пользователя на всех устройствах. По различным оценкам мобильный трафик растет космическими темпами. По данным издания «Ведомости», в 2014 г. рост составил 89% по сравнению с 2013 г. (из ежегодного отчета Cisco). В 2015 г. по разным источникам это порядка 50%.
  • Поисковики требуют качественный контент и лучше ранжируют не отстающие от времени ресурсы. На начало 2016 г. Google пока более чувствителен к неадаптивности сайта, но и в Вебмастере Яндекса уже появилось стандартное предупреждение о том, что страницы некорректно отображаются на мобильных устройствах.
  • Экономия по сравнению с разработкой разных приложений для устройств разных типов.
  • То же касается бюджетов на рекламу и маркетинг.
  • Улучшение индексирования в поисковиках и более эффективную SEO-оптимизацию сайта.
  • Улучшение показателей конверсии и лидогенеации с ростом СЕО-показателей, улучшением видимости в поисковиках.

Для создания качественного адаптивного дизайна следует учитывать, что не весь десктопный контент может поддерживаться в силу скорости Интернет, удобства просмотра и т. д. Разработчикам приходится затрачивать время и усилия, чтобы с помощью средств JS, CSS адаптировать или скрыть мультимедийный контент на всех страницах сайта или приложения.

Немного технической дребедени об адаптивной верстке

Media types

Mobile devices

Всё, что используется для просмотра страниц, веб-навигации, совершения каких-либо транзакций онлайн (desktops, tablets, mobiles, laptops) относится к одному из следующих медиа-типов согласно спецификации W3C:

  • Braille.
  • Embossed: used for paged braille printers.
  • Handheld: used for handheld devices (не смартфоны и планшеты).
  • Print: для страничных документов, просматриваемых на экране в режиме print preview.
  • Projection: for projected presentations, например, для проекторов.
  • Screen: в основном для компьютерных монирторов и смартфонов.
  • Speech: для синтезаторов звука.
  • TTY: for media using a fixed-pitch character grid. It includes teletypes, terminals, or portable devices with limited display capabilities.
  • TV: для устройств телевизионного типа с низким разрешением, ограниченными возможностями прокрутки экрана и с возможностью воспроизведения звука.
  • Grid: для визуальных и тактильных медиа-типов.

Media queries

Media queries – медиа-запросы – одно из лучших преимуществ CSS3. Используя эту «фичу», мы можем указать, какой стиль будет применен к просматриваемой на устройстве странице в данный момент времени. Медиа-запросы могу подключаться внешним и внутренним образом. Внешнее подключение организовать проще, при этом не подключаются стили, не используемые данным устройством, и используются через extra HTTP request. Внутренний вызов не требует extra HTTP request, но при этом полный перечень возможных стилей подгружается браузером, к тому же редактировать такой лист сложнее из-за его объемности.

Пример внешнего вызова медиа-запроса (используется на этой странице):

<link rel="stylesheet" href="/assets/css/style_768.css" media="screen and (max-width:768px)">

Пример внутреннего медиа-запроса:

body {
background: green;
}
@media all and (max-width: 480px){
body{
background: red;
}
}

Responsive layouts

Преимущества Responsive layouts:

  • Масштабирование базируется на размере экрана клиента: макет подстраивается под наилучшую оптимизацию.
  • Файл html-верстки в единственном числе обслуживать проще, чем множество шаблонов.
  • Один и тот же положительный опыт пользователя на всех устройствах.
  • Лидогенерация растет пропорционально положительному опыту юзера.

Выражения media queries для фильтрации правил CSS:

  • width: ширина текущего окна
  • height: высота текущего окна
  • device-width: ширина устройства
  • device-height: высота устройства
  • orientation: landscape или portrait
  • aspect-ratio: геометрическое соотношение сторон текущего окна
  • device-aspect-ratio: соотношение сторон устройства
  • color: количество или битность цветов
  • color-index: количество доступных цветов на устройстве
  • monochrome: количество бит на пиксел в monochrome frame buffer
  • resolution: разрешение устройства
  • scan: progressive or interlace

Инструменты

  • https://balsamiq.com
  • http://www.axure.com
  • http://draw.io
  • http://www.opera.com/developer/mobile-emulator
  • http://view.jquerymobile.com/1.4.5/demos/pages

Следующая статья: Каким должен быть сайт по недвижимости http://capweb.ru/kakim-dolzhen-byt-sajt-po-nedvizhimosti.html

Предыдущая статья: Ремаркетинг, ретаргетинг. FAQ http://capweb.ru/remarketing-retargeting-faq.html

Позиции сайта veragold.ru на декабрь 2014 г.
reative
nalytics
romotion

Статьи от CapWeb

Как правильно формировать метатеги и заголовки

Небольшая ремарка от CapWeb: ключевики keywords лучше все-таки заполнять на посадочных страницах, проверено опытом. Оптимальный размер description... Подробнее >>

Оптимизация регионального сайта в новых условиях "Котинг, котверсия, котент" Как поставить галку в MODx, чтобы не отображать ресурс в списке

Вот главная страница сайта с прокручивающимся списком заболеваний. Подробнее >>

Оставьте Вашу контактную информацию, и мы свяжемся с Вами!

Оставьте Вашу контактную информацию и мы свяжемся с Вами!