Mentre sempre più persone di navigare in Internet con i computer tablet o smartphone, si vuole garantire che il vostro sito è mobile-friendly. Sia che il vostro visitatore ha un browser che supporta tutti i markup moderno o strisce di un sito web di alcuni elementi, è possibile affinare nel vostro editor HTML normale. costruzione di siti web con gli standard in mente aiuta apparire uniforme su più dispositivi e codice ben formato può anche aiutare a risolvere eventuali problemi che possono incorrere in lungo la strada.

istruzione

1 Eseguire il tuo sito web esistente attraverso un validatore di codice. Se si utilizza già XHTML Basic, che utilizza i tag a chiusura automatica e richiede correttamente nido questi tag nell'ordine corretto, sei sulla buona strada per un sito web mobile-friendly. Il validatore mostra errori o avvisi quando non si stanno seguendo le norme del codice, ed è possibile eliminare questi errori in modo che diversi browser, così come i dispositivi, in grado di visualizzare il tuo sito web in base agli standard di codifica.

2 Rimuovere contenuti mobili ostile come cornici, JavaScript e il video - o fornire alternative per i telefoni cellulari. browser per dispositivi mobili non supportano i frame, che si possono utilizzare per caricare più pagine in una finestra, e il codice non convalida con l'HTML. Allo stesso modo, anche i browser mobili con HTML completo potrebbero non consentire Javascript, o il vostro utente può spegnerlo per impostazione predefinita. Supporto video è altrettanto limitata; tuttavia, considerare l'aggiunta di un link diretto a un video Youtube può consentire gli spettatori con l'applicazione YouTube sul proprio smartphone per visualizzare il video.

3 Ottimizzare la pagina per ridurre le dimensioni del file. Il W3C raccomanda di tenere le pagine, comprese le immagini, sotto i 20 kilobyte. Poiché le connessioni senza fili tendono ad essere più lento, il download di immagini o anche di grandi pagine richiede più tempo. Inoltre, i lettori che hanno limitato i piani dati raggiungeranno i loro berretti in fretta. schermi più piccoli comprendono anche lo scorrimento per visualizzare contenuti di grandi dimensioni. Mantenere le pagine destinate per il mobile la visualizzazione più breve. Grafica editor come Photoshop consentono di salvare le immagini per l'uso Web e di selezionare un equilibrio tra qualità e dimensione dell'immagine.

4 Specificare le dimensioni delle immagini in modo che il browser mobile in grado di leggere la quantità di spazio di assegnare per l'immagine e non deve ridisegnare la pagina. Perché i visitatori possono spegnere completamente le immagini, utilizzare sempre l'attributo "alt" per applicare testo descrittivo alle immagini. Ad esempio, si dispone di mostrare l'intestazione utilizzando la sintassi simile alla seguente:

"Header.jpg" alt = stile <img src = "Header" = "width: 200px; height: 100px;" />

Il W3C avverte anche che la maggior parte dei browser visualizzano o GIF o JPEG, ma alcuni del browser non visualizzare altri tipi di immagini, come PNG.

5 Creare un separato foglio di stile, tema o la versione per il vostro sito web. Se la versione desktop non può fare a meno di immagini di grandi dimensioni o Javascript, per esempio, una versione in scala potrebbe essere migliore per i dispositivi mobili. Ad esempio, è possibile specificare un foglio di stile diverso per dispositivi di piccole dimensioni con il tipo di supporto "palmari" se si desidera visualizzare i caratteri in Ems invece di percentuali, che non sono per i dispositivi mobili:

<Style>
@media palmare
{
body {font-family: Verdana; font-size: 14em;}
}
</ Style>

WordPress plug-in, come WPtouch e WordPress Mobile Edition rilevano i browser mobili e visualizzare il tema appropriato. È possibile inviare manualmente gli utenti di telefonia mobile a un altro sito web con l'aggiunta di rilevamento user-agent con una funzione PHP. Il sito Rileva Browser Dispositivi Mobili include un generatore per creare la funzione PHP.