June 16
Navigazione web mobile sta diventando sempre più comune, aumentando la necessità per i siti web compatibili. Mentre la più alta percentuale di utenti di telefonia mobile hanno i dispositivi in grado di eseguire un browser completo in modalità orizzontale, i dispositivi richiedono ancora una serie di standard di progettazione. Questi standard servono come linee guida per la produzione di disegni che scalano correttamente alle dimensioni piccolo schermo e possono sfruttare a pieno abitudini di navigazione mobile. Altrettanto importante è la limitazione di un dispositivo mobile, indipendentemente dal browser utilizzato. La mancanza di una tastiera mouse e completa significa un design mobile deve essere costruito intorno a contenuti e la navigazione che è facilmente "tappable."
1 Ridurre la portata del progetto di imbottitura riducendo al minimo, i margini e altri stili che causano la spaziatura eccessiva. Hai ancora bisogno di uno spazio bianco nella progettazione per tenerlo da guardare affollato, ma il numero di EMS utilizzato in un design mobile dovrebbe essere rilevanti per la dimensione complessiva dello schermo di destinazione. Testo dovrebbe anche essere scalata in questo modo per apparire leggibile, ma essere tenuta in una colonna larga 120 pixel a 320 pixel.
2 Utilizzare percentuali invece di pixel per creare un layout 'fluida' che sfrutta tutta la larghezza dello schermo dell'utente. Ciò consentirà l'area del contenuto di scalare in base alle varie dimensioni schermi mobili, tra cui dispositivi in grado di passare il layout di paesaggio-mode. Usare lo SME per il testo, invece di pixel per garantire la corretta scalatura e per tenere conto di frequente lo zoom in e out.
3 Creare un layout che utilizza una colonna di contenuti e di evitare le barre laterali o galleggia, se possibile. Se è necessario creare un blocco di link o altri contenuti, le colonne possono essere creati all'interno della colonna contenuto primario attraverso l'uso di liste o tabelle vecchio stile. In questi casi, il "display: block;" attributo deve essere assegnato alla classe CSS per l'elemento.
4 paragrafi stile, linee di testo, elementi di forma e le immagini in scala alla larghezza contenitore o involucro. Questo consentirà di evitare di overflow orizzontale ed evitare contenuti mal formattata su schermi di dimensioni più piccole. Per aiutare Testo a capo, aggiungere il seguente codice al foglio di stile cellulare:
pre {white-space: -pre-wrap;
white-space: pre-wrap; }
Per aiutare a immagini e altri elementi di scala, usate le percentuali per la larghezza o aggiungere un "max-width: 100px;" attribuire alla classe CSS dell'elemento.
5 Ridurre la quantità di effetti e le immagini utilizzati nella progettazione, comprese le finestre modali, effetti di transizione o "iframe". È importante utilizzare la funzionalità corrente per migliorare l'esperienza utente ma più importante garantire che la funzionalità è compatibile con i browser mobili. Servizi gratuiti quali BrowserShots e l'Opera Mini simulatore può aiutare a verificare le funzioni di progettazione correttamente su una varietà di dispositivi.
6 Ottimizzare il codice e il grado esso utilizzando il W3C Markup Validation Service. Mantenere il proprio JavaScript e CSS in file separati accelererà la velocità di download della pagina e di aiuto nelle prestazioni generali.