Troppo bello per essere vero, lo so… ma fidati! Non c’è trucco e non c’è inganno. E’ tutto molto semplice. Non facile (niente che davvero ha importanza lo è), ma è semplice: realizzate un design al giorno che sia totalmente fuori dai vostri schemi. Probabilmente è una tecnica che già conosci, ma che non hai mai applicato prima, oppure l’hai fatto ma in maniera del tutto involontaria o casuale (ad esempio provando ad usare font totalmente nuovi, disposizione degli elementi in maniera del tutto diversa, e così via), ma posso assicurarti che, se applicata in maniera costante, potrai lentamente migliorare senza sforzo apparente, migliorando le tue competenze.

La chiave della crescita non risiede nei grandi cambiamenti, improvvisi e traumatici, ma in quelli piccoli e costanti. Imparare ed applicare nuove tecniche o stili differenti in una volta sola può risultare non solo eccessivamente drastico, ma anche stancante alla lunga (oltre che dannoso per la gestione dei propri lavori e dei propri clienti, che reclamano il nostro preziosissimo tempo).

CREARE UN’ABITUDINE

Quello che intendo spiegarti è come creare un’abitudine per migliorarsi, come lavarsi i denti ogni mattina. Per quest’ultimo gesto neanche abbiamo bisogno di pensarci e organizzarci: è una cosa talmente naturale. Le abitudini sono probabilmente l’ingrediente migliore per assicurarci una crescita qualitativa. Faccio un esempio: se sei disordinato, e decidi di fare una completa pulizia dell’appartamento una tantum, non riuscirai a farlo sempre e in maniera costante, ti risulterà sicuramente un sforzo enorme. Ma se invece puliamo una cosa diversa ogni giorno, svuotiamo sistematicamente il cestino, togliamo la polvere quotidianamente, non avremo bisogno di dover fare le grandi pulizie spezzandoci la schiena. Così facendo avremo nuove abitudini, che svolgeremo in maniera del tutto spontanea e naturale, senza alcuno sforzo.

Per il designer è la stessa cosa. Non puoi trasformarti in un designer totalmente diverso, pretendendo tutto e subito. Piuttosto prova a rendere quotidiano l’utilizzo di una nuova tecnica fuori dai tuoi schemi. Sostanzialmente è facile provare una nuova combinazione di colori, nuovi font o sperimentare nuovi layout, ma se ripetuto costantemente diventerà una nuova e sana abitudine giornaliera.

PERCHE’ SOLTANTO UNA AL GIORNO?

Sicuramente ti capiterà, al primo giorno di applicazione di questi consigli, di renderti conto di avere le capacità e il tempo per poter imparare molto di più e di poter magari sperimentare 3 o 4 nuove tecniche al giorno.

NON FARLO!

E ci sono dei buoni motivi per non farlo… primo perchè probabilmente non avrai sempre tutto questo tempi nei prossimi giorni, e in quel caso la “costruzione” dell’abitudine rischia di fallire miseramente. Prova a chiedere a qualunque maestro di fitness, e vedrai che tutti ti diranno che un pò di esercizio ogni giorno è molto più efficace di un gran lavoro fatto soltanto una volta a settimana. Un designer può “tenersi in forma” usando questo stratagemma, fa esercizio quotidianamente e apprende sempre qualcosa di nuovo.

Utilizzando questi semplici consigli su base quotidiana, vedrai che nel giro di poche settimane noterai dei notevoli cambiamenti, pur senza stravolgere la tua giornata lavorativa. Ricapitoliamo:

• Scegli ogni giorno una nuova tecnica o un nuovo schema nel mondo del design, applicalo e fallo tuo.
• Non farti tentare dalla voglia di apprendere troppe tecniche in un giorno solo: tieni fede al proposito iniziale e approfondisci nel caso solo una tecnica.
• Creare una vera e propria abitudine, realizzando questo passaggio ogni giorno.

Sono curioso di ricevere vostri consigli e/o feedback sull’applicazione di questo semplice principio. A presto.

Se finora non vi siete ancora lanciati alla scoperta di questo nuovo mondo, quale migliore occasione che scoprire 10 template web gratuiti realizzati in HTML 5 e CSS 3, pronti per essere studiati e analizzati.

HTML5 Started Pack

HTML5 Starter Pack è un ottimo template, perfettamente modellabile ad ogni situazione. Questo template è cross-browser (incluso IE6), già ottimizzato per i tablet e i netbook, può avvalersi di Cufòn e include alcune classi ri-usabili. Inoltre include anche un file PSD con il layout.

Gotta’ love HTML5 & CSS3

Un layout da galleria immagini basato su HTML5 e CSS3, che include:

• transizioni animate (come ad esempio una descrizione animata attivata all’hover sull’immagine) usando soltanto il CSS;
• un interfaccia tabellare per le varie gallerie usando l’elemento :target di CSS3.

A Free HTML5 and CSS3 Theme

Questo template prevede una sub-page e un form per contatti con validazione server-side e codice (in PHP) per l’invio della mail. Utilizza 960.gs ed include l’uso di un font custom chiamato Chunkfive (sfruttando la funzione @font-face di CSS3).

Coding a HTML 5 Layout From Scratch

Questo template è un’ottima vetrina dimostrative per gli elementi header, footer, section, etc.
E’ stato utilizzato anche hCard microformat per definire il creatore del template. Per il CSS3 troviamo l’utilizzo dell’ombra per i testi e altre funzioni.

52framework

52framework è uno strumento completo che potrà aiutarvi a costruire un sito in HTML5 e CSS3 utilizzando i nuovi tag, i campi form, gli angoli arrotondati, ombre testuali, e tanto altro ancora. Include un sistema a griglia e un CSS reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial completo e dettagliato per la creazione di un’applicazione iPhone in formato sito web usando CSS3 e HTML5. Il template in oggetto utilizza i nuovi tags, quali section, aside, header e footer.

Create an Elegant Website With HTML5 And CSS3

Questo tutorial consiste nella creazione di una semplice pagina web in HTML5 e CSS3 e condivide anche il risultato finale con un comodo download. Sono stati utilizzati molti elementi nuovi ed è stato integrato Modernizr per la compatibilità con IE.

Free HTML5 Template

Un layout HTML presentato in versione 2 colonne  e 3 colonne. Include inoltre anche il file PSD.

HTML5 & CSS3 One-Page Template

Un template a singola pagina che sfrutta il jQuery per le slide animate. Viene fornita anche una versione in HTML semplice.

FlipThru HTML5 and CSS3 Template

Questo è un template semplice, ma elegante, e che sfrutta buona parte delle caratteristiche dell’accoppiata HTML5-CSS3. Prevede anche l’uso di uno slider Accordion realizzato tutto in CSS3.

Che cos’è l’HTML semantico

La semantica è la scienza che studia il significato, di come viene generato e applicato ai segni. “Perchè X significa Y?” è una questione di semantica. L’HTML è un linguaggio di marcatura usato per realizzare pagine web, ed è interpretato dai browser web, e da altri tipologie di “agenti”, quali cellulari, motori di ricerca, etc.

L’HTML consiste di due tipologie di elementi:

• i Tag
• il contenuto testuale

Alcuni tag possono essere contenuti di se stessi (vedi le immagini, i filmati in Flash o i metadata), ma la maggior parte è usata per creare una struttura per il contenuto.

L’HTML semantico, o HTML semanticamente corretto, è il linguaggio HTML in cui i tag vengono studiati e selezionati appositamente per il significato del contenuto. Facciamo un esempio! Per creare una pagina che usi un HTML semanticamente corretto:

• Un tag paragrafo (<p></p>) dovrebbe trovare uso solo nel caso di un paragrafo (che è un concetto strutturale) e non per creare uno spazio in una pagina web. Mai usare una serie di tag <p> per creare spazio!
• I tag grassetto (<b></b>) e corsivo (<i></i>) non dovrebbe mai essere usati,  perchè hanno a che fare con la formattazione, ma non con il significato o la struttura del contenuto. Piuttosto, vanno usati i tag (<strong></strong) e (<em></em>) (che significa enfasi), che modificheranno rispettivamente il testo in grassetto o corsivo, aggiungendo anche un significato alla struttura del contenuto.
• I tag HTML non dovrebbe mai essere usati per applicare uno stile grafico, perchè questo è il lavoro principale del CSS (Cascading Style Sheets).

Perchè l’HTML semanticamente corretto è migliore

Scrivere codice HTML semantico comporta notevoli benefici:

• Facilità d’uso
• Accessibilità
• Ottimizzazione per i principali motori di ricerca
• Riutilizzo

Facilità d’uso

Prima di tutto, l’HTML semantico è un HTML pulito e chiaro. E’ decisamente più semplice e immediato leggere e modificare il codice senza aver a che fare con tanti tag extra e stili inline. Scrivere codice in questo modo ci permette anche di risparmiare tempo (e soldi) quando altre persone e/o collaboratori dovranno interagire con esso – ad esempio, uno sviluppatore web che deve implementare la nostra pagina all’interno di un CMS o di una web application. Infine, i file HTML semantici sono naturalmente anche più leggeri, e vengono caricati dai browser più velocemente.

Accessibilità

A meno che non dobbiate interagire con il codice HTML attraverso media diversi da un browser web, non è affatto scontato immaginare che le nostre pagine web hanno una vita anche fuori dalla finestra di Internet Explorer, ma spesso è così, perchè possono essere utilizzate e visualizzate anche da persone o dispositivi in maniere del tutto differenti.

Quando separiamo l’aspetto visuale (in questo caso, lo stile) dall’attuale significato di un documento, finiamo per ottenere un documento che significa sempre la stessa cosa. Cambia il modo in cui è presentato o in cui viene usufruito. Una delle tecniche più comuni tra i web designer è di applicare differenti CSS a seconda dei media usati. Ad esempio, possiamo applicare uno stile per la stampa su carta, un altro per la visualizazione su schermo, e un altro ancora per la visualizzazione su un browser che converte il testo in audio. Questi browser “speciali” riconoscono anche tag come <strong> o <em>, ma li trattano in maniera totalmente differente da un browser classico, cambiando il tono della voce o il volume, piuttosto che il contrasto o lo stile del testo, il che porta comunque allo stesso significato, ma in un contesto differente.

Ottimizzazione sui principali motori di ricerca

Gli spiders e i crawlers dei motori di ricerca, quale Googlebot, rappresenta un altra tipologia di dispositivo capace di interpretare HTML. Questi, inoltre, valutano anche il contenuto di una pagina web, per cercare di apprenderne il significato.

Quando un crawler trova una pagina web, salva un rapporto su ciò di cui tratta la pagina in un database indicizzato, da usare poi nel caso di corrispondenze nelle ricerche web. La domanda principale è: in base a cosa i motori di ricerca danno priorità ai vari termini ricercati sulle pagine risultanti?

Naturalmente, tutti utilizzano sistemi differenti, ma una delle chiave fondamentali dell’ottimizzazione è di usare il caro buon vecchio buon senso. Se fossimo un motore di ricerca, come ci muoveremmo? Se provassimo a immaginare i problemi che incontra un motore di ricerca, ben poche cose sarebbero chiare. Ad esempio, supponiamo di avere 2 pagine web con esattamente lo stesso contenuto (10 Kb). La seconda pagina ha 30 Kb di codice addizionale, markup superfluo fatto di stili inline, molti <div> annidati e immagini decorative. Naturalmente questa pagina apparirà sicuramente più gradevole ad un visitatore (forse), ma se ogni pagina contiene il termine di ricerca “bluebottle” 5 volte, quale pagina sceglieremmo (sempre supponendo di essere un motore di ricerca) come più adatta al risultato di una ricerca con termine “bluebottle”?

Sicuramente la prima pagina, più leggera, per una serie di motivi:

• La densità di keyword di una pagina più leggera è superiore. Ritroviamo infatti il termine 5 volte in 15 kb, al contrario della seconda, dove il termine ricorre 5 volte in 40 Kb. Qualunque sia il codice extra, sicuramente non riguarderà il termine “bluebottle”.
• Il termine apparirà sicuramente più volte più in alto nella pagina leggera che non in quella di 40 Kb. Naturalmente, prima troviamo la parola nel nostro documento, prima vuol dire che quel documento è esattamente quello che stavamo cercando o che il termine riguarda specificamente il contenuto di esso.
• Assumendo che la prima pagina sia scritto con HTML semantico, è probabile che il termine compaia all’interno di un tag di alto valore (quale può essere un tag heading o un link) in questa pagina piuttosto che nella pagina “graficamente ricca” (che potrebbe usare un’immagina come link, senza magari neanche il giusto attributo ALT).

Riutilizzo

Quando il nostro contenuto (ed il relativo significato) è separato dallo stile (CSS diversi a seconda del media), esso potrà essere compreso nello stesso modo da tutti i dispositivi. Questo vale anche per eventuali dispositivi a noi ignoti (come i crawlers automatici che raccolgono i feed RSS su determinati argomenti, oppure motori di ricerca specifici per immagini o video), o altri ancora che non sono stati inventati.

Negli ultimi due anni si è assistito all’uso di una miscelazione di contenuti come una delle principali caratteristiche di siti e applicazioni web. Tutto ciò avviene anche senza la consapevolezza del creatore dell’origine di questi contenuti, ma nella maggior parte dei casi questa libertà di “condivisione” porta solo ed esclusivamente benefici al creatore originale.

Spesso in queste situazioni il contenuto preso da una pagina web è formattato in maniera differente all’interno di una nuova pagina, il che obbliga a rimuovere ogni stile inserito all’interno. (Notare che gli stili inline, applicati quindi direttamente ai tag HTML, sovrascrivono le informazioni provenienti da CSS esterni, quindi dovrebbero essere rimossi sempre).

Ovvio che è decisamente più facile prendere e riutilizzare il contenuto web da altre fonti, e applicarle a vari media, quando questo contenuto non presenta informazioni di stile inserite specificamente all’interno e quando viene utilizzato al suo interno HTML semantico che può aiutare un programma a comprendere il significato e la struttura del contenuto stesso.

Risultato finale

Di seguito trovate l’immagine del layout definitivo che andremo a creare con questo tutorial.

Definiziamo il documento Photoshop

1. Creiamo un nuovo documento in Photoshop con le seguenti dimensioni: 1200px x 1160 px e settiamo i parametri dello stesso seguendo questa immagine:

Creiamo il background del Layout

2. Nel primo layer, creiamo il nostro background usando lo strumento Gradiente (G). Assicuriamoci che sia selezionato Gradiente Lineare come tipo gradiente. Settiamo il colore in primo piano a #9D6000 e il colore di sfondo a #FFFFFF.

Aggiungiamo una texture al background

3. Ora aggiungeremo alcune texture al nostro background sfumato. Scarichiamo da qui l’immagine da usare come texture. L’immagine è gratuita per uso personale e commerciale, ma non può essere rivenduta in nessun modo. Apriamo il file chiamato 3484741593_7575a6ebc7_b.jpg in Photoshop, File -> Apri (CTRL + O). Usiamo la funzione Trasforma (CTRL + T), e tiriamo la texture in modo da coprire tutto lo sfondo.

4. Usando un normale pattern gomma (E) con un diametro di 300px e l’opacità settata al 21%, cancelliamo il lato sinistro e tutta la parte bassa della texture. Nell’immagine successiva potrete vedere bene quali aree cancellare.

5. Scarichiamo da qui e apriamo il file 3484744611_f995d6c67f_b.jpg in Photoshop e trasciniamolo sul nostro piano di lavoro. Usiamo lo strumento Trasforma (T), ruotiamolo di 90 gradi in senso orario. Cambiamo la modalità di blending di questa texture in Luminosità e settiamo l’opacità del layer al 39%. Ripetiamo il passaggio numero 4 anche a questa texture, cancellando le stesse sezioni con un cancelletto soft.

6. Scaricate qui un interessante e utilissimo pacchetto di brush per Photoshop. Questo set è gratuito per uso personale e commerciale, ma non può essere rivenduto. Ora selezioniamo lo strumento Pennello (B) e selezioniamo questa brush cliccando sulla freccia, come nell’immagine seguente:

Non appena sarà aperto il pannello, cliccate sulla freccia (come da immagine seguente) e selezionate Carica Pennelli:

7. Ora crate un nuovo livello al di sopra delle texture. Settiamo il colore di primo piano a #000000, usiamo la sesta brush dal set che abbiamo appena installato (come da foto):

Una volta selezionato, clicchiamo sulla nostra immagine per “stampare” la brush, piazzandola non al centro, ma leggermente decentrata a sinistra, come da immagine seguente:

Cambiamo la modalità di questo livello a Sovrapponi e settiamo l’opacità al 52%, così da raggiungere questo risultato:

8. Ripetiamo tutto il passaggio numero 7, ma selezionando un’altra brush dal nostro nuovo set, quella con codice 2500:

Settiamo la modalità di questo livello a Sovrapponi e l’opacità al 41%. Dovremmo ottenere alla fine un risultato come il seguente:

9. Creiamo un altro livello, selezioniamo nuovamente la brush del passaggio 7 (la n. 2499), ma stavolta selezioniamo come dimensione 432 px e applichiamola in alto a sinistra del nostro canvas:

10. Su questo stello livello, utilizzando lo strumento Sfumino con una brush tonda morbida, clicchiamo e sfumiamo su quest’ultimo livello, trascinando verso il basso, fino ad ottenere un risultato simile al seguente:

11. Cambiamo adesso la modalità di questo livello su Sovrapponi, e l’opacità al 35%:

Settiamo le guide di Photoshop

12. E’ giunto il momento di inserire il contenuto. Per poter essere sicuro di inserire il materiale perfettamente al centro, inseriamo due guide equidistanti partendo dal lato sinistro e destro, per una larghezza di 1000 px, come da immagine:

Creiamo il logo

13. Utilizziamo lo strumento Testo Orizzontale (T), con un colore #3A0707, e aggiungiamo il titolo del sito web al nostro canvas. Come font possiamo utilizzare Stampete (scaricabile qui) o altri che potrete trovare qui. Sono tutti gratuiti per uso privato.

Creiamo la barra di navigazione

14. Sulla stessa riga del logo, ma sul lato destro, creiamo la barra di navigazione con i link principali del nostro sito web, utilizzando lo stesso font del logo, ma di dimensione ridotta:

15. Aggiungiamo un divisore tra le voci della barra di navigazione, utilizzando sempre lo strumento Testo Orizzontale (T), scrivendo I tra le voci utilizzando lo stesso font e lo stesso colore. Questo carattere farà da vero e proprio separatore. E’ consigliabile utilizzare una dimensione della I leggermente superiore, per rendere maggiormente evidente la separazione tra le varie voci.

Creiamo la sezione I MIEI LAVORI

16. Al di sotto della nostra “testata” (composta da logo e barra di navigazione), inseriamo la sezione I MIEI LAVORI, che sarà caratterizzata da un’immagine di un nostro lavoro rappresentativo (che servirà poi da miniatura e come link alla scheda dettaglio del lavoro), e la descrizione sul lato sinistro, utilizzando come titolo lo stesso font (nel nostro caso Stampete), e come testo descrittivo un più classico Arial.

Per l’immagine che abbiamo selezionato come miniatura del nostro lavoro, creiamo una traccia, utilizzando l’opzione di fusione Traccia, con colore #BA5009, e grandezza 12 pixel, come da immagine seguente:

Creiamo la sezione ALTRI LAVORI

17. Ora aggiungeremo una sezione “ALTRI LAVORI” appena sotto la miniatura del nostro lavoro principale. Come colore del titolo, utilizzeremo lo stesso della cornice al punto 16, #BA5009.

Per le immagini scelte, utilizziamo la stessa funzione del punto 16, ma con dimensione 16px e con colore #E7C788.

Creiamo la sezione “Informazioni sul sito”

18. Sul lato sinistro della sezione “I NOSTRI LAVORI”, creiamo una sezione, con titolo “Informazioni sul sito”. Come titolo utilizziamo colore e font della sezione a destra, mentre per il testo descrittivo il solito Arial.

Creiamo la seconda sezione contenuto

19. Sotto questa prima sezione contenuto, costituita da “Informazioni sul sito” e “Altri lavori”, creiamo una seconda sezione, dove inseriremo i riferimenti per i contatti (Get in touch), Flickr (con le foto di altri lavori o gallerie preferite) e Twitter. Utilizziamo come font e colori gli stesso del passaggio 18.

Creiamo il piè pagina

20. Alla fine del nostro canvass, sotto le tre sezioni che abbiamo creato, realizziamo il nostro piè pagina (footer). Creiamo un nuovo livello e utilizzando lo strumento Rettangolo (U) realizziamo un rettangolo in basso, e con il secchiello riempiamo il tutto con il colore #BA5009. Questa sezione conterrà le informazioni base sul copyright.

21. Usiamo lo strumento Gomma (E) e, selezionando uno qualunque dei brush installato precedentemente, creiamo un nuovo livello e riduciamo l’opacità del livello al 21% (come da immagine):

Ora cancelliamo alcune parti del rettangolo del nostro piè pagina, e appena finito inseriamo i dati sul copyright utilizzando il colore bianco e lo strumento Testo Orizzontale, scrivendo esattamente al centro del rettangolo.

Assicuriamo che al momento dell’aggiunta del testo sul copyright, la funzione di anti-aliasing testuale sia attiva, in modo da rendere i caratteri chiari e perfettamente leggibili.

Creiamo le linee divisorie orizzontali

22. Ora, per il tocco finale, creiamo le linee che separano le nostre sezioni. Creiamo un nuovo livello, utilizziamo lo strumento Matita (B), con un diametro di 2px e tracciamo una linea orizzontale tra la testata e prima sezione contenuti. E’ consigliabile tenere premuto il tasto Shift per tracciare una riga dritta e precisa.

23. Selezioniamo nuovamente lo strumento Gomma (E), selezioniamo una delle brush del nostro set, settiamo il diametro a 97 px e l’opacità al 40%. Cancelliamo un pò a caso sulla linea appena tracciata, per ammorbidirla e renderla più “grunge”.

24. Duplichiamo questo livello, cliccando con il tasto destro sul livello e selezionando “Duplica livello…” e utilizziamo le copie che ci servono per dividere le restanti sezioni, come nell’immagine seguente:

CONGRATULAZIONI! Avete completato il tutorial in maniera esemplare e ora potrete gustarvi il canvas web con stile grunge del vostro nuovo sito web. Al prossimo tutorial completo su Photoshop e Web Design.

CHUNK OPEN-SOURCE

Chunk è un font ultra-bold slab serif che ricorda i caratteri del vecchio Far West, e i titoli di quotidiani. Utilizzato principalmente per lo schermo, le lettere grandi sono ben rifiniti e per un uso quotidiano. Font OpenType. Realizzato da Meredith Mandel.

Titilium

Un font molto leggibile, accademio e semplicemente perfetto per il brand design di un’azienda, riviste e testate di siti corporate. Il font è disponibile in diverse misure: versione testo, versione titolo, versione extra-black e versione full.

Amputa_Bangiz_Standard_TTF

Un font originale e stile retro/grunge, realizzato da Quiccs e disponibili gratuitamente e utilizzabili in progetti privati e commerciali. Include anche alcuni caratteri non alfanumerici.

SerifBeta_OTF

Serif Beta è un set di font gratuiti della serie serif largo, e include 3 pacchetti con misure 6, 12, e 72. Il pacco include anche simboli e font bold. Ogni font presenta 274 glifi. E’ gratuito, sia per uso personale che commerciale, e un feedback all’autore è ovviamente apprezzato (autore Dersven).

Rough_Draft_regular

Un font TrueType ormai leggendario, realizzato da Harold Lohner. Contiene 189 caratteri, suddivisi in 9 fasce. Per soli 5$ è possibile acquistare il set completo.

Comfortaa

Comfortaa è un font leggibile, semplice e moderno, con 466 caratteri e simboli differenti (inclusi gli accenti europei). Disponibile in 3 misure: Regular, Bold e Thin. Il font presente angoli dolci e arrotondati. E’ gratuito per progetti ad uso personale e commerciale. Realizzato da Johan Aakerlund in Danimarca.

• Javascript molto compatto: meno di 1 kb!
• Sistema la maggior parte dei problemi causati dall’attributo Filter.
• Funziona sugli oggetti img e sugli attributi background-images.
• Si esegue direttamente, senza dover definire classi o chiamare funzioni.
• Permette l’uso di elementi con auto width e auto height;
• Davvero molto semplice da implementare.

Per scaricarlo, basta cliccare qui.

L’installazione è molto semplice. Una volta scaricato l’archivio, basta copiare il file unitpngfix.js nella cartella del vostri sito web, e il file clear.gif nella cartella immagini. Bisognerà aggiungere il seguente testo all’header della pagina web interessata:

<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Successivamente, basterà verificare, all’interno del file unitpngfix.js che il percorso del file clear.gif sia corretto (trovate il percorso nella prima linea di codice). Et voilà, il gioco è fatto!

Esiste una soluzione molto semplice per risolvere questo problema e consiste nell’utilizzo degli hacks.
Il miglior escamotage per risolvere il problema è quello dell’uso di fogli di stile multipli dedicati, per ogni browser che vorremo rendere compatibile con il nostro sito.

Ovviamente non è necessario riscrivere tutto il codice dei CSS, basta semplicemente aggiustare quelle parti che ci danno dei problemi.

Per inserire i link ai fogli di stile aggiuntivi, dedicati ad esempio a Internet Explorer 6 e 7, basta utilizzare queste istruzioni nell’head della pagina web:
<!--[if IE 6]>
<link href=”stili-ie6.css” mce_href=”stili-ie6.css” rel=”stylesheet” type=”text/css”/> <![endif]–>

<!--[if IE 7]>
<link href=”stili-ie7.css” mce_href=”stili-ie7.css” rel=”stylesheet” type=”text/css”/><![endif]–>

Potremo così usare come elemento di partenza un foglio di stile creato considerando i browsers che rispettano gli standard del W3C e usare i fogli di stile aggiuntivi per risolvere i problemi di visualizzazione dei browser non standardizzati.

L’aspetto interessante dell’uso di fogli di stile multipli è che ci permettono di correggere in qualsiasi momento le impostazioni dedicate a un ben determinato browser in maniera rapida ed efficace per tutto il nostro sito.

Una curiosità per chi si chiede cosa voglia dire il termine Hack (la citazione è presa da Wikipedia):

il termine “hack” era un ternime in voga tra i lavoratori inglesi, che costruivano locomotive in USA. Con l’espressione gergale “that’s a hack!” veniva solitamente indicato un “bel lavoro, ben fatto, di qualcosa di imponente e costruito con metodo e criterio”

Fare business sul web non è poi così diverso dalla realtà tradizionale. La maggior parte delle persone vogliono visitare un negozio ben organizzato, pulito, che rifletta un’immagine positiva e professionale, e che dia un senso di sicurezza e fiducia. Supponendo che un cliente visiti un altro negozio che è carente di una di queste caratteristiche, pur trovando lo stesso prezzo, visiterà sempre il primo. In questo modo il negozio n. 1 ha mantenuto una buona sinergia tra il proprio brand, l’usabilità e la fiducia (che in questo caso possiamo rapportare ad una buona visibilità).

Lo stesso si può dire per il Web. Esistono molti siti web orrendi, creati e realizzati con un solo scopo: posizionarsi al meglio sui motori di ricerca. Questa operazione è più conosciuta come SEO (Search Engine Optimization), e consiste nel realizzare un sito in modo che i motori di ricerca possano trovare in maniera facile e veloce le pagine contenute all’interno e indicizzarle, così da aumentare esponenzialmente la visibilità del sito. Ma come visto in precedenza, la visibilità è solo uno dei tre elementi dell’equazione.

Tornando all’esempio del negozio, se ne abbiamo uno posizionato in una strada ad alto traffico, ma è realizzato male, nessuno lo visiterà. Se invece è esteticamente il non-plus-ultra, ma è situato nel bel mezzo del nulla, nessuno lo visiterà. Se il negozio è ben realizzato e ben situato, ma non ci registri di cassa e dipendenti preparati, nessuno lo visiterà.

Quindi, riassumendo, ci sono 3 elementi fondamentali per il successo:

Brand: L’estetica di un sito web. Il Brand dovrebbe essere unico, esclusivo e deve far parlare di se, costantemente.

Usabilità: L’equivalente del rendere semplice la ricerca di oggetti in un negozio, e fare in modo che l’acquisto sia facile e piacevole come la visita del negozio stesso.

Visibilità: O per meglio dire, progettando e realizzando per il SEO, e che possiamo raggiungere seguendo alcuni preziosi consigli discussi successivamente.

Il Brand è molto più di un semplice Logo

Il Brand del cliente dovrebbe rappresentare tutto il business del cliente stesso, raccogliendo tutto lo spirito aziendale ma restando unico e professionale. Il Brand deve essere presente in tutti gli elementi, anche quelli collaterali al web design e al logo, quindi anche nell’interfaccia, nelle funzioni interattive, nelle schermate di caricamento: si deve estendere insomma a tutto ciò che cui normalmente non si tiene in considerazione. Eccone alcune esempi:

• Uso dei colori: fare una ricerca sull’impatto fisiologico e psicologico di certi colori e come possono tornare utili nel brand del cliente. Fare attenzione all’uso di colori che siano comunque accessibili e che forniscano abbastanza contrasto.
• Uso del linguaggio: tenere conto degli elementi demografici, psicografici ed etnografici del cliente. A seconda del business, questi sono tutti fattori fondamentali per raggiungere l’audience richiesta sia dal materiale off-line che da quello on-line.
• Caricamento del sito: immaginate una fila di persone che aspettano ore per entrare nel vostro negozio solo per dare un’occhiata. A meno che il vostro nome non sia Apple e non state vendendo l’ultimo iPhone, probabilmente la maggior parte girerà subito i tacchi e andrà via. La stessa cosa si può dire per un sito web. Cercate di far caricare le pagine velocemente, usando un buon bilanciamento di HTML e CSS, tecniche di compressione delle immagini, file Javascript e CSS esterni. Valutate anche un test del sito su connessioni a 56K.
• Compatibilità su diversi browser: suonerebbe alquanto strano se il 70% dei visitatori di un sito non potesse visualizzare il logo, o se una parte della grafica fosse malamente sovrapposta. Il cliente vuole raggiungere il 100% del proprio target, non solo una piccola fetta. Ragion per cui è consigliabile utilizzare una parte del tempo previsto per la progettazione per rendere il proprio sito web compatibile con tutti i principali browser, risparmiando mal di testa e incompresioni agli utenti.
• Accessibilità: ecco un termine super-abusato di questi tempi. L’accessibilità (possibilità di utilizzo del sito web anche da parte di disabili, con coloro che hanno problemi di vista o di percezione di colore) è un elemento fondamentale di cui tener conto. Un sito accessibile è non solo completo, ma sarà sicuramente anche adatto ad un miglior posizionamento sui motori di ricerca.

Per mettere insieme queste elementi di Web Design e raggiungere risultati importanti bisogna avere una direzione chiara, una direzione che possa essere di riferimento per ogni aspetto del design, attraverso un obiettivo comune. Bisogna pensare in maniera strategica.

Cos’è il design strategico?

Il design strategico è la fusione di vostri obiettivi di organizzazione con ogni singolo aspetto del processo di design. Non state semplicemente creando un’interfaccia bella e funzionale. State creando un’interfaccia che vi aiuterà a raggiungere gli obiettivi dell’azienda.

Ci sono anche fin troppi siti con una veste grafica notevole e pieni di tutte le ultime tecnologie, ma che falliscono miseramente nel proprio scopo principale. Gli ultimi trend nel design sono importanti perchè forniscono sempre un’ispirazione al passo con i tempi e nuove tecniche, ma la loro implementazione deve essere intelligente ed oculata. Ad esempio, un blog non è una brochure pubblicitaria; è necessario concentrarsi sull’usabilità e la leggibilità piuttosto che sullo stile. Allo stesso modo, un sito web che promuove un gioco dovrebbe essere caratterizzato da una grafica e uno stile particolari, perchè in questo caso l’estetica gioca un ruolo molto importante.

Quando un designer crea un sito seguendo il trend del momento (ad esempio l’ormai abusatissimo Web 2.0) senza pensare assolutamente alle funzionalità e al business del sito stesso, difficilmente il risultato finale potrà soddisfare le sue aspettative.

Il Web Design è tutto lì: creazione di un’interfaccia che comunichi funzionalità, usabilità e accessibilità, tutto condito con uno stile che lasci il segno. Un Web Design efficace ha bisogno che tutti questi elementi siano in linea con gli obiettivi del sito e dell’azienda stessa che commissiona il sito. Il design strategico è la ricerca di questi obiettivi per usarli nel proprio design.

Implementazione del design strategico

Ora vediamo in 6 passaggi come pensare strategicamente su un progetto di Web Design:

1. Stabiliamo i nostri obiettivi
Una delle prime operazioni da fare in fase di startup di un progetto di Web Design è essere chiari sugli obiettivi del cliente o dell’azienda. Cosa pensate di raggiungere con questo nuovo sito web? Qual è lo scopo principale del sito? Chiedete al vostro cliente, al vostro manager o a voi stessi. Se le risposte non sono ancora chiare, allora bisognerà discuterne e mettere dei punti fermi. E’ necessario avere una direzione chiara per poter dare uno scopo al nostro design.

Ricordate che un sito web non è un’opera d’arte; è un’interfaccia che fornisce una funzionalità. Questa può essere vendere prodotti, fornire contenuto informativo, divertire, informare o fornire accesso ad un servizio. Qualunque sia la funzionalità, il design deve essere studiato per supportarla totalmente. Gli obiettivi sono importanti anche se state effettuando un restyling. Chiedetevi perchè state effettuando un redesign: volete incrementare il numero di iscrizioni, diminuire il bounce-rate o aumentare la partecipazione degli utenti?

Diamo un’occhiata, ad esempio, al sito web del New York Times. La sua funzione è fornire contenuto informativo. L’intefaccia molto essenziale è perfetta per questo scopo. Al contrario, AdaptD è uno studio di Web Design, quindi l’obiettivo non è fornire informazioni ma stupire i visitatori con il design, mostrare una gallery dei lavori e pubblicizzare i servizi dell’azienda. In questo caso la grafica ha un ruolo molto importante, e AdaptD garantisce un’esperienza di navigazione bella e ricca di colori.

2. Identifichiamo la nostra audience
Identificare la nostra audience gioca un ruolo importantissimo per decidere come sarà il nostro sito web. Molte informazioni possono influenzare il nostro design, tipo l’età, il sesso, la professione e la competenza tecnica. Un sito web di un gioco per computer avrà un’audience giovanile e quindi uno stile diverso da quello di un giornale di business, decisamente più serio. L’usabilità in questo caso giocherà un ruolo più importante per un’audience meno giovane e meno tecnica.

Tutto questo non solo potrà influenzare l’estetica generale del sito ma determinerà anche molti dettagli, come la grandezza dei font, quindi è necessario conoscere bene l’audience che andremo a interessare.

Prendiamo ad esempio il re-design rockeggiante di jQuery. In questo caso il designer ha esagerato nel tentativo di creare sensazione, fallendo nell’interessare un’audience più seria e decisamente più tecnica. Da allora, la grafica rock è stata modificata con una molto più semplice e conservativa.

Il target del sito Disney sono i bambini. Qui lo scopo è di divertire e di coinvolgere, e il sito raggiunge questo scopo inserendo i contenuti in un’interfaccia colorata con molti elementi interattivi.

3. Determinare l’immagine brand
Molti designer oggi tendono a seguire troppo le mode grafico/tecniche del momento e perdono di vista qual è il tipo di immagine che serve davvero all’azienda. Pulsanti glossy, sfumature, riflessioni possono andar bene per taluni siti web, ma possono essere totalmente sbagliati per il nostro brand.

Pensiamo, ad esempio, ai colori. Pensiamo alle sensazioni e alle emozioni che vogliamo scaturire. Il nostro design dovrebbe rappresentare la personalità e le caratteristiche del nostro brand. Tutto ha un proprio brand: anche se non vendiamo un prodotto o forniamo un servizio – ad esempio, un blog – il vostro sito web sicuramente da delle sensazioni ai vostri visitatori. Dovete decidere voi quali emozioni dare tramite il design.

Carbonica è un sito web nato per aiutarci a ridurre le emissioni di carbonio nell’atmosfera. L’ambiente amichevole rappresentato nel sito web è caratterizzato da immagini di carta e texture, e da tonalità di verde terra e marrone.
Restaurantica è un sito di recensioni di ristoranti. Il design è basato su uno stile che rappresenta le informazioni sotto forma di un vero e proprio menu da ristorante.

4. Design basato su obiettivi
Abbiamo stabilito lo scopo del nostro sito, identificato gli obiettivi, il target e l’immagine brand. Ora possiamo procedere all’implementazione del tutto. Come possiamo sincronizzare il design con la nostra strategia? Vediamo questo esempio.

Supponiamo che il nostro obiettivo primario è incrementare il numero di iscritti al nostro servizio Web. Come può il design raggiungere questo obiettivo? Ci sono almeno tre elementi che fanno la differenza:

• Creiamo una sezione “Servizi” sulla nostra pagina principale quanto più chiara possibile. I nostri visitatori non devono poter dubitare neanche un secondo sulle funzionalità del nostro sito web.
• Usiamo colori e contrasto in modo da evidenziare il pulsante e/o il link di registrazione. Se gli utenti non lo trovano, difficilmente potranno iscriversi.
• Ripuliamo il processo di iscrizione, eliminando gli elementi superflui; gli utenti possono compilare queste informazioni aggiuntive in un secondo momento. Se il form risulta lungo potrebbe portare a noia e non verrà mai compilato.

Questi sono tre semplici consigli che possono aiutarci nel design a raggiungere l’obiettivo di aumentare il numero di iscrizioni al nostro servizio. Gli obiettivi possono cambiare, ma la strategia è sempre la stessa: focalizzare tutti gli elementi di design per raggiungere questi obiettivi.

La stessa strategia si applica anche al nostro brand e alla nostra audience: creiamo una grafica che si adatta ad entrambe. Se la principale caratteristica del nostro sito è il divertimento, allora creiamo un”esperienza”. Possiamo usare tutti i colori e le immagini per farlo. Al contrario, se stiamo creando un stio che è focalizzato sulle informazioni, tipo un blog o un magazine, allora l’attenzione maggiore va su usabilità e leggibilità. Creiamo un’interfaccia che possa scomparire e che non distragga l’utente nella lettura.

Stubmatic è un’applicazione di box-office online. Il sito web esterno ha due scopi: illustrare il servizio e invitare le persone ad iscriversi. I nuovi visitatori possono restare sul sito solo per pochi secondi, quindi per non perderli bisogna essere sintetici. Possiamo farlo in questo modo:

• Usiamo immagini grandi e diagrammi per illustrare le funzionalità base del nostro prodotto e/o servizio.
• Mostriamo screenshots della nostra applicazione. Le persone vogliono vedere com’è prima di effettuare un download o di iscriversi.
• Fornire un tour guidato, con esempi descrittivi di come questo servizio può aiutarci a risolvere un problema. Mostriamo anche un video; meno sforzi fanno gli utenti per capire, meglio è.
• Mettere ben in evidenza il link di iscrizione in tutte le pagine.

Per avere successo il nostro sito web deve fare l’uso migliore della poca attenzione che i visitatori possono dedicare in fase di navigazione, non solo informando ma anche educando gli stessi utenti su cosa fa realmente il prodotto, e vendendo bene i benefici che può portare. Stubmatic usa elementi di design in maniera efficace per raggiungere questi obiettivi.

TechCrunch è un dei più popolari blog tecnici. Il restyling recente ha rimosso ogni singolo elemento grafico inutile dalla pagina. Ciò che è rimasto è solo il contenuto, la pubblicità e la navigazione. Linee sottili e sfurmature di grigio delineano la struttura della pagina, l’interfaccia quindi p molto essenziale e tutto ciò da massimo risalto ai contenuti. Per un blog con molti articoli pubblicati in un solo giorno, questo stile è l’ideale perchè permette un’accesso facile e veloce al contenuto.

5. Analizziamo i risultati
Una volta disegnato e pubblicato il nostro sito web, dobbiamo analizzare il nostro successo. E’ importante quanto i primi due passaggi perchè senza questa analisi non sapremo mai se stiamo o meno raggiungendo i nostri obiettivi.

Se l’obiettivo è di incrementare il numero di iscrizioni al nostro servizio, misuriamolo e vediamo se i cambiamenti portano a risultati positivi. Se vogliamo incrementare i sottoscrittori del nostro blog, controlliamo le statistiche RSS. Se vogliamo incrementare il coinvolgimento degli utenti, controlliamo se ci sono più commeni o più post sui forum.

Possiamo anche richiedere un feedback direttamente agli utenti, e sarebbe un ottimo modo per vedere se siamo sui binari giusti. Facciamo però attenzione a non implementare ogni singolo consiglio che ci verrà dato. Ognuno ha un proprio gusto, quindi le opinioni saranno certamente diversificate. Se decidiamo di collezionare i feedback, cerchiamo allora schemi comuni e partiamo da quelli per un’analisi.

Lo studio completo dell’analisi statistica del nostro sito web non è argomento di questo articolo, la cosa importante è che ci sia la possibilità di verificare il raggiungimento o meno dei nostri obiettivi primari. E’ un’informazione essenziale per capire se siamo sulla strada giusta.

6. Kaizen
Esiste una filosofia giapponese chiamata “Kaizen”, che si concentra sul miglioramento costante usando piccoli passi. Quando lavoriamo sul nostro sito web, dovremmo pensare in maniera Kaizen, perchè la versione che abbiamo pubblicato non è la versione finale. Non ci sarà mai una versione finale.

Possiamo sempre implementare miglioramenti, e la natura stessa di un sito web ci permette di farlo in qualunque momento. Questo perchè un sito web non è una rivista che stampiamo e vendiamo: una volta che una rivista è nelle nostre mani, non possiamo fare nessun cambiamento e nessuna correzione. Un sito web, invece, è pubblicato su un server: se c’è un errore , possiamo correggerlo. Allo stesso modo possiamo introdurre miglioramenti graduali e aggiornalo per renderlo sempre più efficace nello svolgere la propria funzione.

Usando i risultati della nostra analisi, possiamo identificare le aree con i maggiori problemi. Magari i nostri utenti non riescono a trovare il link RSS, oppure il bounce-rate è troppo alto oppure una pagina importante non riceve abbastanza visite. Qualunque sia il problema, esisterà sempre un modo per migliorare.