I dispositivi mobili, come smartphone e tablet, rappresentano oltre la metà di tutto il traffico Internet. Tuttavia, secondo una ricerca condotta da BrightEdge nel 2014, oltre un quarto dei siti Web visitati dalle persone non sono configurati correttamente per questi dispositivi, con una perdita media del 68% del traffico. La corretta modifica del proprio sito Web per i browser mobili richiede pianificazione e test. La codifica stessa, tuttavia, di solito non è molto impegnativa, soprattutto se hai già familiarità con i CSS. Se usi una piattaforma come WordPress, non hai bisogno di conoscere il codice.
Piattaforme comuni
Dall'avvento di iPhone, sviluppatori dietro piattaforme di siti Web come WordPress, Joomla e Drupal hanno un design mobile integrato. Drupal, ad esempio, include temi ottimizzati per i dispositivi mobili nella sua installazione originale. Ognuna di queste piattaforme ha temi mobili progettati per attivarsi non appena il tuo sito Web rileva l'accesso a un browser mobile. Altri temi sono già ottimizzati per i dispositivi mobili e risponderanno ai gesti tattili così come rispondono ai clic del mouse, senza modificare in modo significativo il design o il layout del tuo sito Web su diversi dispositivi.
Utilizzo di CSS e HTML
Per Siti Web HTML, utilizzare un foglio di stile CSS o CSS, file per presentare la versione mobile delle tue pagine quando vi si accede da un browser mobile. Mentre è possibile codificare CSS per rilevare dispositivi specifici, un approccio più comune è quello di specificare layout basati sulla dimensione dello schermo in pixel. Se lo si desidera, è possibile avere uno stile per schermi di grandi dimensioni, uno per tablet e uno per telefoni cellulari. L'uso dei CSS ha l'ulteriore vantaggio di dover scrivere il codice una sola volta, nel file CSS. Ciascuna delle tue pagine ha quindi bisogno di una sola riga di codice per disegnare i suoi stili dai CSS.
Funzioni interattive del touchscreen
Se hai configurato una pagina Web in modo che sia un'esperienza interattiva per i visitatori che utilizzano JavaScript o HTML5 , è fondamentale sapere come il tuo sito Web risponderà agli eventi touch, non solo su un browser mobile, ma anche su un numero crescente di desktop touchscreen. Nella maggior parte dei casi, dovresti prendere in considerazione l'aggiunta di eventi tattili e gesti al tuo codice di progettazione. In JQuery, ad esempio, l'equivalente di un clic del mouse su un touchscreen è un evento di tocco, attivato quando un utente tocca e quindi solleva un dito dallo schermo. A seconda della tua pagina, potresti anche voler disabilitare le impostazioni predefinite sul browser mobile, come pizzicare per ingrandire o trascinare per scorrere, usando gli eventi "preventDefault".
Test e verifica
Il modo migliore per testare il tuo nuovo sito Web mobile è utilizzare il tuo dispositivo mobile. Esamina lo stile e il layout della pagina, naviga con tocchi e gesti e osserva attentamente le tue immagini per assicurarti che siano nitide. È inoltre possibile utilizzare il browser Web del computer per emulare un display mobile. Su Google Chrome, ad esempio, premi "F12" per aprire la Console per gli sviluppatori. Fai clic sull'icona "Impostazioni", quindi fai clic sulla scheda "Emulazione" per selezionare un dispositivo come Google Nexus o Apple iPad.
Computer © www.354353.com