Siti Responsive

In un’epoca in cui spopolano smartphone e tablet di ogni genere, diventati ormai per tutte le tasche, il lavoro del web designer si fa sempre più duro. È necessario concentrarsi sulle nuove tecnologie applicabili ai vari dispositivi. Bisogna pensare all’usabilità/accessibilità ed alla risoluzione sui diversi device.Ormai non è più sufficiente costruire siti web per schermi di computer standard. Ecco perché ci chiediamo se sia conveniente progettare una versione solo per uno specifico dispositivo mobile, subendo la perdita di potenziali visitatori provenienti da un altro dispositivo, o se esista un’alternativa. Sicuramente la risposta più in voga in questo momento è quella di creare siti web multipiattaforma.

La soluzione si chiama RESPONSIVE WEB DESIGN.

Cos’è il Responsive Web Design?

Alcuni credono che basti un HTML ben organizzato ed un layout flessibile per esaurire il concetto di responsive web design, ma questa definizione non è affatto completa. In realtà il web design sensibile utilizza tutte le tecnologie web moderne per rendere la navigazione quanto più adatta all’utente ed al modo in cui fruisce dei contenuti.
Il termine deriva probabilmente dall'”architettura reattiva”, che si basa sugli spazi che hanno la capacità di ridimensionarsi a seconda del numero e del flusso di persone all’interno di essi. Un esempio è il cosiddetto “vetro intelligente” che diventa più o meno opaco a seconda delle persone che occupano la stanza. Come l’architettura anche le tecnologie del web si stanno muovendo in questa direzione.
Secondo Ethan Marcotte, che ha coniato il concetto di Responsive Web Design, bisogna pensare il contenuto in modo tale che, indipendentemente dalla risoluzione del device, l’utente sia in grado di navigare il sito senza avere alcuna difficoltà nella visualizzazione di ogni componente.
Come il contenuto anche le immagini devono adattarsi al device.
Per far in modo che questo avvenga è necessario usare un mix di griglie, layout fluidi, immagini flessibili e media queries CSS. Ma il responsive web design non è solo il layout che rileva il device dal quale viene visualizzato e si adatta ad esso.
È soprattutto un nuovo modo di progettare, dove designer e sviluppatori lavorano insieme per determinare una struttura semplice e leggibile.

Come cambia la progettazione?

GRIGLIA FLESSIBILE
Per prima cosa è necessario pensare all’ordine dei contenuti, in modo tale che riducendo il layout ad una colonna non si perda il focus sugli elementi che dovrebbero essere in evidenza. Possiamo optare per la soluzione che ci permette di mostrare o nascondere contenuti a seconda del dispositivo, mantenendo il necessario e togliendo ciò che potrebbe essere accessorio.

Bisogna, poi, disegnare il mockup mediante le griglie.

Esistono diversi tool come ad esempio 960 grid system, Fluid 960 grid, cssgrid.net che forniscono griglie per Photoshop, Fireworks ed altri strumenti di disegno con il relativo css.
Una griglia flessibile consente una revisione completa in termini di proporzioni, facendo sì che tutti gli elementi in un layout vengano ridimensionati in relazione l’uno all’altro quando ci si sposta tra differenti device. Tramite l’utilizzo degli em, possiamo di definire l’unità di misura scalabile del nostro sito ed assicurarci che mantenga sempre un aspetto gradevole.

IMMAGINI FLESSIBILI
Altro fattore fondamentale per il responsive web design è l’utilizzo delle immagini scalabili. Ci sono differenti tecniche per ottenere lo stesso risultato. La prima è quella di usare gli attributi width ed height in percentuali. Altra tecnica è quella di creare più versioni della stessa immagine e richiamare quella che serve solo quando ce ne è bisogno.

MEDIA QUERIES
Infine, per passare all’implementazione sicuramente dobbiamo porre l’accento sulle CSS Media queries. A partire da CSS3, infatti, sono disponibili parametri che definiscono l’orientamento, il colore, la risoluzione dello schermo. In base al dispositivo utilizzato possiamo richiamare CSS ad hoc che ci permettono di mostrare sempre un layout gradevole e fruibile.

Concludendo…

Progettare siti responsive significa, quindi, assicurarsi che, nonostante possano essere rilasciati quotidianamente differenti dispositivi, i nostri siti saranno sempre in grado di fornire una risposta adeguata! E allora buon responsive a tutti!