Dispositivi mobili, come smartphone e tablet, conto per più della metà di tutto il traffico Internet. Eppure, secondo una ricerca fatta da BrightEdge nel 2014, oltre un quarto dei siti Web di persone visitano non sono configurate correttamente per questi dispositivi..--li costano una media di perdita di 68 per cento nel traffico. Modificando adeguatamente il proprio sito Web per i browser mobili richiedono pianificazione e testing. La codifica stessa, tuttavia, non è solitamente molto impegnativa, soprattutto se si ha già familiarità con i CSS. Se si utilizza una piattaforma come WordPress, non è necessario conoscere a tutti il codice.

Piattaforme comuni

L'avvento di iPhone, gli sviluppatori dietro sito piattaforme come WordPress, Joomla e Drupal sono integrati progettazione per dispositivi mobili. Drupal, per esempio fornito con temi cellulari nell'installazione originale. Ciascuna di queste piattaforme sono i temi che sono stati progettati per calciare appena il tuo sito Web rileva vi si accede da un browser mobile. Altri temi sono già mobile-friendly e risponderanno ai movimenti di tocco, proprio come rispondono al clic del mouse, senza modificare significativamente la struttura o il layout del tuo sito Web su dispositivi diversi.

CSS e HTML

Per siti Web HTML, utilizzare un foglio di stile CSS, o CSS, file di presentare la versione mobile delle pagine quando si accede da un browser mobile. Mentre è possibile al codice CSS per rilevare dispositivi specifici, un approccio più comune consiste nello specificare il 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 le tavolette e uno per i telefoni cellulari. Utilizzando i CSS ha il vantaggio di dover solo scrivere il codice una volta..--nel file CSS. Ciascuna delle tue pagine quindi bisogno solo una singola riga di codice da cui attingere gli stili CSS.

Touch Screen interattivo include

Se è stata configurata una pagina Web per essere un'esperienza interattiva per i visitatori che utilizzano JavaScript o HTML5, è vitale che tu sai come il tuo sito Web risponda al tocco eventi, non solo in un browser mobile, ma su un numero crescente di tocco dello schermo desktop troppo. Nella maggior parte dei casi, è consigliabile aggiungere gli eventi di tocco e gesti al tuo codice di progettazione. In JQuery, ad esempio, l'equivalente a un clic del mouse su un touch screen è un evento di tocco, attivato quando un utente tocca e quindi solleva un dito dallo schermo. A seconda della tua pagina, è possibile anche disabilitare le impostazioni predefinite del browser mobile, come pizzicare per ingrandire o trascinare per scorrere, utilizzando gli eventi di "preventDefault".

Test e verifica

Il modo migliore per testare il nuovo sito Web mobile è di utilizzare il proprio dispositivo mobile. Esaminare lo stile e layout di pagina, passare con tocchi e gesti e guardare da vicino le immagini affinché che hanno un aspetto croccante. È anche possibile utilizzare browser Web del computer di emulare un display mobile. Su Google Chrome, ad esempio, premere "F12" per aprire lo sviluppatore della Console. Fare clic sull'icona "Impostazioni" e quindi fare clic sulla scheda "Emulazione" per selezionare un dispositivo come un iPad Nexus di Google o Apple.