Як виявити хіти з мобільних пристроїв на веб-сторінках

Як виявити хіти з мобільних пристроїв на веб-сторінках

Вже кілька років експерти кажуть, що трафік на сайти від відвідувачів на мобільних пристроях різко збільшується. З цієї причини багато компаній розумно почали використовувати мобільну стратегію для своєї присутності в Інтернеті, створюючи досвід, який підходить для телефону та інших мобільних пристроїв.

Після того, як ви витратили час на вивчення дизайну веб-сторінок для мобільних телефонів і реалізацію своєї стратегії, ви також захочете переконатися, що відвідувачі вашого сайту зможуть побачити ці дизайни. Є багато способів зробити це, і деякі працюють краще, ніж інші. Ось подивіться на метод, який ви можете використовувати для реалізації мобільної підтримки на ваших сайтах, а також в кінці рекомендації, як найкраще домогтися цього в сучасній мережі.

Надати посилання на іншу версію сайту

Це, безумовно, найпростіший спосіб впоратися з користувачами мобільних телефонів. Замість того, щоб турбуватися про те, чи можуть вони бачити ваші сторінки чи ні, просто помістіть посилання десь у верхній частині сторінки, яка вказує на окрему мобільну версію вашого сайту. Потім читачі можуть самостійно вибрати, чи хочуть вони бачити мобільну версію або продовжити «нормальну» версію.

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

Недоліки:

  • Ви повинні підтримувати окрему версію сайту для мобільних користувачів. Оскільки ваш сайт стає більше, ви можете забути зберегти другу версію, і ваші сайти можуть втратити синхронізацію.
  • Ви також створюєте третю версію для планшетів? Як щодо четвертої версії для носимих? Ця концепція версій для конкретного пристрою може дуже швидко вийти з-під контролю.
  • Ви повинні помістити негарне посилання вгорі сторінки, яке можуть бачити немобільні читачі (і, можливо, натиснути).

Зрештою, цей підхід є застарілим і навряд чи буде частиною сучасної мобільної стратегії. Іноді він використовується в якості тимчасового виправлення, поки розробляється краще рішення, але на даний момент це дійсно короткострокова допомога.

Використовувати JavaScript

У різновиді вищезгаданого підходу деякі розробники використовують сценарій виявлення браузера певного типу, щоб визначити, чи знаходиться клієнт на мобільному пристрої, а потім перенаправити його на цей окремий мобільний сайт. Проблема з виявленням браузера і мобільними пристроями полягає в тому, що існують тисячі мобільних пристроїв. Спроба виявити їх всіх за допомогою одного JavaScript може перетворити всі ваші сторінки на кошмарний закачування - і ви як і раніше схильні до багатьох з тих же недоліків, що і вищезгаданий підхід.

Використовуйте CSS @ media Handheld

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


Найбільша перевага цього методу в тому, що вам не потрібно підтримувати дві версії вашого сайту. Ви просто підтримуєте його, і таблиця стилів визначає, як він повинен виглядати - що фактично наближається до кінцевого рішення, яке ми хочемо.

Проблема цього методу полягає в тому, що багато телефонів не підтримують тип мультимедіа - замість цього вони відображають свої сторінки з типом мультимедіа на екрані. І багато старих стільникових телефонів і кишенькових комп'ютерів взагалі не підтримують CSS. Зрештою, цей метод ненадійний і тому рідко використовується для доставки мобільних версій веб-сайту.

Використовуйте PHP, JSP, ASP для визначення агента користувача

Це набагато кращий спосіб перенаправити мобільних користувачів на мобільну версію веб-сайту, оскільки він не використовує мову сценаріїв або 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 вам не потрібно завантажувати щось нове.

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