due chiacchiere

Il gioco dei tre fogli di stile

Come avevo promesso tante e tante volte, inizierò finalmente a svelarti i segreti che si nascondono dietro le quinte del mio tema. Questo non equivale a rilasciare il tema al mondo, ma almeno cerca di apprezzare lo sforzo 🙂 Passo dopo passo, voglio aiutarti a rendere anche il tuo blog più accessibile e facile da aggiornare. Non so ancora quante puntate ci vorranno, in questi anni ne ho aggiunte di cose. Ma so da dove iniziare: i fogli di stile. Che stanno alla base di qualsiasi template si prenda in considerazione. Un vestito, per durare nel tempo, deve essere cucito bene ed usare stoffa di qualità, altrimenti basterà qualche lavaggio per renderlo già vecchio ed inutilizzabile. La stessa cosa vale per il “vestito” del tuo sito.

L’idea di fondo è di avere più fogli di stile: separare le definizioni in relazione alla loro funzione. Nel mio caso, ad esempio, il blog ha 12 “tonalità” diverse (una al mese) e due larghezze per le risoluzioni grandi e piccole. L’approccio più banale sarebbe stato quello di creare 24 fogli di stile che ridefiniscono mese per mese l’aspetto di ogni pezzetto. Ad esempio, per il titolo dell’articolo, impostano il font, la sua dimensione, il posizionamento, la spaziatura e via dicendo. Ci sono sostanzialmente due svantaggi nel seguire quest’approccio: il primo è che se decido un domani di cambiare la dimensione del font, dovrò editare 24 fogli di stile e ricordarmi di mantenerli tutti “sincronizzati”; il secondo è la mancata ottimizzazione: la ridondanza, in questo caso, è occupazione di spazio inutile e spreco di banda per l’utente. Un foglio “monolitico” (così si chiamano in gergo) sarebbe infatti più grosso da scaricare.

Fogli di stile… a cascata

Allora viene in mente che colui che inventò i fogli di stile, aveva proprio in mente di evitare questi due problemi, introducendo il concetto di regole “a cascata” (la C nell’acronimo CSS vuol dire proprio cascata), in cui gli attributi di un elemento della pagina possono essere definiti in punti diversi, senza per questo causare problemi. Nel mio caso, ad esempio, ho creato un file base.css dove ho definito la dimensione del font del titolo dell’articolo, ed un file per ogni mese dove ho definito il suo colore. A questo punto, se voglio cambiare la dimensione, editerò l’informazione in un solo posto anziché 24, eliminando la pericolosa ridondanza. Non solo, base.css non cambierà praticamente mai, quindi rimarrà nella cache del browser più a lungo, facendo di fatto risparmiare tempo a chi “scarica” le mie pagine.

Si, ma io non ho 12 colori diversi

Probabilmente il tuo tema non cambia ogni mese (solo i pazzi come me sono capaci di farsi venire in mente certe idee) ma la divisione dei fogli di stile in base alla loro funzione può aiutarti a rendere più flessibile la manutenzione periodica. Separando la base (dimensioni, posizionamento, spaziatura) dai colori, avrai la possibilità di assegnare tonalità diverse a categorie diverse del tuo blog. Alcuni grossi siti a cui ho collaborato, usano questo approccio per comunicare visivamente all’utente in quale area del sito si trovano. Ad esempio giallo se sei nell’area amministrativa, verde se sei nella parte dedicata agli studenti, blu se invece si tratta di una pagina per i dipendenti interni. Ovviamente da brava persona accessibile, avrai cura di non veicolare l’informazione esclusivamente attraverso i colori, altrimenti i daltonici come me se la prenderanno a male.

Commenti

  1. fede ha detto:

    con carta e penna…anzi …tastiera e mouse alla mano, attendo un nuovo segreto svelato!!!

  2. Simona ha detto:

    anch’io sono una web designer provetta e mi hai dato una grande idea per i prossimi lavori, qual’ora se ne presentasse la necessità di variare l’aspetto della pagine!
    grazie grazie 🙂

    1. camu ha detto:

      @simona: beh allora rimani sintonizzata per altri interessanti spunti di riflessione, la serie durerà fino a marzo, nelle mie previsioni 🙂

  3. Simona ha detto:

    e chi lo molla più i tuo blog 🙂 è il più ben fatto e ospitale che io abbia visto 😉
    ma ti prego rispondimi anche in’in diretta dagli usa’…please!!!!!!!!!!!!!

  4. camu ha detto:

    @Simona: grazie cara, ora provvedo 🙂

Lascia un commento