Cum să convertiți un site Web pentru un browser mobil

Dispozitivele mobile, cum ar fi smartphone-urile și tabletele, reprezintă mai mult de jumătate din traficul Internet. Totuși, potrivit cercetărilor realizate de BrightEdge în 2014, peste un sfert din site-urile pe care oamenii le vizitează nu sunt configurate corespunzător pentru aceste dispozitive - costându-le o pierdere medie de trafic de 68%. Modificarea corectă a propriului site web pentru browserele mobile necesită planificare și testare. Codificarea însăși nu este, de obicei, foarte dificilă, mai ales dacă deja sunteți familiarizat cu CSS. Dacă utilizați o platformă precum WordPress, nu trebuie să știți deloc codul.

Platforme comune
De la apariția iPhone-ului, dezvoltatorii din spatele platformelor de site-uri precum WordPress, Joomla și Drupal au design mobil integrat. Drupal, de exemplu, vine cu teme prietenoase pentru mobil în instalarea sa inițială. Fiecare dintre aceste platforme are teme mobile care sunt concepute pentru a da naștere imediat ce site-ul dvs. detectează că este accesat de un browser mobil. Alte teme sunt deja prietenoase cu dispozitivele mobile și vor răspunde la gesturile tactile la fel cum răspund la clicurile pe mouse, fără a schimba în mod semnificativ designul sau aspectul site-ului dvs. pe diferite dispozitive.

Utilizarea CSS și HTML - Pentru Site-uri HTML, utilizați o foaie de stil cascadă sau fișier CSS, pentru a prezenta versiunea mobilă a paginilor dvs. atunci când sunt accesate de un browser mobil. Deși este posibil ca codul CSS să detecteze anumite dispozitive, o abordare mai comună este de a specifica aspectul bazat pe dimensiunea ecranului în pixeli. Dacă doriți, puteți avea un stil pentru ecrane mari, unul pentru tablete și unul pentru telefoane mobile. Utilizarea CSS are avantajul suplimentar de a fi nevoit doar să scrieți codul o singură dată - în fișierul CSS. Fiecare dintre paginile dvs. are nevoie de o singură linie de cod pentru a desena stilurile sale din CSS.

Caracteristici interacțioase pe ecranul tactil
Dacă ați configurat o pagină Web pentru a fi o experiență interactivă vizitatorilor utilizând JavaScript sau HTML5 , este vital să știți cum va răspunde site-ul dvs. la evenimentele touch, nu numai pe un browser mobil, ci și pe un număr tot mai mare de desktop-uri touch screen. În majoritatea cazurilor, ar trebui să luați în considerare adăugarea de evenimente și de gesturi la codul dvs. de design. În JQuery, de exemplu, echivalentul unui clic pe un ecran tactil este un eveniment de apăsare, declanșat atunci când un utilizator atinge și apoi ridică un deget de pe ecran. În funcție de pagina dvs., este posibil să doriți și să dezactivați setările prestabilite în browserul mobil, cum ar fi ciupirea pentru a mări sau a deplasa pentru a derula, utilizând evenimentele "prevenireDefault".

Testarea și verificarea - cel mai bun mod de a testați noul dvs. site mobil este să utilizați propriul dispozitiv mobil. Examinați stilul și aspectul paginii, navigați cu atingeri și gesturi și căutați cu atenție imaginile dvs. pentru a vă asigura că arată clar. De asemenea, puteți utiliza browserul Web al computerului pentru a emula un afișaj mobil. În Google Chrome, de exemplu, apăsați "F12" pentru a deschide Consola pentru dezvoltatori. Faceți clic pe pictograma "Setări" și apoi faceți clic pe fila "Emulare" pentru a selecta un dispozitiv precum Google Nexus sau Apple iPad.
URL:https://ro.whycomputer.com/Internet/100501856.html