Здесь заказывают адаптивный дизайн для сайта!

Главная / Статьи / Здесь заказывают адаптивный дизайн для сайта!

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

Intro

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

Статистика приведена за последний квартал на момент записи видео (март 2018 г.), по Google Analytics и AT Internet – за последний месяц.

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

Для игрока лучше всего подойдет широкий экран с хорошими графическими характеристиками и высоким разрешением. Для обычного пользователя вполне подходит небольшой гаджет. Веб-приложение должно поддерживать все эти размеры экрана. Юзабилити и впечатление пользователя от приложения или ресурса напрямую зависят от этой адаптивности. Особенно это касается сферы 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

Некоторые приемы адаптивного дизайна

Этот блок было решено добавить 15.02.2020 г. после изучения данных Google Search Console, согласно которым, эту страницу чаще находят по информационным запросам.

Есть несколько типовых подходов к созданию адаптивного сайта:

использование готового шаблона с адаптивностью — подходит новичкам и тем, кому нужно что-то быстро запустить, обновить;
Bootstrap — готовые шаблоны вроде BOOM! для MODx Revo или новая верстка — удобно верстать колонками, не заботясь о стилях, т. к. все прописано в готовых библиотеках, минус — размер файлов, много лишнего кода;
написание стилей под конкретный шаблон, адаптация сайта с нуля вручную (зачастую современные сайта проектируются сразу под все возможные экраны, в некоторых нишах необходима парадигма mobile first, но в данном случае рассматриваем ситуацию, когда нужно адаптировать desktop version).

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

Добавление строки viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Ширина 100%

Если у сайта на десктопе фиксированная ширина, например, 1200px, для экрана менее 1200px через медиа-стили необходимо задать общую ширину блока 100%, для некоторых элементов может понадобиться приэтом overflow:hidden.

Перевод абсолютных величин в относительные

Для шрифтов можно использовать em, для отступов — проценты, а также vw, hw. Также, уменьшая ширину экрана в отладчике и сохраняя, например, ширину левой или правой колонки до момента, когда ее необходимо будет скрыть или схлопнуть, удобно применять задание ширины в виде calc (100% - 300px). При этом важно не забывать о пробелах до и после знаков в скобках, иначе конструкция не сработает.

Перенос текста

В узких колонках могут потребоваться переносы, например, такие:

.capweb-bw {word-wrap: break-word;}

Toggle

При ширине меньше определенного порога, например, 640px (нужно тестировать для конкретного сайта) приходит пора скрывать меню и показывать toggle.

Это обычно копия того же меню с другими стилями (чтобы пункты выстроились в колонку, имели соответствующие размеры и т. д.), которому задается видимость скриптом, отслеживающим нажатие toggle, самому "переключателю" задается display:block.

toggle

Пример простейшего кода обработки toggle из пакета uikit с небольшими доработками, требующий лишь наличия jQuery:

var t=1,s7=1;jQuery(".uk-navbar-toggle").on({click:function(){t?(t=!1,jQuery(".uk-offcanvas").css("display","block")):(jQuery(".uk-offcanvas").css("display","none"),t=!0,jQuery(".uk-navbar-toggle").css("left","0"))}});jQuery(".uk-navbar-toggle").hover(function(){s7=0},function(){s7=1});jQuery(".outer").on({click:function(){!t&&s7&&(jQuery(".uk-offcanvas").css("display","none"),s7=!1,t=!0)}});

Валидная верстка видео с Youtube

Примеров кода в Интернете туча, приведем простейший вариант, может кому пригодится:

<div class="top20 bot20 video-responsive divvideo">
<iframe src="https://www.youtube.com/embed/w1aQczCRpss" style="border:none;" allowfullscreen=""></iframe>
</div>

.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-responsive iframe,.video-responsive object,.video-responsive embed{position:absolute;top:0;left:0;width:calc(100% - .5em);height:100%}