Как обнаружить хиты с мобильных устройств на веб-страницах

Перенаправить мобильные устройства на мобильный контент или дизайн

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

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

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

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

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

Недостатки:

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

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

Использовать 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 вам не нужно загружать что-то новое.

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

Оцените статью
Solutics.ru
Добавить комментарий