Создание качественного сайта — важный шаг на пути к успеху Вашей компании
+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

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

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

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

Статьи от CapWeb

MODx. Вопросительные знаки вместо текста. Решение проблемы 10 правил успешного бренда

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

Внутренняя поисковая оптимизация сайта Креатив на службе бренда

Также говоря о продажах, часто оперируют частотой покупки. Но в данном случае важна частота потребления. Необходимо связать бренд, например, с... Подробнее >>

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

Получайте горячие новости интернет-маркетинга и вечную скидку 5%!