Come convertire un sito Web per un browser mobile

I dispositivi mobili, come smartphone e tablet, rappresentano più della 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 è configurato correttamente per questi dispositivi, con una perdita media di traffico del 68%. La corretta modifica del proprio sito Web per i browser mobili richiede pianificazione e test. La codifica stessa, tuttavia, di solito non è molto impegnativa, in particolare se hai già familiarità con i CSS. Se utilizzi una piattaforma come WordPress, non hai bisogno di conoscere il codice.

Piattaforme comuni

Dall'avvento dell'iPhone, gli sviluppatori dietro piattaforme di siti Web come WordPress, Joomla e Drupal hanno integrato il design mobile. Drupal, ad esempio, viene fornito con temi ottimizzati per dispositivi mobili nella sua installazione originale. Ognuna di queste piattaforme ha temi mobili progettati per entrare in funzione non appena il tuo sito web rileva l'accesso da parte di un browser mobile. Altri temi sono già ottimizzati per i dispositivi mobili e risponderanno ai gesti tattili proprio 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 i siti Web HTML, utilizza un foglio di stile CSS, o file CSS, per presentare la versione mobile delle tue pagine quando vi si accede da un browser mobile. Sebbene sia possibile codificare CSS per rilevare dispositivi specifici, un approccio più comune consiste nello specificare i layout in base alle dimensioni dello schermo in pixel. Se lo desideri, puoi avere uno stile per schermi di grandi dimensioni, uno per tablet e uno per telefoni cellulari. L'uso dei CSS ha il vantaggio aggiuntivo di dover scrivere il codice una sola volta, nel file CSS. Ciascuna delle tue pagine ha quindi bisogno solo di una singola riga di codice per disegnare i suoi stili dai CSS.

Funzionalità interattive del touch screen

Se hai configurato una pagina Web in modo che sia un'esperienza interattiva per i visitatori che utilizzano JavaScript o HTML5, è fondamentale sapere come risponderà il tuo sito Web agli eventi touch, non solo su un browser mobile, ma anche su un numero crescente di desktop touch screen . Nella maggior parte dei casi, dovresti considerare di aggiungere eventi di tocco e gesti al tuo codice di progettazione. In JQuery, ad esempio, l'equivalente di un clic del mouse su un touch screen è un evento tap, 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, utilizzando 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. Puoi anche utilizzare il browser Web del tuo 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.