Grafica  »  Articoli  »  Teoria grafica 

Abbiamo già visto che per realizzare un'interfaccia di un sito Web dal punto di vista della grafica dobbiamo prima pensare alla generazione dell'idea (cfr. articolo: «Creare una interfaccia. Parte prima: generazione dell'idea») e successivamente dobbiamo creare il vero e proprio layout (cfr. articolo «Creare una interfaccia. Parte seconda: dall'idea all'impaginazione»).

Infine, dopo aver realizzato con il programma di grafica preferito il nostro layout, dobbiamo trasformarlo in HTML. In questo articolo vedremo come fare.

Tagliare il layout di un sito web

Imparare a "tagliare" bene un layout per ottenere un'interfaccia veloce da caricare e semplice da modificare è forse il passo meno creativo di tutto il processo di realizzazione, ma non per questo quello meno importante o che richieda meno attenzione e tecnica.

Per fare in modo che il nostro layout non sia un'unica, enorme ed ingestibile immagine, dobbiamo riprodurre l'interfaccia che abbiamo ideato tramite le regole e le strutture del codice HTML. A questo scopo dobbiamo tagliare le immagini dell'interfaccia che abbiamo creato.

Suggerimenti e consigli

Per prima cosa studiamo bene il layout. Dobbiamo capire come ottimizzare il taglio sia delle immagini che dovranno ripetersi sia di quelle che non dovranno farlo. Una buona ottimizzazione si ottiene cercando di creare il minor numero di immagini con la maggiore leggerezza possibile.

Ricordate sempre che:

• Non bisogna esagerare nel ridurre le immagini che andranno ripetute come sfondo fino a pochi pixel : texture minuscole (pochi pixel) in alcune occasioni danno problemi di rendering sui browser.

• È importante far fare la maggior parte del lavoro al codice: qualsiasi testo, sfondo monocromatico o effetto qualsivoglia che possa essere ricreato usando semplicemente HTML e CSS, è meglio venga ottenuto tramite codice.

  Ciò ha molti importanti vantaggi:

  • Riduce il peso della pagina, e quindi i tempi di download da parte dell'utente: le immagini, per quanto ben ottimizzate, non potranno mai competere quanto a leggerezza con semplice HTML.
  • Facilita future modifiche: cambiare un testo o il codice esadecimale di un colore nell'HTML o, meglio ancora, in un CSS, è un attimo, rifare o reimpaginare immagini è tutt'altro lavoro!
  • Soprattutto per quel che riguarda i testi: mantenere i testi come tali, invece che farne delle immagini, migliora l'indicizzazione nei motori di ricerca (più testo significativo è presente e migliore è l'indicizzazione).

• A meno di casi particolari vi sconsiglio l'uso di software che "tagliano" e impaginano in automatico i layout. Per quanto sofisticati e ben fatti siano, infatti, essi producono sempre un numero enorme di immagini rispetto allo stretto necessario, e un generano pessimo codice HTML, senza un uso corretto ed uno sfruttamento adeguato delle grandi potenzialità dei CSS.

• Per ottimizzare al massimo le immagini utilizzate un software adatto allo scopo (in alcuni pacchetti software famosi sono già inclusi tool di ottimizzazione, come accade ad esempio con ImageReady compreso nel pacchetto Adobe PhotoShop).

• È importante salvare ogni immagine nel formato che permette una migliore ottimizzazione. Non mi dilungherò su questo punto, già trattato in molti articoli; ricordate semplicemente di usare gif o png8 per immagini con grandi aree monocromatiche e jpg o png24 per fotografie o immagini con molte sfumature.

Altri articoli

Altre guide

Altre newsletter