Как обнаружить мобильные устройства, попадающие на ваши веб-страницы

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

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

Предоставить ссылку на другую версию сайта

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

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

Недостатки:

  • Вы должны поддерживать отдельную версию сайта для мобильных пользователей. Поскольку ваш сайт становится больше, вы можете забыть сохранить вторую версию, и ваши сайты могут перестать синхронизироваться.
  • Вы также создаете третью версию для планшетов? Как насчет четвертой версии для носимых? Эта концепция версий для конкретного устройства может очень быстро выйти из-под контроля.
  • Вы должны поместить некрасивую ссылку вверху страницы, которую могут видеть немобильные читатели (и, возможно, нажать).

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

Использовать JavaScript

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

Использовать CSS @media Handheld

Команда CSS @media handheld кажется идеальным способом отображения стилей CSS только для карманных устройств, таких как мобильные телефоны. Это кажется идеальным решением для отображения страниц для мобильных устройств. Вы пишете одну веб-страницу, а затем создаете две таблицы стилей. Первый для «экрана» мультимедийный тип стилизирует вашу страницу для мониторов и экранов компьютеров. Второй для «портативных» стилей вашей страницы для небольших устройств, таких как эти мобильные телефоны. Звучит просто, но на практике это не работает.

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

Проблема этого метода заключается в том, что многие телефоны не поддерживают тип мультимедиа — вместо этого они отображают свои страницы с типом мультимедиа на экране. И многие старые сотовые телефоны и карманные компьютеры вообще не поддерживают CSS. В конце концов, этот метод ненадежен и поэтому редко используется для доставки мобильных версий веб-сайта.

Используйте PHP, JSP, ASP для обнаружения User-Agent

Это гораздо лучший способ перенаправить мобильных пользователей на мобильную версию веб-сайта, поскольку он не использует язык сценариев или CSS, которые мобильное устройство не использует. Вместо этого он использует серверный язык (PHP, ASP, JSP, ColdFusion и т. Д.), Чтобы посмотреть на агента пользователя, а затем изменить HTTP-запрос, чтобы он указывал на мобильную страницу, если это мобильное устройство.

Простой PHP-код для этого будет выглядеть так:

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

Кроме того, как и в случае с другими решениями, описанными выше, вам все равно придется поддерживать отдельный мобильный сайт для этих читателей! Этот недостаток необходимости управлять двумя (или более!) Веб-сайтами является достаточной причиной для поиска лучшего решения.

Используйте WURFL

Если вы по-прежнему намерены перенаправить своих мобильных пользователей на отдельный сайт, то WURFL (файл универсальных беспроводных ресурсов) является хорошим решением. Это файл XML (а теперь и файл БД) и различные библиотеки DBI, которые не только содержат новейшие данные беспроводного пользовательского агента, но также и те функции и возможности, которые поддерживают эти пользовательские агенты.

Чтобы использовать WURFL, вы загружаете файл конфигурации XML, а затем выбираете свой язык и внедряете API на своем веб-сайте. Существуют инструменты для использования WURFL с Java, PHP, Perl, Ruby, Python, Net, XSLT и C ++.

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

Лучшее решение — адаптивный дизайн

Так что, если ведение разных сайтов для разных устройств не является ответом, то что? Отзывчивый веб-дизайн.

Адаптивный дизайн — это то, где вы используете медиа-запросы CSS для определения стилей для устройств различной ширины. Адаптивный дизайн позволяет создавать одну веб-страницу как для мобильных, так и для не мобильных пользователей. Тогда вам не нужно беспокоиться о том, какой контент отображать на мобильном сайте, или не забудьте перенести последние изменения на свой мобильный сайт. Кроме того, после написания CSS вам не нужно загружать что-то новое.

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

Ссылка на основную публикацию