Un sito web efficace oggi deve essere mobile friendly, per offrire agli utenti una esperienza di navigazione soddisfacente. Scopriamo di più sul responsive design.
Oggi è impossibile
creare un sito web senza un’attenta riflessione sul
design responsive. Ovvero su quelle tecniche che ti permettono di rendere il tuo progetto web adatto a qualsiasi schermo.
Pensa alle prime volte che hai navigato con uno
smartphone: qual era l’operazione più noiosa? Ad esempio zoomare con indice e pollice lo schermo per leggere il testo, manovra che portava i margini fuori dal monitor. Risultato? Trenta minuti per leggere pochi paragrafi. E scoprire altre risorse del sito? I link della navigazione erano impossibili da trovare e cliccare.
Sembra un brutto sogno, vero? O la descrizione di un passato lontano. In realtà esistono ancora molti
siti web che non rispondono alle esigenze dei vari dispositivi.
Google ha adottato severi provvedimenti per chi continua a rifiutare un approccio
mobile friendly. Ecco un passaggio significativo del
comunicato stampa pubblicato nel Febbraio 2015:
Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.
Nelle serp viene indicata, con una stringa di testo, la natura
mobile friendly del risultato. E saranno preferiti (a parità di altri elementi) i siti attenti alle esigenze dei vari dispositivi.
Per rientrare in questa categoria il primo passo da muovere è, ovviamente, avere un
sito responsive.
Cosa è il design responsive?

Il
design responsive è un tecnica di
web design che ha un obiettivo ben preciso: ridurre al minimo le azioni dell’utente per adattare i contenuti tra i vari dispositivi. Quasi inutile ricordare che la penetrazione degli
smartphone e dei
tablet in Italia è sempre più incisiva: le persone si aspettano di poter leggere articoli sul telefonino, ma non solo. Vogliono guardare video, condividere post, prenotare servizi e verificare orari.
Il
design responsive adatta un prodotto alle abitudini del pubblico. Tutto questo avviene grazie alle
immagini flessibili, alle
media query e al
metatag viewport inserito nell’head del documento per indicare al browser le dimensioni e le proporzioni della pagina rispetto allo schermo.
Questi elementi permettono alla
pagina web di usare diversi fogli di stile. In particolar modo, come suggerisce
w3schools.com”It uses the @mediarule to include a block of CSS properties only if a certain condition is true”.
Il
responsive design è ormai diventato uno standard: per
creare un sito web devi conoscere il codice HTML, ma devi anche avere ben chiara la strada da percorrere.
Come realizzare un sito web responsive

Tutte queste indicazioni (insieme a quelle indicate nella
guida ufficiale di Google) sono fondamentali per i
web designer che vogliono
realizzare un sito web responsive. O vogliono modificare dei progetti già esistenti. Ma nella maggior parte dei casi il sito web si basa su un
CMS, un content management system, che permette di gestire i contenuti. E ottimizzare il design.
Il
CMS prevede l’uso dei template, soluzioni grafiche che permettono al sito o al blog di rispettare colori e stili. Esistono temi per
creare magazine online, blog, siti monopagina. Quasi tutti sono
responsive (altrimenti sarebbero tagliati fuori dal mercato) e per ottenere i vantaggi di un
sito adatto al mobile devi seguire queste semplici istruzioni:
- Vai nel catalogo template.
- Cerca tutti i template con la caratteristica “responsive”.
- Scegli quello adatto al tuo progetto.
- Installa il template sul tuo sito.
Non devi fare altro. Questo vale per la maggior parte dei
CMS come
WordPress, Joomla, Drupal, Magento e Prestashop. Oggi tutti i temi hanno questo obiettivo, danno la possibilità di scegliere un template responsive. Per approfondire ogni singolo
CMS puoi dare uno sguardo ai
tutorial pubblicati sempre da Google.
Oltre il design responsive: i contenuti

Un aspetto interessante della
digital strategy: avere un
sito responsive è importante, ma non basta. Devi strutturare il
calendario editoriale intorno all’abitudine degli utenti di leggere un articolo sul telefonino. Poi sul tablet e ancora sul computer.
I tuoi contenuti devono essere leggibili, ben organizzati in paragrafi e liste puntate. Devi eliminare tutto quello che non serve. Soprattutto quando lavori con i contenuti multimediali. Il web è sempre più aperto al
visual, ma immagini e video devo essere utili. Devono trasmettere informazioni o emozioni. Inserire l’ennesima foto di bassa qualità, solo per spezzare il testo, è inutile. Rischi solo di interrompere le lettura.
Non basta installare plugin

Oggi avere una
formazione legata al mondo del web design è importante. Sembra facile
creare dei siti responsive, vero? Devi seguire delle regole ben precise, e non devi lasciarti influenzare dalle prime impressioni: per trasformare il tuo diario personale basta poco, installi un tema responsive e sei in regola.
Ma per lavorare su un
blog aziendale, o per trasformare la tua passione in un lavoro, hai bisogno di una formazione specifica. Una formazione capace di unire pratica e teoria.
Devi conoscere le sfumature delle tecniche che permettono a un
sito web di adattarsi a tutti i dispositivi.
Allora, sei pronto per creare il tuo primo
sito web responsive?
Se vuoi diventare un web designer e realizzare siti web efficaci, abbiamo il corso che fa per te. Clicca qui per scoprirne di più.