Lo scorso anno l'utilizzo del Web mobile è aumentato del 148% in tutto il mondo. Nel prossimo futuro, man mano che gli smarthpones diventano sempre più onnipresenti, questo numero continuerà a crescere. Come sviluppatore, è giunto il momento per te di considerare seriamente se dovresti iniziare ad accogliere il tuo pubblico mobile.
Oggi vedremo alcuni modi rapidi per rendere il tuo sito un po 'più amichevole per i dispositivi mobili.
Analizza il tuo pubblico
Prima di tuffarti nel miglioramento del tuo sito dal punto di vista mobile, è una buona idea controllare quanto traffico proviene effettivamente dai dispositivi mobili. Usando Google Analytics o qualcosa di simile, dai una rapida occhiata alla suddivisione del browser solo per familiarizzare con questo numero. Quindi puoi prendere una decisione istruita sulla distanza da percorrere con il tuo alloggio mobile.
Una cosa da tenere a mente è che se questo numero è molto basso, potrebbe essere in parte dovuto al cattivo stato attuale del tuo sito sui dispositivi mobili. Decidete se volete semplicemente migliorare l'esperienza dei vostri attuali utenti mobili o cercare attivamente più utenti mobili lanciando un sito mobile dedicato, un'app Web o un'app per iPhone.
Crea fogli di stile mobili
Uno dei più grandi passi da compiere per rendere il tuo sito mobile-friendly è creare CSS personalizzati per i dispositivi mobili. Questo può essere un compito molto più piccolo di quello che potresti immaginare se stai cercando di mantenere l'aspetto generale del sito. Diamo un'occhiata a come indirizzare il tuo CSS mobile a caricare solo su dispositivi mobili.
Tipi di media
L'utilizzo di dichiarazioni di tipi di supporti diversi consente di assegnare fogli di stile diversi per determinati usi. La maggior parte dei browser desktop riconosce? mentre molti dispositivi mobili utilizzano il palmare? comando. Guarda il seguente esempio:
Usando questa semplice dichiarazione, puoi creare un file handheld.css che verrà attivato solo su dispositivi palmari (almeno quelli che consentono lo styling). Questo ovviamente non funzionerà su tutti i dispositivi, ma colpirà una quantità decente. Alcuni sviluppatori arrivano addirittura a suggerire di utilizzare questo metodo con un foglio di stile vuoto solo per ripristinare tutto e renderlo più semplice per la visualizzazione su dispositivi mobili.
Usa layout fluido
Sfortunatamente, non è facile scoprire come apparirà il tuo layout su tutti i browser mobili poiché ci sono troppi dispositivi per poterli rintracciare tutti. Un modo per aggirare questo problema è usare layout fluidi che si adattano automaticamente alle dimensioni dello schermo.
Un modo per realizzare questo è quello di evitare di impostare larghezze in pixel e spara invece per percentuali o em. Ad esempio, invece di
semplicemente usa
Per scaricare alcuni fantastici layout mobili fluidi predefiniti, consulta l'articolo di seguito:
Layout liquidi CSS multi-colonna perfetti - compatibile con iPhone
Nascondi contenuto non necessario
Se il tuo sito ha un sacco di piccoli link a piè di pagina o spazi pubblicitari ingombranti, è una buona idea abbandonare questi contenuti nella versione mobile. Tieni presente che le dimensioni ridotte dello schermo dei browser per dispositivi mobili non sono l'ideale per fare clic su piccoli elementi o scorrere su pagine grandi e piene di contenuti. Prova a tagliare i tuoi contenuti per facilitare la navigazione in un formato a colonna singola con ampie aree cliccabili e intestazioni chiaramente definite.
Inserisci il seguente CSS per ogni elemento che desideri nascondere:
Dimensionamento corretto delle immagini
Le immagini di grandi dimensioni possono o non possono essere visualizzate correttamente nei browser mobili e puoi scommettere che imperversano davvero su un sito mobile. È buona norma ridimensionarli sul server o utilizzare CSS usando il comando larghezza massima. Tieni presente che quest'ultimo è un po 'più intenso del processore e può richiedere un po' di tempo per essere caricato.
Assicurarti che le immagini non siano troppo grandi non è il tuo unico problema. Come indicato nel suggerimento precedente, anche le aree cliccabili devono essere ripensate. Molti dispositivi mobili utilizzano un dito come dispositivo di input primario, che è notevolmente meno preciso di un mouse e un puntatore. Per questo motivo, tutte le immagini che fungono da pulsanti o collegamenti richiedono considerazione e possibilmente ridimensionamento per garantire che siano facilmente selezionabili con un punto e un tocco invece che con un punto e un clic. Non sei sicuro di quanto sia grande per fare un pulsante? Guarda le dimensioni della punta del tuo dito come indicatore per decidere se un'immagine può essere facilmente selezionata su un dispositivo mobile.
interattività
A volte aggiungere alcuni elementi interattivi a un sito lo rende molto più divertente e meno statico / noioso. Tuttavia, nella versione ottimizzata per dispositivi mobili del tuo sito, riduci l'interattività al minimo (a meno che, naturalmente, non si stia creando un gioco o qualcosa di simile). L'interazione può facilmente andare male sui dispositivi mobili e lasciare i tuoi utenti frustrati con tutto il lavoro che devono fare. Cerca i luoghi in cui ridurre l'input richiesto dagli utenti, specialmente nell'area di immissione del testo, in quanto l'uso di minuscole tastiere può essere tra le parti peggiori dell'esperienza web mobile.
Tecniche specifiche per iPhone
Molti di voi sono venuti in questo articolo non solo per informazioni sul Web mobile in generale, ma nella speranza che troviate alcuni buoni suggerimenti per l'ottimizzazione dell'iPhone. Mi dispiacerebbe deludere quindi ecco alcune cose che puoi fare accomodare il re dei client web mobili.
Aggiunta di un'icona schermata iniziale
iPhone e iPod Touches hanno una funzione integrata che consente agli utenti di aggiungere il tuo sito alla schermata iniziale come un'icona. È possibile personalizzare questa icona semplicemente inserendo un file nella directory principale intitolato? Apple-touch-icon.png? (assicurarsi che l'immagine sia almeno 57? 57). In alternativa, puoi inserire il seguente snippet nel tuo codice HTML:
Ovviamente, personalizzerai il percorso e il nome del file per la tua immagine.
Viewport: Zoom predefinito
Il tuo sito potrebbe avere uno spazio bianco integrato che sembra ottimo su un desktop, ma questo aggiungerà uno zoom in più per gli utenti di iPhone che non desiderano vedere quello spazio bianco perché riduce la leggibilità e le dimensioni del contenuto principale. Usa il seguente frammento per ingrandire automaticamente la larghezza del tuo contenuto.
La? Larghezza = 320 ;? determina il livello di ingrandimento del contenuto. Imposta questo numero su qualsiasi cosa sia appropriata per il tuo contenuto (320 pixel è la larghezza dello schermo di iPhone in un orientamento verticale).
Foglio di stile specifico per iPhone
Se vuoi creare CSS che si applica solo agli utenti iPhone, utilizza il seguente codice:
Si rivolge solo a dispositivi con una larghezza massima dello schermo di 480 pixel, ovvero iPhone e iPod Touch.
Costruttori di siti per dispositivi mobili
Ci sono alcuni siti là fuori che ti aiutano a creare un sito mobile con poca o nessuna conoscenza di HTML e CSS. La cosa più promettente a mio parere è Mobify, ma ho anche inserito alcune alternative. Se hai provato qualcuno di questi (o di altri), facci sapere i pro e i contro e la tua impressione generale.
Mobify
MoFuse
WireNode
bMobilized
Zinadoo
Ulteriori letture
Dai un'occhiata a questi altri fantastici articoli per la creazione di siti ottimizzati per dispositivi mobili. Ognuno di questi mi ha aiutato nella mia ricerca e sono pieno di informazioni aggiuntive.
- Come rendere il tuo sito web mobile friendly
- Il makeover mobile CSS di 5 minuti
- Rendi il tuo sito Web mobile e iPhone amichevole
- 7 suggerimenti per rendere il tuo sito Web ottimizzato per dispositivi mobili
- 6 suggerimenti per ottimizzare il tuo sito web per iPhone
- Creazione di un sito Web compatibile con iPhone tramite CSS
- Principi e linee guida per la creazione di grandi contenuti iPhone
Conclusione
I suggerimenti di cui sopra rappresentano solo alcuni modi in cui puoi iniziare ad affrontare il crescente segmento di utenti di Web mobile. Utilizza i commenti seguenti e condividi i tuoi suggerimenti per l'ottimizzazione mobile. Sono ansioso di imparare anche da te!