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

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

В этой статье мы обсуждаем один из удобнейших инструментов для решения этой проблемы: Device Detection

История Device Detection

Первое поколение мобильных устройств не имели DOM, CSS, JavaScript и способность переформатировать контент. В самом деле, функции браузеров телефонов в начале 2000-х были настолько ограничены, что максимальный размер HTML, который многие из них могли обрабатывать не превышал 10 KB, также многие браузеры не поддерживали изображения, и так далее. Не открывающиеся страницы в браузерах приводили к зависанию самого браузера или всего телефона. В этих условиях Device Detection стал единственным способом безопасной публикации мобильного контента, так как каждое мобильное устройство имело свои ошибки и ограничения.  Вот так с самого раннего периода развития мобильного интернета Device Detection стал неотъемлемым инструментом любого разработчика.

С Device Detection, HTTP заголовки, которые браузеры отправляют в рамках каждого запроса, являются достаточными для точной идентификации браузера или модели телефона и, следовательно, его свойств. Наиболее важным HTTP заголовком, используемым для этой цели, является user-agent заголовок. Разработчики HTTP протокола предупреждают о необходимости предоставления user-agent заголовка, и специально созданного user-agent заголовка, а именно: RFC 1945 (HTTP 1.0) и RFC 2616 (HTTP 1.1). Решения Device detection использует различные шаблоны для определения заголовков в базах данных устройств и качеств.

С появлением смартфонов, некоторые вещи изменились, и многие из ограничений, которые были у мобильных устройств, исчезли. Это позволило разработчикам использовать ярлыки и создавать полноценные сайты, которые могли частично адаптироваться к мобильным устройствам, используя адаптацию со стороны клиента.

Это привело к тому, что Device detection стало неактуальным. Благодаря возможностям JavaScript появилось очень привлекательное понятие «один размер для всех устройств». Учитывая, что адаптация на стороне клиента не требует финансовой  поддержки, этот способ стал очень популярным среди финансовых директоров. Тем не менее, мы считаем, что реальность не так проста, как кажется на первый взгляд.

Важность Device detection

В настоящие время немногие занимаются созданием мобильных сайтов с использованием только подхода адаптации на стороне клиента, технической модернизации и отзывчивого веб-дизайна (RWD). Правда, это может быть далеко не достаточно для компании, которая хочет свести к минимуму затраты на разработку, но разве это то, что действительно хочет каждая компания? Из нашего многолетнего опыта работы в сфере мобильных устройств, мы знаем одну вещь наверняка: компании хотят контроля над пользователем. Не существует двух одинаковых бизнес – моделей, отличающиеся требования будут влиять на сам сайт и размещенный на нем контент.

Мы попробуем глубже рассмотреть следующий вопрос, который заботит разработчиков и менеджеров интернет – проектов: какими бы умными они ни были, вариант «один размер для всех устройств», как правило, не отвечает всем запросам больших брендов.

Обслуживание для устройств и бизнес – запросов 

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

Другой проблемой является то, что сайт может выглядеть отлично для пользователя, который просматривает его с экрана с высоким разрешением и большой пропускной способностью. Но в процессе его создания очень мало места оставили для корректировки, которые могут быть вызваны постоянно развивающейся бизнес — моделью (не говоря уже о появление нового класса HTTP клиентов на рынке). Техническая поддержка такого сайта значительно затруднена. В качестве аналогии можно представить разработчика этого сайта, который стоит как канатоходец в воздухе на длинной проволоке на одной ноге, пытаясь руками балансировать, и одновременно удержать несколько блюд на голове.

Разработчики Device detection  в данном случае находятся в более выигрышном положении. Каждый из них имеет гораздо больше свободы в  доставке окончательного результата на различные платформы, будь то стационарный компьютер, мобильный телефон или планшетный компьютер. Они также имеют больше возможностей для решения неожиданных задач и изменений в требованиях. В качестве аналоги можно сказать, что они имеют возможность выбрать несколько путей достижения поставленной цели. Один за рулем, другой на поезде, кто — то на велосипеде, а четвертый на вертолете. Тот, что на автомобиле решил остановиться в мотеле на ночь и немного отдохнуть. Тому, что на вертолете было поручено отвезти генерального директора в Лас-Вегас на пару дней. Ничего страшного, эти изменения были неожиданными, но ситуация все еще находится под контролем.

Конечно, эта аналогия не совершенна, но довольно близка. Device detection может стоить дороже, чем разработка отзывчивого дизайна, но первое дает компании контроль. При изменении бизнес — модели, Device detection  позволяет компании перетасовать довольно много вариантов и избежать паники. Еще один взгляд на Device detection  - это то, что он является приложением к такому методу, как разделяй и властвуй. С другой стороны, отзывчивый веб-дизайн может быть очень ограниченным (особенно, если программист, который освоил все премудрости, уволился).

В то время как многие разработчики учитывают гибкий характер сети, используя Device detection, вы можете точно регулировать опыт, который отвечает требованиям пользователей и мобильных устройств, которыми они пользуются. Это часто является основным аргументом в пользу Device detection — он позволяет вам использовать небольшое количество функций для мобильных телефонов, и более расширенные решения для смартфонов.

На мой взгляд, никакой другой метод не дает такой выразительный диапазон решений. Это причина, почему Facebook, Google, eBay, Yahoo, Netflix и многие другие крупные бренды используют Device detection. Я уже писал об этом.

Скорость и эффективность

Device detection имеет ряд ключевых атрибутов в дополнение к гибкости и контролю:

• Скорость воспроизведения изображения.  Поскольку Device detection всегда предлагает правильный пакет HTML и ресурсов на сервере, браузеру остается минимум работы. Это может иметь большое значение для пользователя, и, видимо, это одна из причин, почему в последнее время Twitter отказалась от принципа адаптации на стороне клиента в пользу серверных решений. 
• Эффективность. Device detection позволяют разработчику отправить запрашиваемый контент, что значительно повышает уровень эффективности. Помните, что даже если у вас есть 3G или Wi-Fi соединение, эффективная пропускная способность доступная пользователю может быть значительно меньше, чем это должно быть. Спросите любого, кто пользовался Wi-Fi в аэропорту или просматривал сайты с мобильного телефона во время перегрузки сотовой сети. Естественно медленно загружающаяся страница значительно снижает интерес пользователя к ее посещению, по сравнению с быстро загружающейся страницей.
• Выбор языка программирования. Вы можете использовать любой язык программирования, вместо того, чтобы ограничиваться только JavaScript.

Точно настроенный контент и возможности устройства

Другая область, где Device detection имеет преимущество  - это точная настройка форматов и других ресурсов. В хорошо настроенной системе Device detection может сообщить вам точные типы носителей, совместимых с данным устройством, от простых графических форматов, таких как PNG, JPEG и SVG до более продвинутых форматов с участием видео кодеков и высокой интенсивность.

Server-Side vs. Client-Side Detection

Многие сторонники использования библиотеки JavaScript были разочарованы. Самая известная из этих библиотек — Modernizr. Часто они сочетаются с «polyfills», которые заменяют отсутствующие возможности браузера с JavaScript. Такие библиотеки очень полезны и часто сочетаются с серверным методом, но и в таком варианте существуют свои ограничения:

• Они обнаруживают только функции браузера и не могут определить физическую природу базового устройства. Во многих случаях, особенности браузера — это все, что требуется, но если, например, вы хотите поставить глубокую ссылку на приложение загрузки для конкретной версии Android OS, библиотека не поможет вам.
• Функции браузера доступны только после того, как DOM загружен, и тесты закончились, к этому времени уже слишком поздно для серьезных изменений в содержание страницы. По этой причине Device detection  в основном используется для настройки визуальных макетов.Определяемые Device detection функции могут быть сохранены в cookie и использованы в дальнейшем.
• Некоторые свойства браузера могут быть получены с помощью JavaScript.
• Некоторые свойства недоступны через Javascript, например, является ли устройство телефоном, планшетным компьютером  или стационарным компьютеров, название его модели, название производителя и максимальный HTML размер, и так далее.

В то время как Device detection накладывает некоторые нагрузку на сервер, в сравнении с стоимостью ресурсов страницы он недорог. Локально развернутые серверные решения, как правило, в разы эффективнее, чем Apache и варианты NGINX, которые основаны на C++. Облачные решения делают запрос по сети для каждого нового устройства, которое они видят.

Основные недостатки:

• Базы данных, которые они постоянно используют, требуют регулярного обновления. Продавцы обычно облегчают этот процесс, предоставляя примеры сценариев Cron, для ежедневного скачивания.
• Базы данных могут содержать неверную информацию, из-за этого часто используются неверные данные.
• Все Device detection являются коммерческими продуктами, и должны иметь лицензию.
• Не все решения подходят для персонифицированных данных, хранящихся на каждом из устройств.

Практический пример

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров