Cum să detectați dispozitivele mobile care vă lovesc paginile web

click fraud protection

De ani buni, experții spun că traficul către site-uri web de la vizitatori de pe dispozitive mobile a crescut dramatic. Din acest motiv, multe companii au început inteligent să adopte o strategie mobilă pentru prezența lor online, creând experiențe potrivite pentru telefon și alte dispozitive mobile.

Odată ce ați petrecut timpul învățând cum să proiectarea de pagini web pentru telefoane mobileși, punând în aplicare strategia dvs., veți dori, de asemenea, să vă asigurați că vizitatorii site-ului dvs. pot vedea aceste modele. Există multe modalități prin care puteți face acest lucru și unele funcționează mai bine decât altele. Iată o privire la metoda pe care o puteți utiliza pentru a implementa asistență mobilă pe site-urile dvs. web - împreună cu o recomandare aproape de sfârșit pentru a afla care este cea mai bună metodă pentru a realiza acest lucru pe internetul de astăzi.

Furnizați un link către o altă versiune de site

Aceasta este, de departe, cea mai ușoară metodă de gestionare a utilizatorilor de telefoane mobile. În loc să vă faceți griji dacă vă pot sau nu să vă vadă paginile, pur și simplu puneți un link undeva lângă partea de sus a paginii care indică o versiune separată pentru mobil a site-ului dvs. Apoi, cititorii pot selecta automat dacă doresc să vadă versiunea mobilă sau să continue cu versiunea „normală”.

instagram viewer

Avantajul acestei soluții este că este ușor de implementat. Vă cere să creați o versiune optimizată pentru mobil și apoi să adăugați un link undeva în partea de sus a paginilor normale ale site-ului.

Dezavantajele sunt:

  • Trebuie să mențineți o versiune separată a site-ului pentru utilizatorii de telefonie mobilă. Pe măsură ce site-ul dvs. devine mai mare, este posibil să uitați să mențineți a doua versiune, iar site-urile dvs. nu ar putea fi sincronizate.
  • Creezi și o a treia versiune pentru tablete? Ce zici de a patra versiune pentru portabile? Acest concept de versiuni specifice dispozitivului poate scăpa de sub control foarte repede.
  • Trebuie să puneți un link urât în ​​partea de sus a paginii, pe care cititorii care nu sunt mobili îl pot vedea (și, eventual, faceți clic pe).

În cele din urmă, această abordare este una învechită, care este puțin probabil să facă parte dintr-o strategie modernă pentru mobil. Este uneori folosit ca o soluție de stop-gap în timp ce se dezvoltă o soluție mai bună, dar este într-adevăr o bandă de ajutor pe termen scurt în acest moment.

Folosiți JavaScript

Într-o variantă a abordării menționate mai sus, unii dezvoltatori folosesc un anumit tip de detectare a browserului script pentru a detecta dacă clientul se află pe un dispozitiv mobil și apoi îl redirecționează către acel telefon mobil separat site. Problema cu browser detectarea și dispozitivele mobile înseamnă că există mii de dispozitive mobile acolo. Încercarea de a le detecta pe toate cu un singur JavaScript ar putea transforma toate paginile într-un coșmar de descărcare - și sunteți încă supus la multe dintre aceleași dezavantaje ca abordarea menționată mai sus.

Utilizați CSS @media Handheld

Comanda CSS handheld @media pare să fie o modalitate ideală de afișare CSS stiluri doar pentru dispozitive portabile - cum ar fi telefoanele mobile. Aceasta pare o soluție ideală pentru afișarea paginilor pentru dispozitive mobile. Scrieți o pagină Web și apoi creați două foi de stil. Primul pentru tipul de suport „ecran” stilizează pagina dvs. pentru monitoare și ecrane de computer. Al doilea pentru „handheld” vă stilează pagina pentru dispozitive mici, cum ar fi telefoanele mobile. Sună ușor, dar nu prea funcționează în practică.

Cel mai mare avantaj al acestei metode este că nu trebuie să întrețineți două versiuni ale site-ului dvs. web. Tu doar îl întreții pe cel și pe cel foaie de stil definește cum ar trebui să arate - ceea ce se apropie de fapt de soluția finală pe care o dorim.

O problemă cu această metodă este că multe telefoane nu acceptă tipul de suport - își afișează paginile cu tipul de suport pe ecran. Și multe telefoane mobile și dispozitive portabile mai vechi nu acceptă deloc CSS. În cele din urmă, această metodă nu este fiabilă și, prin urmare, este rar utilizată pentru a livra versiuni mobile ale unui site web.

Folosiți PHP, JSP, ASP pentru a detecta User-Agent

Acesta este un mod mult mai bun de a redirecționa utilizatorii de telefonie mobilă către un versiune mobila a site-ului web, deoarece nu se bazează pe un limbaj de scriptare sau CSS pe care dispozitivul mobil nu îl folosește. În schimb, folosește un limbaj de pe server (PHP, ASP, JSP, ColdFusion etc.) pentru a privi agentul utilizator și apoi pentru a schimba Cerere HTTP pentru a indica o pagină mobilă dacă este un dispozitiv mobil.

Un cod PHP simplu pentru a face acest lucru ar arăta astfel:

Problema aici este că există o mulțime și o mulțime de alți potențiali utilizatori-agenți utilizați de dispozitivele mobile. Acest script va prinde și redirecționa o mulțime dintre ele, dar nu toate prin orice mijloace. Și mai multe sunt adăugate tot timpul.

În plus, la fel ca în cazul celorlalte soluții de mai sus, va trebui să păstrați în continuare un site mobil separat pentru acești cititori! Acest dezavantaj al faptului că trebuie să gestionezi două (sau mai multe!) Site-uri web este un motiv suficient pentru a căuta o soluție mai bună.

Folosiți WURFL

Dacă sunteți încă hotărât să vă redirecționați utilizatorii de telefonie mobilă către un site separat, atunci WURFL (Wireless Universal Resource File) este o soluție bună. Acesta este un fișier XML (și acum un fișier DB) și diverse biblioteci DBI care nu numai că conțin date actualizate fără fir ale utilizatorului-agent, ci și care caracteristici și capabilități acceptă acei agenți-utilizator.

Pentru a utiliza WURFL, descărcați fișierul de configurare XML și apoi alegeți limba dvs. și implementați API-ul pe site-ul dvs. web. Există instrumente pentru utilizarea WURFL cu Java, PHP, Perl, Ruby, Python, Net, XSLTși C ++.

Avantajul utilizării WURFL este că există o mulțime de oameni care actualizează și adaugă tot timpul fișierul de configurare. Așadar, în timp ce fișierul pe care îl utilizați este depășit aproape înainte de a-l termina de descărcat, este posibil să aveți acest lucru descărcați-l o dată pe lună, cam așa, veți avea toate browserele mobile pe care cititorii dvs. le folosesc în mod obișnuit, fără niciunul Probleme. Dezavantajul, desigur, este că trebuie să descărcați și să actualizați continuu acest lucru - totul pentru a putea direcționa utilizatorii către un al doilea site web și dezavantajele pe care le creează.

Cea mai bună soluție este designul receptiv

Deci, dacă nu este răspunsul la întreținerea de site-uri diferite pentru diferite dispozitive, care este? Proiectare web receptivă.

Designul receptiv este locul în care utilizați interogări media CSS pentru a defini stiluri pentru dispozitive de diferite lățimi. Designul receptiv vă permite să creați o singură pagină Web atât pentru utilizatorii de dispozitive mobile, cât și pentru cei care nu sunt mobili. Atunci nu trebuie să vă faceți griji cu privire la ce conținut să afișați pe site-ul mobil sau să nu uitați să transferați cele mai recente modificări pe site-ul dvs. mobil. În plus, după ce ați scris CSS, nu trebuie să descărcați nimic nou.

Este posibil ca designul receptiv să nu funcționeze perfect pe dispozitive și browsere extrem de vechi (dintre care cele mai multe sunt foarte puțin utilizate astăzi și nu ar trebui să vă îngrijoreze), ci pentru că este aditiv (adăugarea de stiluri la conținut, mai degrabă decât eliminarea conținutului), acești cititori vor putea în continuare să citească site-ul dvs., pur și simplu nu vor arăta ideal pe vechiul lor dispozitiv sau browser.

instagram story viewer