Улучшение отзывчивого веб-дизайна с помощью RESS

Улучшение отзывчивого веб-дизайна с помощью RESS

От автора: в среднем больше трети посетителей просматривают ваш сайт с мобильных устройств. Только за прошлый год доля мобильных устройств выросла более чем на 20%. Итак, как же можно угодить этой части рынка?.

Отдельный мобильный сайт

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

Дни обеих версий, как мобильной, так и десктопной уже прошли. Сегодня существует огромное количество устройств с разными размерами экранов, плотностью пикселей, скоростью обработки, возможностями сети и поддержкой HTML5. И это мы еще не берем в расчет носимые гаджеты. И компании должны создавать такое множество версий сайта под каждое отдельное устройство?

Определение устройства пользователя сложная задача. А user-agent строки не только сложно разобрать, но там также нет ничего о размерах экрана, скорости сети и других свойствах.

По-хорошему вам потребуются отдельные URL’ы для каждой версии сайта, к примеру, www.site.com и m.site.com, иначе пользователь может перейти не по той ссылке, не предназначенной для его устройства. Если вы не будете внимательны, поисковики накажут вас за дублирование контента.

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

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

Отзывчивый веб-дизайн

В качестве другого способа дизайнеры и разработчики могут использовать дизайн верстки, которая реагирует на размер окна браузера (на мобильных устройствах обычно это весь экран). По методике mobile-first сайт по умолчанию использует линейный макет с меньшим количеством текста и иконкой меню в виде трех полосок. С увеличением экрана макет может быть расширен для отображения дополнительных столбцов, шрифт и расстояния могут быть увеличены, а также меню может трансформироваться в обычное и т.д.

ОВД (отзывчивый веб-дизайн) решает множество проблем для разных представлений. Мы имеем один сайт с набором своего контента, который подстраивается под бесконечное множество размеров экрана. Однако…

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

На всех устройствах отображается одна и та же (в основном) страница с ресурсами. Можно ограничить загрузку изображений с помощью фоновых изображений в CSS через медиа запросы, тег picture и атрибут rscset, но эти решения не кроссбраузерны и не решают всех проблем. Техника адаптации изображений на стороне клиента также может замедлить отрисовку страницы. Такую методику необходимо применять точечно. Например, большие изображения можно загружать на Retina экранах с большой плотностью пикселей, даже если у пользователя плохое соединение.

Некоторые возможности не так легко реализовать на стороне клиента. Рефакторинг контента достаточно сложная штука, например, разделить статью на несколько страниц. Все устройства видят одну и ту же страницу, даже если на устройствах с маленьким размером экрана она неуместна.

В среднем веб-страница весит немногим больше 2 Мб. Многие используют адаптивный веб-дизайн, но это не значит, что сайт ведет себя как надо на маломощных устройствах. Теперь создать быстрый, отзывчивый сайт стало намного важнее, Google в первую очередь учитывает производительность.

Отзывчивый Веб-Дизайн + Серверные Компоненты (RESS)

RESS был предложен Luke Wroblewski в 2011 году. Концепция использует Отзывчивый Веб-Дизайн, но дополняет его функцией обнаружения, которая служит для модификации контента, если потребуется. К примеру, вы можете:

Загружать уменьшенные изображения под маленькие размеры экрана или при ограниченном соединении.

Использовать только HTML5 видео при быстром соединении и поддержке HTML5.

Избегать флэш-игр и рекламы на iOS и большинстве Android устройств.

Переключаться на черно-белые изображения на eBook ридерах.

Снизить частоту Ajax запросов при медленном соединении.

Удалить ненужные CSS3 эффекты, если устройство не поддерживает анимацию.

Применить фолбэк к PNG изображениям, если SVG не доступны.

Предоставлять дополнительную информацию, если пользователь находится в определенной локации или стране.

RESS никогда не стать широко распространенной техникой из-за сложности функции определения – особенно на сервере. Ваш код функции определения должен быть проверен и должен постоянно обновляться при выходе нового браузера или новой функции. К счастью, существуют сторонние сервисы, такие как Netbiscuits, делающие всю тяжелую работу за вас. Сервисы постоянно обновляют информацию о последних вышедших устройствах.

Первый шаг: зарегистрировать учетную запись Netbiscuit – есть 30-ти дневная бесплатная версия для ознакомления. Вставьте Netbiscuit трек-код в шаблон вашего сайта, подождите немного, и просматривайте аналитические диаграммы устройств и посетителей:

API определения устройства на стороне клиента

Трек-код также определяет глобальный JavaScript объект dcs, который предоставляет доступ к более чем 650-ти аппаратным и браузерным параметрам, параметрам операционной системы и обнаружения сети.

Примеры. Оценка пропускной способности – шкала от 0 (очень медленное) до 20 (обычно EDGE/HSPA) до 60 (3G) до 120+ (4G/wifi):

var bandwidthScore = dcs.get('bandwidth.score'); // integer

Определяем, имеет ли устройство сенсорный экран:

var touchScreen = dcs.get('browser.cantouch'); // boolean

с высокой степенью плотности пикселей:

var pixelRatio = dcs.get('internal.browserpixelratio'); // real

Может ли устройство звонить?

var canCall = dcs.get('browser.cantelmakecall'); // boolean

Поддерживается ли SVG? Доступна ли SMIL анимация?

var svg = dcs.get('browser.css.cansvg'); // boolean
var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean

Определяем положение пользователя:

var county = dcs.get('internal.countrycode'); // двух символьная строка, например, "US"

Предлагаем совместимый HTML5 формат видео:

var videoFormat = dcs.get('video.suggestvideoformat'); // объект

Определяем браузер:

var browser = dcs.get('browser.model'); // строк, например "Firefox 38"

И последняя ли это версия:

var latest = dcs.get('browser.islatestrelease'); // boolean

API определения устройства на стороне сервера

Определение устройства наиболее полезно на стороне сервера в том случае, если есть возможность изменить ответ от сервера перед его отправкой. Код подходит под PHP, Java и .NET. PHP примеры… Поддерживает ли устройство H264 HTML5 видео, и достаточно хорошее ли соединение?

<?php
if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
    echo '<video src="video.mp4" controls></video>';
}
?>

Поддерживает ли устройство Ajax и JavaScript лучше, чем iPhone 5 (устройства со значением 100)?

<?php
if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
    echo '<script src="moderndevice.js"></script>';
}
?>

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

Автор: Craig Buckler

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Я не робот.

Spam Protection by WP-SpamFree