15 domande da porre prima della realizzazione di un sito web

L’inizio di un nuovo progetto può essere un’esperienza interessante e frustrante al tempo stesso. Cercare di determinare se il proprio stile e quello del cliente coincidano è sicuramente l’impresa più ardua quando si affronta un nuovo lavoro. Se valutati correttamente, la relazione con il cliente e il progetto saranno un successo, ma una valutazione incompleta può rendere ben presto la nostra vita un inferno.

Fare i compiti all’inizio può aiutarci. Sai già che tipo di domande porre ai clienti per capire quali sono le loro aspettative e le loro necessità?
 

1. Cosa fa la tua azienda?

Uno dei problemi peggiori che possono capitare è spesso la diversità tra ciò che il cliente fa e ciò che il designer pensa che il cliente faccia (o debba fare). Oltre a fare un po’ di ricerca prima dell’incontro con il cliente, chiedi al cliente qualcosa sulla sua azienda. Scopri esattamente cosa produce e come un sito si inserisce all’interno del loro business plan. Potresti rimanere sorpreso da ciò che scoprirai del tuo cliente.
 

2. Qual è il tuo target?

Qualsiasi sito, dal blog più piccolo al sito di una multinazionale, deve avere un target in mente. Devi solo cercare di capire chi sia. Crea un avatar dell’utente medio del sito, e progetta le forme, la tipografia e i colori in modo da soddisfare il meglio possibile i suoi bisogni. Conoscere l’utente finale, e gli utenti, ti aiuterà nella progettazione di qualcosa di più funzionale e usabile.
 

3. Cosa vuoi che faccia un visitatore sul sito?

Ogni sito dovrebbe avere degli obbiettivi di conversione. Che cosa vorresti che gli utenti facessero?
Le azioni più comuni comprendono:

  • Clickare un link per imparare qualcosa o trovare un’informazione.
  • Comprare un prodotto o un servizio
  • Completare un form
  • Giocare
  • Clickare link per vedere contenuti
  • Registrarsi per un evento
  • Scaricare un’applicazione
  • Condividere qualcosa via email o social

 

4. Possiedi già un sito?

Hai un sito? Qual’è l’URL?
E la domanda di fuoco: Possiedi un dominio?
Molti proprietari di un sito, specialmente se il sito è datato, hanno comprato un pacchetto e probabilmente non hanno la proprietà del dominio.
 

5. Cosa ti piace o non ti piace del tuo sito?

Prendi carta e penna. Dividi il foglio in due colonne e crea assieme al cliente una lista delle cose che ama e odia del suo attuale sito web. In questo modo puoi definire meglio quali elementi tenere, quali necessitano di un restyling e quali invece devono essere eliminati.
 

6. Cosa rende la tua azienda speciale?

Una volta compresa l’identità dell’azienda e cosa pensa il cliente del suo sito web, chiedigli che cosa rende la sua compagnia differente. Cosa li rende speciali? C’è un servizio o un prodotto che solo loro sanno fare? Fai in modo che il cliente ti venda la sua azienda, in modo che possa farlo a tua volta con la progettazione del sito.
 

7. Chi sono i tuoi competitors?

Parlando della situazione aziendale, non dimenticare di chiedere riguardo ai competitors. Chi si occupa delle stesse materie del tuo cliente? Perché si configura come un competitor? Studia i siti dei concorrenti, in modo da scoprire come rafforzare l’immagine del tuo cliente.
 

8. Puoi mostrarmi 3 siti che ti piacciono?

Chiedi al cliente di pensare a 3-5 siti che gli piacciono e di dirti il perché. Difficilmente risponderà a questa domanda su due piedi. Chiedigli di farlo con calma e di risponderti dopo qualche giorno, magari inserendo un paio di punti riguardo ai dettagli che più gli sono piaciuti.
 

9. Quali sono le funzionalità che dobbiamo avere per forza?

La maggior parte delle persone ha già in mente che cosa vorrebbe nel proprio sito. La risposta varierà molto da cliente a cliente. Potrebbe essere una cosa semplice (“deve funzionare sul mio telefono”) o qualcosa di più complesso ed elaborato (gradienti, parallasse…).
 

10. Avete già Analytics?

Comprendere le necessità dell’attuale utenza può aiutarci a comprendere quali siano gli obbiettivi del percorso progettuale. Le cose che il cliente ritiene importanti sono le stesse che vengono utilizzate/ricercate dagli utenti del sito? Studiare i risultati delle conversioni può permetterci di definire meglio il percorso da seguire.
 

11. Avete delle immagini?

Avete a disposizione delle foto, dei video o delle illustrazioni che possono essere utilizzate all’interno del progetto? Assicurati di controllare tutti i materiali, la loro risoluzione e come questi possono essere utilizzati nel progetto. A volte il cliente avrà tutto ciò che serve, mentre a volte ci sarà bisogno di creare contenuti o di affidarsi a servizi di stock images.
 

12. Avete una guida colore o una guida tipografica?

Volete utilizzare particolari colori o font? Quei colori o font saranno utilizzati anche sul sito?
Un nuovo sito viene solitamente creato in un periodo di rebranding. Devi essere sicuro di costruire un progetto aggiornato. Dovrai probabilmente cercare dei sostituti per le font che non possiedono una versione web.
 

13. Avete una guida di stile?

Il marchio di un’azienda è molto più dei colori e delle font. Se il cliente possiede una guida di stile, leggetela con attenzione. Potrebbe fornire valide informazioni riguardo allo stile che si richiede al progetto. A volte una guida di stile contiene un esempio di target per il marketing aziendale (permettendovi di risparmiare un passaggio).
 

14. Qual’è la vostra timeline?

Considerati i vostri impegni, potrebbe essere la domanda che vi farà rinunciare al progetto. Le aspettative del cliente sono allineate con ciò che potete proporre nel tempo stimato?
Si tratta di una timeline flessibile? Se la vostra tabella di marcia è troppo fitta potreste non essere in grado di gestire il progetto. Siate sicuri di cosa il cliente si aspetta e di come svolgere il vostro lavoro senza sacrificare la qualità di ciò che state facendo.
 

14. Farete dei cambi dopo il lancio?

Cosa succede una volta che il sito è nelle mani del cliente? Vorranno ricevere la formazione necessaria ad aggiungere contenuti? Il sito vivrà in modo indipendente? La risposta può definire come la struttura del sito verrà realizzata, particolarmente nel back-end. Può inoltre aiutarti a comprendere se il cliente necessita di un aiuto nella gestione. Preparare un sito in modo che il cliente possa utilizzarlo ti permetterà di avere ottimi feedback e magari anche un po’ di pubblicità. Ricorda che non stai costruendo un sito per te o per il tuo portfolio.

Scegliere il tema WordPress giusto

WordPress è una web app nata per la gestione di blog e in seguito evoluta in un CMS (sistema di gestione dei contenuti) per la realizzazione di siti web.

Il punto di forza di WordPress è la possibilità di progettare e gestire il proprio sito senza la necessità di nozioni di programmazione e web design. Molti novizi però si lasciano prendere dal panico quando si tratta di scegliere un tema per il proprio sito. Basta una semplice ricerca per renderci conto dell’ampia scelta che ci si para davanti.

Tra migliaia di temi gratuiti e a pagamento quali sono le caratteristiche a cui dobbiamo stare attenti quando ci troviamo di fronte a questa scelta? In questo articolo potrai trovare diversi consigli per intraprendere la selezione del tuo tema con sicurezza.

 

L’ultimo aggiornamento

Il web non è un ambiente statico, ma un crogiolo in continua evoluzione. Gli script che ieri ci hanno aiutato a creare delle stupende funzioni, oggi potrebbero non essere più adatti. Ad ogni aggiornamento di WordPress, gli sviluppatori di temi, soprattutto quelli a pagamento, rilasciano update per assicurare la compatibilità dei loro prodotti.

Quando acquistiamo un tema, è buona norma controllare la data dell’ultimo aggiornamento per assicurarci che lo stato del prodotto sia costantemente monitorato dagli sviluppatori.

 

Plugin e compatibilità

Il vero potenziale di un sito targato WordPress è la possibilità di installare diversi plugin per ampliarne le funzionalità. Ci sono migliaia di plugin disponibili ma alcuni sono davvero indispensabili: Gravity Forms, Yoast SEO, W3 Total Cache.

Nel momento in cui ci apprestiamo ad acquistare un tema dovremmo controllare quali plugin stiamo per scaricare e quali plugin sono compatibili.

 

Responsive

Avere un sito responsive, per un’azienda, non è più una necessità, ma un obbligo. Si stima che negli ultimi anni la navigazione della rete attraverso dispositivi mobili sia più comune della navigazione desktop. Inoltre Google, nell’aprile del 2015, ha deciso di penalizzare i siti che non sono ottimizzati per tutti i dispositivi (il cosiddetto Mobilegeddon).

Trovare tra i temi di WordPress un sito non ottimizzato per la visualizzazione mobile è ormai praticamente impossibile. Quando selezioniamo un tema però è consigliato osservarne l’anteprima e il suo comportamento al ridimensionamento della finestra del browser. Alcuni siti, infatti, hanno delle transizioni più efficienti di altri.

 

Browser e compatibilità

Ogni web designer nella sua carriera ha dovuto lottare per le differenze di visualizzazione tra i diversi browser. Una lotta che negli ultimi tempi, per nostra fortuna, sta diventando sempre più facile.

I nostri utenti usano diversi tipi di browser. Questo è un dato di fatto. Il tema che abbiamo scelto sembrerà perfetto sul nostro schermo ma non è detto che la stessa cosa valga per gli schermi di tutti i nostri utenti.

Alcuni sviluppatori utilizzano sofisticati strumenti di compatibilità per assicurarsi che i propri prodotti siano a prova di browser. Ma nei casi in cui i test non siano stati eseguiti, toccherà a noi provare la qualità dei temi… anche su dispositivi mobili.

 

Traduzioni e multi lingua

Un gran numero di siti WordPress non è in lingua italiana. Potremmo dover creare un sito in lingua straniera o forse potremmo dover aggiungere delle traduzioni nel corso del tempo. Assicuriamoci che i temi che scarichiamo supportino i plugin multi lingua (come ad esempio WPML).

 

Compositori di pagina

I compositori di pagina o Page builders sono dei plugin che ci permettono di progettare delle pagine sfruttando delle interfacce facilitate (es. drag and drop). Molti temi premium di WordPress vengono venduti con dei compositori preinstallati. Alcuni sono sviluppati direttamente dagli autori del tema.

Usare questo tipo di plugin spesso riempie le nostre pagine di codice non necessario. Cambiare tema, o cambiare compositore, ci obbliga ad un lavoro di pulizia piuttosto corposo. Per questo, si consiglia di utilizzare i più comuni plugin di composizione (es. WP-Bakery). Un ottimo metodo è quello di comprare questi plugin separatamente e usarli per la progettazione di più siti.

 

Supporto clienti e recensioni

Un punto a sfavore dei temi gratuiti è l’assenza di un supporto garantito. Gli sviluppatori di temi a pagamento invece offrono in alcuni casi un supporto eccellente. Se incorriamo in problemi, grazie a questo servizio, possiamo chiedere ai creatori di un tema di venire in nostro aiuto. Per quel che riguarda la piattaforma Themeforest, per ogni tema acquistato avremo un supporto gratuito garantito della durata di 6 mesi.

Assicuriamoci però di aver selezionato un tema con un buon supporto e una buona documentazione. Per essere sicuri della nostra scelta possiamo sempre dare un’occhiata alle recensioni del tema, che in alcuni casi potrebbero addirittura strapparci qualche risata.

 

Se avremo controllato ognuna di queste caratteristiche con attenzione, dovremo solamente installare il nostro tema attraverso l’apposita proceduta nel back-office di WordPress. A questo punto saremo pronti per la progettazione del nostro sito!

Il web design sta perdendo la sua anima?

Cosa porta un progettista come Noah Stokes (ex engineer per Apple, HP e web designer professionista) a urlare al mondo “I hate #RWD” (Io odio il Responsive Web Design)?

 

I web designer hanno sviluppato una dipendenza dai box e dalle griglie

Noah Stokes

 

Tutto è più regolare negli ultimi tempi. I siti web si assomigliano molto tra loro e le strutture sulle quali vengono costruiti i nuovi progetti sono spesso le stesse (es. Bootstrap). Non fraintendetemi, non sto incolpando i framework per questo, o le novità grafiche del Material Design, o i trend che sono nati in seguito alle varie evoluzioni iOS. Il vero problema non è certo lo strumento, no?

 

729db57071c0e080afc2544bec250e22

 

Non possiamo certo pensare che la causa di tutto sia il RWD. Cerchiamo di essere realisti. La navigazione della rete avviene oramai per la maggior parte attraverso smartphone e tablet. Google, l’anno scorso, ha inaugurato l’era del responsive web design (Mobilegeddon) penalizzando tutti i siti che non si sono adeguati al cambiamento. Combattere l’evoluzione non è mai stata una grande idea. Tuttavia ho come l’impressione che gli strumenti che abbiamo a disposizione siano così estesi da averci tolto ogni voglia di esplorare. Il desiderio di cercare nuove strade per la realizzazione di un prodotto davvero originale.

Abbiamo perso forse la capacità di sognare?

 

Si tratta di un adattamento naturale. La progettazione dei siti era sicuramente più semplice quando c’era da tenere conto di una sola larghezza fissa. Seguendo uno schema di lavoro abituale non è raro ritrovarsi a spezzettare il layout immaginando nella propria testa come realizzare i singoli blocchi e come apparirà il codice di ognuno di essi. Altrettanto comune è bloccarsi di fronte a dettagli che non ricadono così perfettamente nella struttura a cui siamo abituati. Bisogna cercare di pensare fuori dagli schemi. Il Responsive Web Design è il futuro, e alcuni di noi stanno iniziando solo adesso a metterci le mani. Non limitatevi a seguire gli schemi e aggiungete quel pizzico di creatività che serve per creare un contenuto unico.

 

ispirato a: Why web design is losing its soul

 

Tenere conto del daltonismo

Vediamo i colori nello stesso modo?

Guarda l’immagine qui sopra. Se vedi il numero 21, o se non vedi alcun numero, è probabile che tu soffra di una forma di daltonismo (con una percezione corretta dei colori dovresti vedere un 74). Si stima che 1 uomo su 12 (8%) e 1 donna su 200 siano affetti da una forma di daltonismo. Questa percentuale di popolazione è spesso ignorata quando si progettano siti o altri tipi di interfacce.

Cos’è il daltonismo?

Ci sono diversi tipi di daltonismo che si dividono ulteriormente per il livello di gravità. Anche se in rarissimi casi può essere vero, è un errore piuttosto comune quello di pensare che le persone affette da daltonismo vedano solo in bianco e nero (Acromatopsia). La maggior parte dei soggetti daltonici fatica nel distinguere le differenze tra sfumature e livelli di luminosità di determinati colori.

La condizione più comune è la difficoltà nel distinguere tra il verde e il rosso, che si divide in due tipologie. Le persone affette da Protanopia hanno una ridotta sensibilità alla luce rossa. Le tonalità di rosso, arancione e giallo tendono a diventare verdi e ad apparire meno saturate. I soggetti affetti invece da Deuteranopia hanno una ridotta sensibilità alla luce verde, dunque distinguono con difficoltà tonalità blu, gialle, viola, rosse e verdi.

Come tenere conto del problema nei nostri progetti

Anche se il daltonismo può causare grossi problemi agli utenti, è abbastanza semplice da combattere. Se sei al corrente del problema, sei già a metà strada.

1. Usa colori con molto contrasto

Anche le persone affette da Acromatopsia riescono a percepire il contrasto (ovvero la differenza tra il chiaro e lo scuro). Per essere sicuro che il sito sia leggibile, bisogna assicurarsi che i contenuti abbiano un buon contrasto con lo sfondo. Banalmente, un testo nero su sfondo bianco possiede un alto livello di contrasto.

contrast

Usiamo strumenti per il calcolo del contrasto per testare le combinazioni tra i colori. Questo strumento non richiede grosse spiegazioni. Un consiglio: Quando sottoponi i progetti ai vari test, usa il dispositivo più piccolo che possiedi in un contesto di scarsa luminosità. Cerca di ricreare il peggiore scenario possibile. Se dovessi progettare un’app per una sveglia vorresti che i tuoi utenti fossero in grado almeno di leggere l’ora.

2. Usa diverse sfumature piuttosto che diversi colori

shades

Uno schema monocromatico utilizza diverse sfumature dello stesso colore. Questa pratica riduce in maniera piuttosto efficace tutti i problemi riguardanti gli schemi cromatici e ci aiuta ad inserire facilmente contrasto nei nostri progetti. Uno schema monocromatico non deve essere necessariamente bianco e nero, utilizzare varie sfumature di blu può creare un progetto visibilmente piacevole senza ridurre la leggibilità.

3. Sperimenta il daltonismo durante la progettazione

tools

Ci sono diversi strumenti che possono simulare gli effetti del daltonismo, permettendoci di capire come la nostra interfaccia si comporta agli occhi di una persona con questo tipo di problemi. Photoshop ha un’opzione apposita, raggiungibile semplicemente attraverso il percorso: Visualizza > Imposta prova.

4. Scegli con cautela le combinazioni di colore

Sfortunatamente, come web designers non abbiamo sempre la possibilità di scegliere i colori da utilizzare nei nostri progetti. A volte siamo limitati dalle linee guida dei brand, ma quando possibile è saggio scegliere colori primari e secondari prima di finalizzare l’immagine di un brand. Ecco alcuni colori da evitare:

color-scheme

5. Usa texture al posto del colore

Nel progettare grafici e info-grafiche, considera l’utilizzo di texture o pattern per aiutare gli utenti a distinguere i colori. Ad esempio, nel grafico qui sotto, i colori sarebbero del tutto irriconoscibili per una persona affetta da Protanopia. Inserendo delle texture, il risultato cambia.

graph

6. Non utilizzare solamente il colore per veicolare un messaggio

Quando progetti elementi come forms e interfacce complesse, non dovresti utilizzare il solo colore come indicatore. Guarda i form qui sotto. Quello sulla sinistra indica con il colore rosso la presenza di errori e con il colore verde la buona riuscita dell’operazione. Una persona affetta da deuteranopia non riuscirebbe a distinguere la differenza tra questi due messaggi. Il miglior modo per evitare questo problema è quello di utilizzare delle icone (esempio a destra).

forms

 

La lezione più importante da imparare è che ogni dettaglio (seppur minimo) dei nostri progetti influenza il loro funzionamento. Quando possibile bisogna sempre cercare di utilizzare testi, icone, forme o texture per comunicare all’utente come utilizzare i nostri siti. Creare dei siti web che siano accessibili al 100% è essenziale, e dovrebbe essere parte di ogni processo progettuale.

Il design dei bottoni

L’attenzione al dettaglio è sicuramente un punto focale dei nostri progetti. Oggi discuteremo di alcune tecniche per progettare dei bottoni che i nostri utenti vogliano cliccare. Anche se si tratta di uno dei particolari più piccoli all’interno dei nostri siti, è certamente quello più importante. D’altronde come faremmo altrimenti ad indirizzare l’utente attraverso quel ciclo di azioni che vogliamo fargli compiere?

 

Deve sembrare toccabile

Sembra un’affermazione banale, ma spesso questa necessità viene ignorata. Gli utenti dovrebbero vedere un bottone e immediatamente pensare “voglio cliccarlo”.

Mentre (quasi) ogni dimensione è cliccabile sullo schermo di un PC, la dimensione e le spaziature di un tasto su un dispositivo mobile è una componente vitale. Mediamente la larghezza di un polpastrello va dagli 8 ai 10 millimetri. Una dimensione di un centimetro quadrato diventa quindi la minima dimensione ottimale sullo schermo di uno smartphone (o di un tablet).

Ci sono altri dettagli che possono invitare l’utente al click:

  • Un ombra appena visibile può dare l’idea che l’oggetto si trovi più vicino all’utente.
  • Un’abbondante spaziatura attorno al testo (o all’icona), rende il bottone più semplice da premere.
  • Il cambio di colore applicato durante il passaggio del mouse e durante il tocco, funge da feedback per l’utente.

 

Il colore è importante

Il colore di un bottone deve essere particolare. Si tratta del luogo migliore per sperimentare con i colori d’accento.

Il colore di un bottone dev’essere luminoso e attraente. Bottoni di colore giallo, blu o verde sono più semplici da individuare all’interno del layout. La scelta migliore per il colore di un bottone ricade sul colore complementare a quello che troviamo in maggior misura nel nostro sito. Non dimentichiamo però di assecondare i colori del brand. Per quanto un colore sia visibile all’interno del nostro progetto, deve accompagnare degnamente i colori della nostra palette.

 

La dimensione è ancora più importante

Fallo grande!

I bottoni devono attirare subito l’attenzione. Ma attenzione, c’è una sottilissima linea tra la dimensione perfetta e l’eccesso. Quando il bottone diventa l’unica cosa visibile all’interno del layout, è meglio rivederne le dimensioni.

 

Il posizionamento

Dove dovrei inserirlo? Esiste un posto che mi aiuti a generare più click? Nella maggior parte dei casi dovrebbe accompagnare il contenuto a cui fa da complemento:

  • Al termine di un form
  • Alla destra di una Call To Action
  • Nel fondo della pagina o dell schermo
  • Centrato al di sotto di un messaggio

Queste posizioni funzionano perché seguono l’associazione logica e il pattern di lettura utilizzato dalla maggior parte degli utenti.

 

Utilizza forme standard

Quando si tratta di bottoni ci sono forme che funzionano meglio di altre. Gli utenti che navigano i nostri siti sono più portati ad utilizzare strumenti immediatamente riconoscibili per la loro funzione. Si tratta di familiarità. Perciò utilizza sempre:

  1. Rettangoli: Questa è la forma base utilizzata dalla maggior parte dei web designer. Alcuni preferiscono utilizzare dei bordi arrotondati mentre altri tendono a mantenerne la forma. Si tratta di scelte stilistiche che non cambiano la eccessivamente la riconoscibilità della forma se assecondano l’estetica del progetto.
  2. Cerchi: Diventati popolari con il concept di Material Design. Funzionano bene per azioni standardizzate comunicabili con l’utilizzo di un’icona (es. social share).

 

Dì all’utente cosa deve fare

Ogni bottone (o quasi) dovrebbe includere un’istruzione testuale che dica esattamente all’utente cosa succederà dopo che lo avrà cliccato. L’ideale è utilizzare un linguaggio semplice e sintetico e ricorda, il primo messaggio che l’utente dovrà ricevere dopo aver cliccato dovrà confermare il successo dell’azione effettuata. Che stia inviando un form, facendo un acquisto o che stia semplicemente seguendo un link.

 

 

Un buon modo per capire come funzionano i tasti presenti sul proprio sito è quello di monitorare le azioni degli utenti con strumenti specifici. In base alle loro azioni possiamo capire come determinate forme, colori o testi influenzano i click degli utenti. Tutto dipende dai nostri visitatori. Se una grossa percentuale della nostra utenza visita il nostro sito con uno smartphone, dovremmo tenerne conto e modificare il nostro progetto per assecondare questa tendenza.

 

credits: designshack.net

Gmail diventa compatibile con le media queries

Un’occasione da festeggiare per tutti coloro che progettano newsletter o che hanno dovuto mettere le mani al codice sorgente di una email. Google ha annunciato finalmente l’estensione della compatibilità di Gmail alle media queries. L’annuncio è stato pubblicato il 14 settembre scorso nell’Apps Developer Blog di Google. Con un cambiamento simile non possiamo che sperare che Microsoft prenda esempio e decida di aggiornare il sistema di rendering del suo Outlook.

Grafici e web developer hanno cercato a lungo di progettare email per ogni dispositivo disponibile. Specialmente negli ultimi tempi, ovvero da quando più della metà delle letture di email avviene attraverso un dispositivo mobile o un tablet. La progettazione di una email richiede dunque un’ottimizzazione specifica che dipende non solo dai client di posta elettronica utilizzati per la lettura ma anche dalle diverse risoluzioni disponibili tra i dispositivi in commercio. Questa difficoltosa procedura è stata semplificata negli ultimi anni dalla compatibilità con il sistema di media queries.

Ma, a meno che non siate dei web designer, probabilmente non avete la minima idea di che cosa sia una media query e a cosa serva. Qui di seguito vi proponiamo una breve spiegazione riguardo all’argomento che stiamo trattando.

 


Cos’è una media query?

Le media queries sono una componente dei cascading style sheets (o CSS), il linguaggio di programmazione utilizzato per gestire lo stile nei siti web e nelle email. Ad un livello basilare, le media queries servono come condizioni per l’attivazione di determinati stili. Ma come funzionano?

media screen and (max-width: 900px) {
body { background-color: red; }
}

Una media query è composta da una o più media type (es. screen), una o più espressioni (es. max-width:900px), e le regole di stile inserite all’interno delle parentesi. In questo caso stiamo dicendo allo sfondo del nostro sito/email di diventare rosso quando la risoluzione dello schermo è inferiore a 900 pixels.

I media type ci permettono di dichiarare a che tipo di media sono applicate le regole. Quattro sono le opzioni disponibili: all, print (per la stampa), screen (per gli schermi dei dispositivi), speech (per i programmi di lettura).

Le espressioni (assegnate prevalentemente per i dispositivi) invece, servono per poter attivare gli stili in base a specifiche condizioni. Sebbene esistano una miriade di condizioni possibili, per la progettazione di email solitamente ne bastano tre:

  • max- e min-width
  • max- e min-device-width
  • device-pixel-ratio

 

Le media queries ci permettono di costruire e variare i nostri layout in modo fluido e naturale. Google ha dichiarato che questa è solo una delle migliorie in serbo per l’espansione del supporto CSS di Gmail. Non ci resta che aspettare per vedere con i nostri occhi quali saranno le prossime novità dal colosso di Mountain View.

Template gratuito per newsletter responsive

Attenzione! Per poter utilizzare il template di newsletter gratuito, che trovate al termine dell’articolo, è necessaria una conoscenza di base dei linguaggi di programmazione HTML e CSS. Buona lettura!

Con la vastità dei mezzi a nostra disposizione, quanto può essere difficile programmare una newsletter? Beh, con tutte le variabili in gioco vi posso assicurare che è più difficile di quanto sembra.

 

Perché è così difficile programmare una newsletter?

Nel mondo del web design siamo stati partecipi di quella che è stata La guerra dei browser. Il mercato era conteso tra Netscape e Internet Explorer, che non competevano solo a livello economico ma anche nelle logiche di programmazione dei loro sistemi. Grazie al Web Standards Project, i browser odierni si sono conformati ad un unico metodo e la situazione è sicuramente migliorata rispetto a 20 anni fa.

Sfortunatamente, questa standardizzazione non ha toccato quelli che sono gli email clients (Outlook, Lotus Notes…).

Per peggiorare la situazione, alcuni client di posta, invece che migliorare la gestione del codice, sono addirittura tornati indietro. Microsoft, dopo l’uscita di Outlook 2007, ha smesso di utilizzare Internet Explorer per il rendering del codice HTML. A prima vista sembrerebbe una buona notizia, se non fosse che il sostituto che è stato scelto è Microsoft Word (sì, esattamente quel Word).

Outlook è un client piuttosto popolare tra gli utenti, ma non è l’unico problema: costruire il codice per una email significa avere a che fare con 4-5 browser web e con una decina di client di posta differenti, e ognuno possiede una grossa fetta di utenza.

 

Perché ottimizzare la tua email per i dispositivi mobile?

Secondo un sondaggio pubblicato da Litmus nel Marzo di quest’anno, il 55% delle email viene aperto da un dispositivo mobile. Si rende necessario un ulteriore passo in avanti che ci porti, come è stato nel caso dei browser e dei client email, ad ottimizzare la lettura anche sui telefoni e i tablet.

 

Come programmiamo allora una email efficiente?

Il sistema per ottenere delle email, che funzionino (quasi) allo stesso modo attraverso le diverse piattaforme, è quello di lavorare (come si faceva un tempo per i siti web) attraverso tabelle. Anche in questo modo però abbiamo bisogno di stilare alcune regole di base:

Semplifichiamo il layout

Per progettare il layout di una newsletter è necessario conoscere la maggior parte delle limitazioni che impongono le diverse piattaforme in cui verrà visualizzato. Uno dei metodi più semplici per non spendere ore nel processo di testing è quello di affidarsi ad un layout a colonna singola (come ad esempio utilizza InVision). Il template che potete trovare al termine dell’articolo segue proprio questo principio.

newsletter

Usiamo CSS inline

Se volessimo assegnare delle regole di stile a tutti i paragrafi del nostro progetto, dovremmo scrivere nell’head della nostra email:

p {
font-size: 12px;
font-weight: bold;
}

Tuttavia, se il client di posta non leggesse l’head (come fa ad esempio Gmail), ciò che abbiamo appena scritto verrebbe del tutto ignorato. Le regole CSS inline vengono inserite direttamente nel marcatore HTML in questo modo:

<p style="font-size: 12px; font-weight: bold">Contenuto del paragrafo</p>

Le regole inline, pur avendo la priorità su tutte le altre, hanno valore solamente per l’elemento in cui sono inserite. Per non perdere tempo scrivendo CSS per ogni elemento, esistono numerose web app che fanno al caso nostro. Io utilizzo e consiglio inliner.cm, che legge le regole inserite nell’head dell’HTML e le inserisce nei singoli elementi senza inserire contenuti aggiuntivi o pubblicità.

Non affidiamoci completamente all’uso di immagini

Per la creazione di siti web, in passato, ci si affidava al taglio e al preciso posizionamento di immagini all’interno delle tabelle che componevano la struttura delle pagine. Non è raro ritrovare questo metodo nell’impostazione delle newsletter odierne (senza escludere i grandi brand). I tempi di realizzazione sono sicuramente ridotti, ma questo è l’unico pregio di questo sistema. Al contrario dei browser, i client di posta disabilitano le immagini dando all’utente la possibilità di scegliere se abilitarle o meno. Diverse ricerche hanno mostrato che quasi il 40% degli utenti non abilita le immagini nelle email (volontariamente e involontariamente).

Testing, testing, e ancora testing

Non c’è scampo. La fase di testing della vostra newsletter è inevitabile. Dovrete inviarla svariate volte e probabilmente per ottenere il risultato che sperate perderete qualche capello. Ci siamo passati tutti. Per semplificarci la vita però esistono strumenti online come Litmus che ci permettono di compiere test su diverse piattaforme con un singolo invio.

 

A questo punto credo di avervi annoiato abbastanza quindi lascerò che siate voi a studiare il vostro metodo. Qui sotto trovate il link per il download del template. Buon lavoro!

  Scarica il file

Come scegliere il formato giusto per le tue immagini

JPEG, PNG e GIF. Alcuni web designer imparano quale formato utilizzare solamente dopo un po’ di esperienza e quasi nessuno capisce come queste estensioni funzionino davvero.

In questo articolo, illustreremo brevemente gli algoritmi di compressione utilizzati da ogni formato, in modo da capire come differenti approcci siano più o meno appropriati per tipi di immagini differenti.

Iniziamo da un vecchio amico…

 

JPEG

Joint Photographic Experts Group

Con i suoi 25 anni, lo standard ISO 10918 ha decisamente superato la prova del tempo. Ma come funziona? E per quali situazioni è più indicato?

La compressione JPEG divide l’immagine in blocchi da 8×8 pixel, e in seguito compie un calcolo piuttosto complesso. Converte i pixel di questi blocchi (liste di valori RGB assegnate ad ogni punto nello spazio) in coefficienti che li descrivono come onde. In termini tecnici, l’algoritmo di compressione JPEG traduce le informazioni di un’immagine in frequenze.

Questo significa che JPEG risulta ottimale nella compressione di immagini con molte sfumature di colore. Sostanzialmente, JPEG interpreta tutte le immagini come se fossero fotografie. Al contrario, però, il formato JPEG risulta terribile per la compressione di immagini con bordi netti o con texture definite.

 

JPEG

 

Per comprimere questo tipo di immagine in modo ottimale dobbiamo utilizzare un altro tipo di algoritmo:

 

GIF

Graphic Interchange Format

Nei primi giorni del web, se un’immagine non era JPEG, era sicuramente GIF.

Il formato GIF utilizza l’algoritmo di compressione LZW, molto più semplice della mate-magia introdotta da JPEG. Essenzialmente, l’algoritmo LZW scansiona i dati relativi all’immagine e genera degli shortcode (delle abbreviazioni utilizzate per richiamare codici più complessi) per quelle parti che si ripetono; LZW accorcia le ripetizioni. Questo vuol dire che il formato GIF è adatto a comprimere immagini con grandi aree di dati identici o ripetuti. Immagini con pochi colori e separazioni nette possono essere salvate in maniera efficiente e senza perdita di qualità grazie a questo formato.

Anche se si tratta di un formato piuttosto semplice, GIF possiede un paio di interessanti qualità: trasparenza (ma non semi-trasparenza) e animazione.

Purtroppo, GIF è un formato inadatto a comprimere immagini con un moderato numero di colori; infatti, GIF ha una limite di 256 colori. Convertire una immagine con più di 256 colori risulta in un effetto posterizzato dall’aspetto sporco e impreciso.

 

GIF

 

 

In breve, GIF e JPEG hanno una serie di pregi e di difetti per i quali si adattano in modo perfetto al web.

 

Ma alcuni contenziosi riguardanti il brevetto sull’algoritmo LZW hanno ispirato alcuni individui nella creazione di un nuovo formato di immagine lossless (senza perdita di qualità) per il web.

 

PNG

Portable Network Graphics

PNG eccelle in tutti i tipi di immagine in cui funziona il formato GIF, con dei vantaggi aggiuntivi:

  • Non è limitato a 256 colori
  • Trasparenza in canale alpha (un pixel può essere parzialmente trasparente, invece che interamente trasparente o interamente opaco).
  • Nella maggior parte dei casi, una compressione superiore

Questa immagine presa da Wikipedia mostra la capacita di PNG di comprimere un’immagine a colori con aree semitrasparenti.

 

PNG_transparency_demonstration

 

Come è possibile che PNG abbia un algoritmo di compressione più efficiente di GIF? Questo traguardo è ottenuto aggiungendo dei passaggi al procedimento.

Prima di tutto, l’algoritmo PNG cerca di ridurre i dati salvati, utilizzando i pixel che già conosce per prevedere quelli che non sono ancora stati letti. Il formato prevede cinque strategie di previsione diverse, ma sostanzialmente, PNG assume che i pixel vicini tra loro siano simili. Se questa assunzione risulta vera, PNG salva i dati immagazzinando la differenza tra la sua previsione e il valore effettivo (piccoli numeri occupano un minore spazio).

In secondo luogo, PNG elimina le ripetizioni permettendo all’immagine di riferirsi a sequenze di pixel individuate in precedenza (invece di immagazzinare lo stesso dato due volte) utilizzando un algoritmo chiamato LZ77.

Al termine dei 2 procedimenti appena esposti, PNG utilizza un metodo chiamato “codifica di Huffman” per ridurre i valori rimanenti al minimo indispensabile (anche JPEG utilizza questa codifica come ultimo passaggio nel suo algoritmo).

 

Per riassumere il concetto: PNG funzionerà sempre peggio di JPEG per quanto riguarda le fotografie, ma meglio di GIF in tutti gli altri casi. Utilizzate PNG quando dovete salvare immagini con bordi definiti, tinte piatte o pattern dettagliati.

 

Stai progettando il tuo sito correttamente?

Se avete progettato un sito web è possibile che vi siate trovati più volte a risolvere i problemi sbagliati. Forse vi è stato chiesto di aggiungere una feature inutile oppure avete semplicemente passato troppo tempo su una commissione che si è rivelata più difficoltosa da realizzare che importante al fine del progetto.

In questo articolo cercheremo di capire quali sono le dinamiche che ci distraggono dai veri problemi del nostro progetto e che danneggiano l’esperienza dei nostri utenti. Analizzeremo perché queste cose succedono e troveremo metodi specifici per evitarle.

 

1. Impressionare le persone sbagliate

Un problema comune incorre nel momento in cui si viene spronati ad impressionare il cliente, i manager o la giuria di un concorso invece dell’effettivo utente finale dei nostri siti. Il risultato è spesso un sito che appassiona il committente ma confonde gli utenti. Un sintomo comune di questo problema è la presenza di effetti visivi complessi che impediscono al visitatore di trovare ciò che sta cercando.

Questo problema può capitare per una miriade di motivi diversi: pressioni, idee discordanti o una mancanza di comunicazione interna.

La soluzione è quella di mantenere la concentrazione sull’utente. Sia che stiate creando un sito o pagando per la sua realizzazione, bisogna sempre chiedersi come le decisioni prese in fase progettuale influenzeranno l’esperienza dell’utente. I visitatori riescono a trovare ciò che cercano? Le modifiche che abbiamo ipotizzato ostacolano la navigazione dell’utente?

Se state ancora avendo difficoltà nel venire a patti con un cliente difficile, mostrategli le conseguenze delle scelte prese. Ad esempio: “Se eliminiamo questo grosso file, la pagina caricherà più rapidamente. Questo aumenterà il numero di utenti che rimarranno in questa pagina e i profitti potranno aumentare di X%”.

 

2. Non chiedersi “perché?”

Delle volte, i progettisti possono imbattersi in un lavoro che richiede molto tempo per essere sviluppato quando la soluzione migliore potrebbe essere quella più semplice.

Per esempio, immaginiamo che un cliente chieda l’inserimento di un campo di ricerca all’interno del proprio sito. Non è difficile tuffarsi subito nelle specifiche di questa richiesta. Dove possiamo inserirlo? Per quando deve essere sviluppato? Come deve apparire la pagina dei risultati? Come strutturare l’URL?

La domanda che raramente ci si pone è: Perché?

In questa storia, del tutto ipotetica, il cliente non necessita di questa funzionalità. Non si tratta di un grosso rivenditore ma gli utenti non riescono a trovare quello che cercano. Qualche semplice modifica alla navigazione potrebbe risolvere il problema, ma invece, l’azienda decide di inserire un campo di ricerca che non dipana i dubbi dei loro clienti finali.

Come evitare questo problema?

Il miglior modo è quello di procedere con una serie di domande per individuare il problema piuttosto che concentrarsi su di una sola soluzione. Ad esempio, invece che immergersi nella progettazione, chiedete perché si è mostrato necessario aggiungere questa funzionalità. Continuando a chiedere “perché” riuscirete a capire l’origine del problema, il quale sarà probabilmente “I nostri clienti non riescono a trovare ciò che cercano”.

Concentrando l’attenzione sui veri problemi e sugli obiettivi, troverete soluzioni meno costose, di più breve realizzazione e molto più efficaci.

 

3. Consumare tempo su dettagli di poca importanza

Se avete preso parte alla progettazione di un sito web, potreste aver speso più tempo del necessario per completare dettagli superflui. Incarichi difficili possono richiedere del tempo, ma la difficoltà non è sempre sintomo di importanza.

Per esempio, mi è capitato di spendere molto tempo per l’animazione di uno sfondo che non si è rivelata essere molto importante. Fortunatamente, durante una riunione siamo riusciti a scoprire che la decisione era stata presa all’ultimo minuto da un dipendente che voleva vedere “quel qualcosa in più”. Quando è stato chiaro che l’aggiunta non avrebbe aiutato l’utente finale del sito, l’animazione è stata eliminata dalla lista delle priorità.

Come evitare di spendere troppo tempo per incarichi non importanti?

  1. Prima di iniziare a lavorare su di un sito, assicuratevi di capire quali sono gli obiettivi più importanti. Questo genere di consapevolezza può evitare di smarrire il sentiero durante la progettazione.
  2. Se stai passando troppo tempo per completare un incarico superfluo, fai un passo indietro e rivaluta le priorità. L’azienda necessita di questa funzionalità? Si tratta di una funzionalità utile? Esistono delle scorciatoie attraverso le quali possiamo ottenere lo stesso effetto? Domande come queste possono aiutare a risparmiare molto tempo.

 

4. Non avere abbastanza informazioni per prendere le giuste decisioni

Nella posizione di web designer o progettista, potreste non essere stati messi al corrente delle ragioni dietro a determinate decisioni. Nella posizione di cliente o manager, potreste non aver assistito a tutte le scelte tecniche e le informazioni che vi servono per valutare il quadro nella sua totalità. Una mancanza di informazioni può portare ad uno spreco di tempo, denaro e attenzione da parte dell’utente.

Un modo per risolvere questo problema è quello di essere diretti (in modo costruttivo) quando si nota un problema.

Ad esempio, se una decisione può peggiorare la user experience in un modo che impedisce agli utenti di acquistare un prodotto, avete il dovere di farlo presente. Spesso scoprirete che i vostri collaboratori erano troppo impegnati da altri incarichi per notare il problema. Se siete dei clienti o dei manager, è buona norma informare la vostra squadra delle ragioni dietro alle vostre decisioni, in modo che tutti possano produrre delle soluzioni migliori.

 

5. Lasciare che le informazioni mutino di persona in persona

Esiste un gioco per bambini chiamato Telefono senza fili. Una frase viene sussurrata all’orecchio del proprio vicino e viene trasmessa attraverso una fila di persone con lo scopo di preservarne il contenuto. Alla fine del gioco il messaggio risulta drasticamente differente.

Questo scenario può sembrare divertente all’interno di un gioco, ma in un contesto professionale si tratta di un grave problema. Molto spesso una buona idea viene filtrata attraverso diversi livelli di fraintendimento a tal punto che la versione finale risulta piuttosto ridicola.

Sia chiaro, non sto dicendo che cambiare idea sia un male. Ma è grave quando le idee cambiano sulla base di un fraintendimento. Ecco alcuni consigli:

  1. Semplificate il messaggio più che potete. Concentratevi sul suo reale contenuto ed eliminate ogni dettaglio estraneo al progetto.
  2. Quando necessario, comunicate un’idea direttamente alle persone che devono sentirla. Non scocciate il vostro ufficio con ogni idea che vi viene in mente ma non menzionate nemmeno la cosa al vostro vicino sperando che la dritta raggiunga in qualche modo il destinatario.
  3. Scrivete la vostra idea. In questo modo avrete più tempo per pensarci e ci sarà un riferimento per chiunque dovesse esserne partecipe.

 

Ci sono diverse ragioni per cui un progettista potrebbe spendere tempo sui problemi sbagliati. I consigli di questo articolo non risolveranno ogni problema, ma spero che vi daranno una base stabile per affrontare i vostri progetti. Fintanto che concentrerete la vostra attenzione sull’utente, eviterete di essere distratti da soluzioni fuorvianti  e avrete la possibilità di risolvere i giusti problemi.

 

credits: webdesignerdepot.com

Aumentare le conversioni riducendo la confusione

Quando progettiamo dei siti web, lo facciamo per comunicare un messaggio ai nostri utenti. Uno dei maggiori problemi che dobbiamo affrontare nel veicolare questo messaggio è la confusione.

Quando i visitatori incontrano un sito web che percepiscono come confuso o disordinato, nella maggior parte dei casi, lo abbandonano; un sondaggio condotto da Burst Media mostra che il 30% dell’utenza abbandona un sito immediatamente se la percezione di esso è confusa.

Un sito disordinato fa sentire gli utenti irrequieti. Hanno un obiettivo da raggiungere ma la situazione li ostacola. Se il tuo sito è un casino, lavorare con te sarà lo stesso?

Joe Ardeeser, Jordan Crown Design

Ma come possiamo sapere se il nostro sito è troppo disordinato? Dopotutto nessuno progetta un sito con l’intento di confondere o irritare l’utenza.

 

Controllare il livello di confusione

Ci sono diversi metodi per capire se si è costruito un sito troppo confuso. Lo user testing è sempre il metodo migliore perché fornisce un vero feedback da delle persone reali. Non useranno sempre il termine confuso per descrivere il sito. Potrebbero dire: “Il sito è troppo pieno”, “Non riesco a trovare le informazioni che cerco”, “Non so dove cliccare”, “C’è troppa roba”.

In pratica, se l’utente è sopraffatto e non sa dove guardare, il sito è da rivedere. Però lo user testing è costoso e necessita di parecchio tempo. Per questo motivo esistono altri strumenti per giudicare se il nostro sito è troppo confuso:

Five Seconds Test (visita il sito) – Presenta una pagina web a dei tester per un totale di 5 secondi. Dopo questa quantità di tempo, i tester non possono più vedere la pagina ma gli viene chiesto di rispondere a delle domande riguardo a cosa hanno memorizzato. L’obiettivo è di presentare le informazioni in un modo che gli utenti possono ricordare; se il sito è confuso probabilmente i tester non riusciranno a ricordare le informazioni che vogliamo comunicargli. Ci sono alcune opzioni gratuite e l’opportunità di creare un account pro.

Clutter Test (visita il sito) – Uno strumento di testing completamente gratuito; utilizzando un algoritmo, il test misura il grado di confusione. Secondo le loro ricerche, qualsiasi risultato inferiore al 50% è un buon risultato. Per farsi un’idea di come i siti vengono misurati: Google ha ottenuto una valutazione pari al 16% mentre Yahoo! ha ottenuto l’86%.

 

Prevenire la confusione

Un sito confuso, solitamente, è il risultato di un sovraffollamento di informazioni in una singola pagina. Naturalmente certe informazioni devono essere sottolineate ma quando ci sono troppe cose da evidenziare è facile che la situazione diventi insostenibile.

Il metodo utilizzato da Joe Ardeeser richiede una profonda pianificazione del lavoro e diverse fasi di revisione:

  • Dare la priorità agli elementi caratteristici. L’utilizzo degli stili deve creare un’idea di priorità tra gli elementi.
  • Rimuovere gli oggetti non necessari.
  • Creare wireframe e grafiche che siano basate sulle intenzioni degli utenti.
  • Nascondere le informazioni meno importanti ma renderle reperibili attraverso una navigazione chiara.

635757933848626340-1987408160_highlight-in-books

Quando ci sono troppe informazioni importanti in una singola pagina, ogni cosa combatte per attirare l’attenzione distraendo l’utente dal suo scopo primario. Art Webb disse a tal proposito:

If you make everything bold, nothing is bold.
Se rendi tutto grassetto, niente è grassetto.

 

Ridurre la confusione

Il primo passo da affrontare: Dare la priorità a ciò che è importante.

Alcuni credono che tutte le pagine debbano essere accessibili da ogni posizione. Questo può essere ottenuto grazie a dei menu ben organizzati e alle site maps; non è necessario spremere tutto in una singola pagina.

Assegna una missione ad ogni pagina e includi solo le informazioni necessarie a compiere quella missione.

Una volta che ogni pagina ha la sua priorità è il momento di ridurre. Taglia tutto ciò che non è necessario al completamento della missione. Bisogna abbracciare il mantra del minimal design “Less is more”.

Dopo aver sfoltito tutto il materiale non necessario, testa nuovamente il tuo sito. Se i contenuti appaiono ancora una volta confusi, bisogna ricominciare. Questa volta elimina tutto ciò che può essere rimosso senza intaccare il messaggio principale.

Quando progettiamo un sito dobbiamo tenere a mente che non stiamo componendo un collage di contenuti ma uno strumento di comunicazione. Deve trasmettere un messaggio all’utente nell’esatto momento in cui apre la pagina web. Alcuni utenti sono disposti a dare solo quei 5 secondi al tuo sito. Fai in modo che quei pochi secondi siano la ragione che li farà rimanere.

 

 

Credits: webdesignerdepot.com