in

Come realizzare siti web mobile friendly

L’avvento di smartphone e tablet, unitamente alla possibilità di navigare in mobilità, da qualche anno a questa parte hanno radicalmente modificato le tecniche di realizzazione dei siti web, soprattutto per quanto riguarda il web design.

Il web design responsive

Il notevole incremento del numero di utenti mobile ha richiesto delle importanti modifiche nella creazione dei siti web, come il progressivo abbandono dei contenuti in Flash e Silverlight, non supportati dai browser mobile.
Proviamo ad aprire un sito web NON mobile-friendly su uno smartphone. Ci accorgiamo subito che navigare su questo sito non sarà un’impresa molto semplice. Il piccolo schermo dello smartphone ci mostra l’intera pagina del sito, tanto che i contenuti e le scritte risultano illeggibili. Se ci sono contenuti in Flash o video che richiedono Silverlight, questi non verranno visualizzati, ma troveremo degli spazi bianchi o dei riquadri grigi che ci invitano ad installare i relativi plugin, chè però non sono supportati dai browser mobile. Siamo dunque costretti a zoommare la pagina e fare continui scroll verso destra e sinistra, ma il risultato il più delle volte è disastroso, poichè i vari elementi, come scritte e immagini, vanno ad accalcarsi uno sopra l’altro, rendendo impossibile la lettura. Non parliamo poi della possibilità di cliccare, visto che sugli schermi touch dobbiamo usare le dita, o tutt’al più un pennino. Se il target tocco non è appropriato, la possibilità di riuscire a cliccare su un link e fare centro è pressochè pari a zero.
Per la creazione di siti web “di nuova generazione”, invece, si tiene conto di queste esigenze, tanto che anche Google utilizza questi parametri per il posizionamento sui dispositivi mobili. Grazie all’introduzione del web design responsive e dei siti web mobile friendly, l’esperienza utente è notevolmente migliorata. La pagina web, infatti, viene automaticamente adattata alle dimensioni dello schermo, il contenuto viene ridistribuito secondo uno schema stabilito nei fogli di stile, le dimensioni dei caratteri sono leggibili, senza nrcessità di effettuare lo zoom, e i target tocco sono abbastanza grandi da poter essere cliccati col dito.

Come trasformare un vecchio sito e renderlo mobile friendly

La creazione di siti web mobile friendly, partendo da zero, è un’operazione molto semplice, se paragonata alla modifica del web design di un vecchio sito al fine di renderlo responsive. Oggi, infatti, la stragrande maggioranza dei blog e dei siti web viene realizzata utilizzando CMS come WordPress, pertanto, per la realizzazione di siti web responsive, è sufficiente partire da template responsive ed il gioco è fatto.
Vediamo invece quali sono i passaggi da seguire se siamo di fronte ad un vecchio sito:
1 – configurare la viewport
Per prima cosa dobbiamo connfigurare la viewport, inserendo questa striscia di codice nell’head:

La viewport è la superficie sulla quale verrà mostrato il sito web e non coincide con la risoluzione in pixel dello schermo. Utilizzando questo meta tag, stiamo dicendo al browser che il sito mostrato dovrà avere la larghezza dello schermo del dispositivo.
2 – definire i breakpoint
Il principio del web design responsive è che il codice html non viene variato, ma andiamo ad agire sul css3, stabilendo delle regole diverse a seconda del formato del dispositivo, utilizzando le media query. Avremo quindi due media query, una per gli smartphone e una per i tablet, entrambe sdoppiate, a seconda che la visualizzazione sia in verticale o in orizzontale.
Ad esempio:

@media (min-device-width : 320px) and (max-device-width : 480px) {

/* Smartphone */
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
/* Tablet */
}

E’ opportuno creare un foglio di stile separato, ad esempio style-responsive.css, in cui andremo ad inserire le media query ed il relativo codice css, e richiamarlo nell’head. Potremo anche decidere di non mostrare alcuni elementi nella versione mobile, ad esempio slider che diventerebbero troppo piccoli o altri elementi a seconda dei casi.

Se la creazione del vecchio sito web è avvenuta mediante CMS, ad esempio WordPress, è possibile utilizzare dei plugin per semplificare notevolmente la procedura.

Conclusioni

Poichè oltre il 40% della popolazione naviga da mobile, il mobile friendly e il web design responsive, più che una nuova tendenza, sono ormai diventati una necessità. Se non ci si adegua alle nuove “regole” si rischia infatti di rimanere tagliati fuori dal panorama del web.

Se vuoi realizzare siti web professionali ma non sai come fare, contatta MelaGraphic, realizzeremo il sito perfetto per te.

Segnala

Scritto da

Cosa ne pensi?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Caricando...