Уже много лет эксперты говорят, что посещаемость веб-сайтов с мобильных устройств резко возрастает. По этой причине многие компании начали разумно внедрять мобильную стратегию для своего присутствия в Интернете, создавая возможности, подходящие для телефонов и других мобильных устройств.
Как только вы потратите время на изучение того, как создавать веб-страницы для мобильных телефонови реализуя свою стратегию, вы также захотите убедиться, что посетители вашего сайта могут видеть эти дизайны. Есть много способов сделать это, и некоторые из них работают лучше, чем другие. Вот взгляд на метод, который вы можете использовать для реализации мобильной поддержки на своих веб-сайтах, а также близкую к концу рекомендацию о том, какой лучший способ добиться этого в сегодняшней сети.
Укажите ссылку на другую версию сайта
Это, безусловно, самый простой способ справиться с пользователями сотовых телефонов. Вместо того, чтобы беспокоиться о том, могут ли они видеть ваши страницы, просто поместите ссылку где-нибудь в верхней части страницы, которая указывает на отдельную мобильную версию вашего сайта. Затем читатели могут самостоятельно выбрать, хотят ли они увидеть мобильную версию или продолжить с «обычной» версией.
Преимущество этого решения в том, что его легко реализовать. Это требует, чтобы вы создали оптимизированную версию для мобильных устройств, а затем добавили ссылку где-нибудь в верхней части обычных страниц сайта.
К недостаткам можно отнести:
- Вы должны поддерживать отдельную версию сайта для мобильных пользователей. По мере того, как ваш сайт становится больше, вы можете забыть поддерживать эту вторую версию, и ваши сайты могут перестать синхронизироваться.
- Третью версию для планшетов тоже создаете? Как насчет четвертой версии для носимые? Эта концепция версий для конкретных устройств может очень быстро выйти из-под контроля.
- Вы должны разместить уродливую ссылку вверху страницы, которую немобильные читатели смогут увидеть (и, возможно, щелкнуть по ней).
В конечном счете, этот подход является устаревшим, и вряд ли он станет частью современной мобильной стратегии. Иногда это используется как временное решение, пока разрабатывается лучшее решение, но на самом деле это кратковременное временное средство.
Использовать JavaScript
В варианте вышеупомянутого подхода некоторые разработчики используют определенный тип обнаружения браузера. сценарий, чтобы определить, находится ли клиент на мобильном устройстве, а затем перенаправить его на этот отдельный мобильный сайт. Проблема с браузер обнаружения и мобильных устройств заключается в том, что существуют тысячи мобильных устройств. Попытка обнаружить их все с помощью одного JavaScript может превратить все ваши страницы в кошмар загрузки - и вы по-прежнему сталкиваетесь со многими из тех же недостатков, что и вышеупомянутый подход.
Использовать CSS @media Handheld
Команда CSS @media handheld кажется идеальным способом отображения CSS стили только для портативных устройств - например, сотовых телефонов. Это кажется идеальным решением для отображения страниц на мобильных устройствах. Вы пишете одну веб-страницу, а затем создаете две таблицы стилей. Первый для типа мультимедиа «экран» стилизует вашу страницу для мониторов и экранов компьютеров. Второй для портативных устройств стилизует вашу страницу для небольших устройств, таких как мобильные телефоны. Звучит просто, но на практике это не работает.
Самым большим преимуществом этого метода является то, что вам не нужно поддерживать две версии своего веб-сайта. Вы просто поддерживаете одно, а таблица стилей определяет, как это должно выглядеть - что на самом деле приближается к конечному решению, которое мы хотим.
Проблема с этим методом заключается в том, что многие телефоны не поддерживают тип мультимедиа - вместо этого они отображают свои страницы с типом мультимедиа экрана. А многие старые сотовые телефоны и карманные компьютеры вообще не поддерживают CSS. В конце концов, этот метод ненадежен и поэтому редко используется для доставки мобильных версий веб-сайта.
Используйте PHP, JSP, ASP для обнаружения агента пользователя
Это гораздо лучший способ перенаправить мобильных пользователей на Мобильная версия веб-сайта, потому что он не полагается на язык сценариев или CSS, которые не использует мобильное устройство. Вместо этого он использует серверный язык (PHP, ASP, JSP, ColdFusion и т. Д.), Чтобы посмотреть на пользовательский агент, а затем изменить HTTP-запрос чтобы указать на мобильную страницу, если это мобильное устройство.
Простой PHP-код для этого будет выглядеть так:
Проблема здесь в том, что существует множество других потенциальных пользовательских агентов, которые используются мобильными устройствами. Этот скрипт перехватит и перенаправит многие из них, но ни в коем случае не все. И все время добавляются новые.
Кроме того, как и в случае с другими решениями, описанными выше, вам все равно придется поддерживать отдельный мобильный сайт для этих читателей! Этот недостаток необходимости управлять двумя (или более!) Веб-сайтами является достаточной причиной для поиска лучшего решения.
Используйте WURFL
Если вы по-прежнему полны решимости перенаправить своих мобильных пользователей на отдельный сайт, тогда WURFL (Wireless Universal Resource File) - хорошее решение. Это XML-файл (а теперь и DB-файл) и различные библиотеки DBI, которые не только содержат актуальные данные пользовательского агента беспроводной сети, но и те функции и возможности, которые поддерживают эти пользовательские агенты.
Чтобы использовать WURFL, вы загружаете файл конфигурации XML, затем выбираете свой язык и внедряете API на своем веб-сайте. Есть инструменты для использования WURFL с Java, PHP, Perl, Ruby, Python, Net, XSLTи C ++.
Преимущество использования WURFL заключается в том, что множество людей все время обновляют и добавляют в файл конфигурации. Таким образом, хотя файл, который вы используете, устарел почти до того, как вы закончили его загрузку, есть вероятность, что если вы загружайте его примерно раз в месяц, и у вас будут все мобильные браузеры, которые ваши читатели обычно используют, без каких-либо проблемы. Обратной стороной, конечно же, является то, что вам нужно постоянно загружать и обновлять это - все, чтобы вы могли направлять пользователей на второй веб-сайт и устранять возникающие недостатки.
Лучшее решение - адаптивный дизайн
Итак, если поддержка разных сайтов для разных устройств - это не ответ, то что? Адаптивный веб-дизайн.
В адаптивном дизайне вы используете медиа-запросы CSS для определения стилей для устройств различной ширины. Адаптивный дизайн позволяет создать одну веб-страницу как для мобильных, так и для немобильных пользователей. Тогда вам не нужно беспокоиться о том, какой контент отображать на мобильном сайте, или не забыть перенести последние изменения на свой мобильный сайт. Кроме того, после того, как вы написали CSS, вам не нужно загружать ничего нового.
Адаптивный дизайн может работать некорректно на очень старых устройствах и браузерах (большинство из которых сегодня очень мало используются и не должны вас сильно беспокоить), но потому что это аддитивные (добавление стилей к контенту, а не удаление контента), эти читатели по-прежнему смогут читать ваш сайт, он просто не будет выглядеть идеально на их старом устройстве или браузер.