CreativeBits – Web Design & Interface Studio

Categorie: Sviluppo

Ci sono sempre state da quando si è iniziato a parlare di tipografia nella stampa pressappoco da quando è nata la stampa stessa ed un concetto fondamentale e indispensabile se si vuole ordine e chiarezza in un design, le griglie. E’ una delle prime cose che si dovrebbero imparare quando si inizia a muovere i primi passi nella grafica, soprattutto nell’impaginazione di testi e immagini.

Una griglia aiuta il designer a dare un ordine razionale agli elementi della pagina rendendola più comprensibile e leggibile.

Da qualche anno l’uso delle griglie è entrato nei monitor di molti web designer e, grazie a grandi esperti in questo campo come Mark Boulton e Khoi Vinh che hanno saputo diffondere questa pratica oltre i confini della carta stampata, finalmente si è iniziato a sviluppare interfacce per il web con una base tipografica.

Il concetto di griglia

Il concetto di griglia web per come viene di solito presentato si riferisce a delle colonne verticali (di solito 12 o 16, ma anche 6 o 4) a dimensione fissa con un margine tra loro di spaziatura. Ora come è evidente se la griglia è composta da sole colonne non si può definire tale in quanto richiederebbe anche una controparte orizzontale che sovrapponendosi creerebbe appunto la griglia vera e propria, questo però porrebbe forse troppe barriere alla creatività dei designer e si è deciso di trovare un accettabile compromesso iniziando ad adottare le sole colonne verticali.

La nascita dei frameworks

Come è logico pensare dato un input iniziale sono nate molte iniziative per semplificare la vita ai designer meno esperti per metterli comunque nella condizione di iniziare a fare pratica fornendo degli strumenti e delle risorse per saltare la fase di pianificazione, e quindi anche l’impostazione di una griglia, per passare direttamente alla parte grafica e, successivamente, in fase di realizzazione del markup HTML/CSS (il codice alla base delle pagine web) avendo già una base pronta con tutti i riferimenti e le dimensioni delle colonne senza dover perdere a crearle da soli e verificare che sia tutto compatibile con i vari browser.

Il bookmarlet

Se ne è discusso parecchio, soprattutto per quanto riguarda le basi già pronte e personalmente trovo che siano utili sono in pochissimi casi ma non voglio entrare entrare nel merito della discussione, oggi sono qui per presentarvi 2 semplici bookmarklet che ho preparato* e che sono sicuro vi aiuteranno quando vorrete testare il vostro sito per vedere se si è rispettata la griglia su cui era stata realizzata l’interfaccia.

Mi sono basato, come dimensioni, alla griglia oramai standard di 960.gs cioè per una pagina di 960px, a scelta suddivisa in 12 o 16 colonne con 20px di spazio tra l’una e l’altra. In pratica questi bookmarklet applicano in overlay alla pagina che si sta visualizzando con le colonne di colore rosso semi trasparente che sono fornite nel pacchetto. Ho aggiunto anche un leggero fondo bianco anch’esso semi-trasparente per far risaltare le colonne nel caso lo sfondo della pagina risultasse troppo scuro.

Trascinate nella barra dei preferiti i bookmarlet qui sotto e fate pure un test su CB per vedere subito come funziona.

12 Colonne 16 Colonne

* In realtà  non li ho scritti di mano mia partendo da 0, purtroppo non sono molto pratico di Javascript, ma sono un adattamento di un bookmarklet creato da Thomas Aylott che a sua volta ha preso ispirazione da un bookmarklet creato da Andy Budd quindi va a loro il merito, io ho solo sostituito quella griglia in stile photoshop a mio parere non molto pratica con le colonne fornite da 960.gs.

Non dovrebbero dare nessun problema anche se ho notato e non so come mai che su alcuni siti la griglia si ferma all’altezza della finestra quindi scorrendo la pagina l’overlay rimane fisso in alto e in altri siti invece arriva fino a fondo pagina, sapete dirmi il perchè?

Fatemi sapere nei commenti se vi è servito e se avete qualche suggerimento per renderlo ancora migliore.

Update (3/05): Non so come sia riuscito a perdermelo, eppure ho cercato per giorni una soluzione simile e sul sito di 960.gs non ce n’era traccia ma a quanto pare esiste già da qualche mese un bookmarklet, questa volta realizzato come si deve, che fa praticamente la stessa cosa e con molte opzioni anche se ha ancora qualche problema nel visualizzare le colonne colorate e in questo caso tornano utili i bookmarklet che avevo preparato, gridder.andreehansson.se.