Come convertire un sito web per un Mobile Browser

July 13

Come convertire un sito web per un Mobile Browser


I dispositivi mobili, come smartphone e tablet, rappresentano più della metà di tutto il traffico Internet. Eppure, secondo una ricerca fatta da BrightEdge nel 2014, più di un quarto di persone visitano i siti web non sono configurati correttamente per questi dispositivi - costare loro una media di perdita di 68 per cento nel traffico. Correttamente modificando il proprio sito web per i browser mobili richiede pianificazione e il test. La codifica in sé, tuttavia, di solito non è molto impegnativo, soprattutto se sei già familiarità con i CSS. Se si utilizza una piattaforma come Wordpress, non è necessario conoscere il codice a tutti.

piattaforme comuni

Dal momento che l'avvento di iPhone, gli sviluppatori dietro le piattaforme di siti web come WordPress, Joomla e Drupal hanno integrato di progettazione mobili. Drupal, per esempio viene fornito con temi per i dispositivi mobili nella sua installazione originale. Ognuna di queste piattaforme sono temi di telefonia mobile che sono progettati per calciare in non appena il vostro sito web rileva che è in corso l'accesso da un browser mobile. Altri temi sono già mobile-friendly e risponderanno alle touch proprio come rispondono al clic del mouse, senza cambiare in modo significativo la struttura o il layout del tuo sito web attraverso diversi dispositivi.

Utilizzando i CSS e HTML

Per i siti web HTML, utilizzare un foglio di stile CSS, o CSS, file per presentare la versione mobile delle pagine quando vi si accede da un browser mobile. Mentre è possibile codificare CSS per rilevare dispositivi specifici, un approccio più comune è quello di specificare i layout in base alle dimensioni dello schermo in pixel. Se lo si desidera, si può avere uno stile per schermi di grandi dimensioni, uno per i tablet e uno per i telefoni cellulari. Utilizzando i CSS ha il vantaggio di avere solo per scrivere il codice una volta - nel file CSS. Ciascuna delle tue pagine quindi bisogno di una sola riga di codice per disegnare i suoi stili di CSS.

Touch presenta schermo interattivo

Se è stata configurata una pagina Web per essere un'esperienza interattiva per i visitatori che utilizzano JavaScript o HTML5, è vitale che si sa come il vostro sito risponderà a toccare gli eventi, non solo su un browser mobile, ma su un numero crescente di touch screen desktop troppo . Nella maggior parte dei casi, si dovrebbe considerare l'aggiunta di eventi touch e gesti al codice di progettazione. In jQuery, ad esempio, l'equivalente di un clic del mouse su un touch screen è un evento rubinetto, innescato quando un utente tocca e poi alza un dito dallo schermo. A seconda della tua pagina, si consiglia inoltre di disattivare le impostazioni di default sul browser mobile, come pizzicare per ingrandire o trascinare per scorrere, utilizzando eventi "preventDefault".

Collaudo e verifica

Il modo migliore per testare il nuovo sito web mobile è di utilizzare il proprio dispositivo mobile. Esaminare il layout in stile e la pagina, navigare con tocchi e gesti, e guardare da vicino le immagini al fine di garantire loro aspetto croccante. È inoltre possibile utilizzare il browser Web del computer per emulare un display mobile. Su Google Chrome, ad esempio, premere "F12" per aprire Console per gli sviluppatori. Fare clic sull'icona "Impostazioni" e quindi fare clic sulla scheda "emulazione" per selezionare un dispositivo come un Google Nexus o Apple iPad.