Responsive Design
Il grande successo dei device mobili con la loro capacità di navigare in Internet ha comportato e sta comportando una vera e propria rivoluzione digitale, con particolare riferimento alla realizzazione di siti internet che devono essere, necessariamente, navigabili anche da smartphone e tablet e dispositivi mobile in generale.
Il concetto di navigabilità di un portale attraverso i vari device è strettamente legato al responsive design, più correttamente responsive web design (RWD), una particolare tecnica di scrittura di codice in grado grazie al quale le pagine realizzate riescono ad adattarsi in maniera automatica al layout scelto, tanto su desktop e laptop quanto sui nuovi dispositivi attualmente in commercio (tablet, smartphone ma anche consolle portatile).
Con tale tecnica l’utente non ha più la necessità, quando si collega attrvarso il proprio dispositivo mobile, di ridimensionare manualmente lo schermo o scorrere sullo stesso, soprattutto orizzontalmente.
Caratteristiche di un sito web responsive
Un sito internet che risponde al RWD deve abbandonare del tutto l’obsoleto concetto di tabelle (il famoso tag HTML ) già caduto in disuso con l’avvento dei layout tableless e basati interamente sull’uso del tags apientemente abbinato all’uso di un adeguato foglio di stile (CSS – Cascading Style Shhets).
Proprio la nuova versione del CSS, la tre, media queries, griglie fluide e immagini flessibili: potremmo dire che sono le “parole chiave” del responsive design.
Nel dettaglio:
- le Media Queries sono quelle che permetto alla pagina web di usare più fogli di stile CSS in base alle caratteristiche del device che interroga la pagina stessa;
- la griglia flessibile richiede l’abbandono del dimensionamento degli elementi tramite unità assolute quali pixel e punti a favore di unità di misura relative come le percentuali e gli em;
- per immagini flessibili si intendono quelle che devono poter essere visualizzate a diverse dimensioni in modo che possano adattarsi ai layout di diverse dimensioni.
Il risultato di tutto questo lavoro fa sì che gli utenti, tramite diverse periferiche e browser, abbiano accesso a un unico sorgente in grado di interpretare da dove provenie la chiamata e adattare il layout al dispositivo e al browser stesso.
Tipi di layout responsive
Naturale conseguenza di queste novità è stata la nascita di diverse strategie usate per riorganizzare i contenuti in funzione dei dispositivi mobile, a dette strategie corrisponde una classificazione per le diverse tipologie di layout multi piattaforma:
- Reflowing;
- Equal Width;
- Off Canvas;
- Source-Order Shift;
- List;
- Grid Block;
I layout del primo tipo (Reflowing) sono ulteriormente categorizzati in: Mostly Fluid (layout multi colonna caratterizzati da margini più larghi sui grandi schermi mentre sugli schermi narrow (stretti) il layout si presenta allineato su un’unica colonna), Column Drop, Layout Shifter, Tiny Tweaks.
Quelli con schema Equal Width dividono lo schermo in colonne dalle stesse dimensioni il cui numero aumenta o diminuisce proporzionalmente in base alla larghezza dello schermo.
Con gli Off Canvas lo schermo viene diviso in aree, tipicamente verticali, che, al calare della risoluzione dello schermo, non vengono mostrate a video a seconda della loro importanza, estremizzando il concetto potrebbero mostrare, su una sola colonna, il contenuto principale.
Il tipo Source-Order Shift sfrutta le proprietà flexboxe e box-ordinal-group dei css grazie alle quali il template responsive è in grado di cambiare l’ordine dei blocchi di contenuti presenti nella pagina.
Con un template di tipo List la pagina presenta semplici liste di elementi la cui gestione a schermo è uguale a quella degli Equal Width, infine con i layout di tipo Grid Block il design responsive è costituito da una griglia di rettangoli o quadrati.
I posizionamenti organici sui risultati da Mobile
A giugno 2013 Google annuncia cambiamenti in SERP da Mobile per quei siti che non sono in grado di proporre all’utente una buona esperienza di navigazione.
Questo significa, ad esempio, che i c.d. “difetti di redirezione” potrebbero compromettere notevolmente la visibilità del proprio sito web nei risultati organici delle SERP di Google da mobile.
Quando, dunque, si parla di SEO e di Mobile, sono moteplici i fattori da prendere in considerazione e sottovalutarli significa rischiare di perdere una fetta considerevole dei propri potenziali Clienti.
I più recenti Rapporti parlano piuttosto chiaro (luglio 2013 – Netbiscuits.com): il 76% degli utenti abbandona il sito web se non è ottimizzato per mobile.
Link di approfondimento
Recommendations for smartphone-optimized sites – Google
Building Websites Optimized for All Platforms – Bing
