La progettazione di un sito web pensata solo lo schermo del pc è ormai superata. La tecnologia e l'espansione di siti web per cellulari stanno spingendo i  web designer a ripensare come il loro lavoro viene visualizzato attraverso i diversi dispositivi. Pensateci: quanto navigate su internet con il vostro  telefono rispetto al vostro desktop ?

Cosa si intende esattamente per responsive design?

In poche parole, il web design reattivo (RWD) è un approccio che permette la progettazione e il codice per rispondere alla dimensione dello schermo di molteplici dispositivi. Il che significa che ti dà l'esperienza di visione ottimale sia se si sta guardando un cellulare Android da 4 pollici, il vostro mini iPad o un cinema display da 40 pollici.

Perché il responsive design è così importante?

Se progettassimo e sviluppassimo innumerevoli versioni di un sito web ognuna per ogni tipologia di dispositivo disponibile, perderemmo un sacco di tempo e di soldi! Vorrebbe dire anche rendere inefficaci i siti per i futuri cambiamenti tecnologici. Il responsive design invece è una soluzione efficace per garantire un futuro al vostro sito web.

Una chiave importante per il web design responsive è sapere il vostro pubblico quale dispositivo sta utilizzando per visualizzare il sito web.

Per conoscere gli altri elementi rilevanti per un sito web efficace vedi Intervista a Roger Pagini dell'Agenzia Siti Web Joomla

Quanto del tuo traffico attuale è del desktop vs tablet vs cellulare?

Circa il 56 per cento del traffico nei siti web degli Stati Uniti è ora da dispositivi mobili. Oggi ci sono circa 2,6 miliardi di utenti di smartphone e per il 2020  se ne prevedono  oltre 6 miliardi.

Ogni principale browser web ha una propria versione Mobile che fa visualizzare  i siti in modo diverso. Quindi è importante che il progetto funzioni e risponda ad una varietà di versioni del browser.

Quali dimensioni del sito dovrei progettare?

Non c'è un "formato sito web standard." Ci sono centinaia di dispositivi là fuori, e le dimensioni del modello e risoluzioni dello schermo cambiano tutto il tempo. E ogni singolo sito attrae gli utenti su diversi dispositivi. Ad esempio, è molto più probabile guardare una ricetta sul tuo dispositivo mobile (quando sei in cucina), e più probabile invece che la ricerca di un tutorial sia effettuata sul desktop.

Puoi scoprire quali browser e  dimensioni delle pagine web  sono più popolari per il tuo sito, cercando in Google Analytics.

Quindi, con infinite combinazioni di formati e dispositivi del browser, come  si fa a progettare responsabilmente senza perdere la vostra mente?

Articolo correlato: i migliori template responsive di Joomla

Prova la progettazione di almeno 3 layout

Un sito web design responsive dovrebbe avere almeno 3 layout per diverse larghezze del browser:

• Piccolo: in 600px. Questo è  formato della maggior parte dei telefoni.

• Media:  600px - 900px. Questo è formato della maggior parte dei tablet, alcune grandi telefoni e piccoli computer netbook-tipo.

• Grande: più di 900px. Questo è il formato della maggior parte dei personal computer.

Ognuno di questi layout dovrebbe includere lo stesso testo e elementi grafici, ma ognuno deve essere progettato per visualizzare al meglio il contenuto in base dispositivo dell'utente. 

Le cose a cui pensare

• L'esperienza dell'utente è la chiave: il responsive design ha bisogno di essere più di conversione di un sito desktop in uno schermo mobile. Dobbiamo considerare l'esperienza dell'utente, la loro interazione e il contenuto essenziale che stanno in realtà cercando durante l'utilizzo di un dispositivo mobile.

• Coinvolgimento: la gerarchia del layout è super importante, soprattutto sul mobile. Spesso meno è di più! L'esperienza mobile rispetto al desktop è molto più focalizzata con uno spazio limitato, quindi il modo in cui gli utenti leggono e si muovono attraverso il vostro sito ha bisogno di essere molto chiaro per far passare il messaggio chiave e capire ciò che il sito riguarda. E' inoltre necessario pensare all'azione principale della pagina. Se l'obiettivo chiave è quello di convincere la gente a fare clic su un pulsante 'contattaci' allora non va nascosto in basso. Personalizzare il contenuto e il design intorno a quella esperienza.

• Immagini flessibili sono veramente importanti per la progettazione di un sito web responsive. È necessario pensare a come l'immagine verrà ridimensionata. 

• Navigazione è importante sul cellulare. Ci sono diversi metodi comuni per la fascicolazione grandi menu e contenuti. Ad esempio la semplice selezione a discesa, oppure si potrebbe usare schede che scorrono orizzontalmente come in YouTube.

• Gesti aprono nuove possibilità per la progettazione. La gente ama la lettura con le mani e interagire con il contenuto. Su cellulari e tablet, gli utenti possono pizzicare per ingrandire o far scorrere le immagini sullo schermo. L' interazione influisce notevolmente nella progettazione. Pensate alle dimensioni di un dito di una persona e come questo si traduce in una soluzione di interfaccia utente utile. Secondo Apple: la dimensione minima confortevole degli elementi dell'interfaccia utente tappable è 44 x 44 px . Questo limite è spesso non rispettato e il vero limite stima è di circa 25 px. 

Strumenti e risorse

• Il tuo browser  potrebbe sembrare uno strumento ovvio da usare, ma è la risorsa più efficace per visualizzare in anteprima i vostri disegni sul web. Installare un paio di browser diversi per ottenere una buona gamma di feedback. Quindi avviare il ridimensionamento delle finestre del browser.

• Il dispositivo cellulare  è un altro strumento ovvio da usare, ma molto utile per visualizzare in anteprima i vostri disegni su perché ti mostra esattamente ciò che il vostro sito sarà simile in queste condizioni specifiche.

• Resizer di Google è una buona risorsa per visualizzare in anteprima rapidamente il vostro sito su più dispositivi.