Share
La progettazione di email segue molte delle stesse considerazioni del web design: molti diversi tipi di browser, sistemi operativi, dimensioni dello schermo e dispositivi. Tuttavia, laddove i web designer sono stati in grado di utilizzare le moderne tecniche CSS e i linguaggi di scripting lato client per aiutarli a superare queste sfide, i progettisti di e-mail non sono stati così fortunati.
Quindi, cosa deve fare un designer di e-mail? In primo luogo, e soprattutto, come progettisti di email, dobbiamo dimenticare la nozione di design pixel-perfect. Quindi, dobbiamo adottare diverse considerazioni di progettazione che aiuteranno i progetti di email a risplendere indipendentemente da dove viene letta l'email.
Nota: questo tutorial fa parte dell'intera settimana di contenuti e-mail su Tuts + Web Design: consulta la guida di apprendimento Mastering HTML Email per ulteriori informazioni!
Le e-mail devono essere facili da leggere e comprendere, indipendentemente dal dispositivo su cui vengono letti, in modo che il loro messaggio sia comunicato all'abbonato. Ecco alcuni aspetti del design semplice da considerare:
Il modello a piramide rovesciata (dove vengono posizionati per primi gli elementi che attirano l'attenzione, seguito da informazioni di supporto e così via) è perfetto per i progetti di email:
Questa e-mail di Nest utilizza perfettamente il modello piramidale invertito per aiutare l'utente a richiamare il pulsante di invito all'azione:
Design di e-mail Nest Cam IQIl layout a zig-zag è una struttura a griglia semplice, che può essere facilmente tradotta in tabelle HTML, il fondamento di tutti i progetti di e-mail. Questo tipo di layout rende il contenuto facile da digerire indipendentemente dal dispositivo su cui viene letto l'e-mail. Su un dispositivo con una grande dimensione dello schermo, come un desktop, verrà visualizzata la struttura a zig-zag. Su dispositivi più piccoli, come gli smartphone, la struttura può degradarsi su un layout a colonna singola:
Di corso Zapier usa il modello Z.Sebbene questo tipo di layout sia leggermente più difficile da adattare per le diverse dimensioni dello schermo, ci sono molti metodi documentati online per codificare questo tipo di layout.
Dai un'occhiata a questa email di Tinder che usa il layout Z-pattern per guidare facilmente gli utenti attraverso come impostare i loro profili, senza travolgere l'utente con le informazioni:
Progettazione e-mail di Tinder su email davvero buoneDi nuovo, il layout viene convertito in un progetto a colonna singola per dispositivi più piccoli.
Lo spazio bianco è spesso la nemesi dei progettisti di email. Con uno spazio così limitato, in particolare sugli smartphone, c'è la pressione per garantire che lo spazio bianco sia chiuso. Le e-mail con poco spazio bianco e contenuti ammassati possono essere scoraggianti, illeggibili e, in ultima analisi, infruttuosi.
Abbraccia lo spazio bianco. L'uso intelligente dello spazio bianco può rendere le tue e-mail più facili da leggere e utilizzate in modo efficace attorno ai pulsanti di chiamata ai pulsanti di azione, per farle risaltare maggiormente e ottenere più di quei clic così necessari.
L'uso efficace dello spazio bianco può anche aiutare la leggibilità delle tue e-mail, che è la chiave per gli abbonati che leggono le tue e-mail su piccoli dispositivi mobili piccolissimi.
Questa e-mail di Squarespace è un ottimo esempio di come gli spazi bianchi possono elevare la tua progettazione e-mail e rendere chiaro il messaggio e-mail al sottoscrittore:
Bene, se Keanu può farlo ... Gli utenti devono essere in grado di leggere le tue e-mail, a prescindere dal fatto che le stiano consultando rapidamente su un dispositivo mobile o controllando le loro e-mail su un desktop. Garantire che il testo della tua e-mail sia leggibile, a prescindere dalle dimensioni dello schermo su cui viene letto l'e-mail.
Nel periodo precedente agli smartphone, era comune che il testo del corpo nelle email fosse 12px. Quando le persone iniziarono a leggere la posta elettronica su smartphone, ci fu un sacco di pizzico-zoom in corso solo per leggere il contenuto. Questo spesso ha cancellato il design dell'email, lasciando agli abbonati un'esperienza terribile della posta in arrivo.
L'utilizzo di una dimensione minima del carattere di 16 px per la copia del corpo della tua e-mail assicurerà che sia leggibile, indipendentemente dallo schermo di dimensioni su cui è letto. Ma non è solo la dimensione del carattere che è importante. L'altezza della linea è anche una considerazione di progettazione chiave per garantire che la tua e-mail sia facile da leggere. Un'altezza della linea che non è inferiore a 1,5 volte la dimensione della dimensione del carattere assicurerà che la tua copia e-mail sia facile da leggere per tutti. Quindi, se la dimensione del font per la tua copia del corpo è 16px, l'altezza della riga dovrebbe essere 24px. Puoi usare gli stessi calcoli su intestazioni e altri elementi di testo nella tua email.
Evernote con copia del corpo in 22px e altezza della linea (quasi 1,5) a 30pxIl supporto anche per gli attributi HTML e CSS di base è ancora macchiato in molti client e dispositivi di posta elettronica popolari. Prendi le immagini di sfondo per esempio.
Le immagini di sfondo sono comunemente utilizzate da molti progettisti di e-mail, tuttavia, non sono supportate in tutti i client di posta elettronica, in particolare nelle versioni di Microsoft Outlook e GANGA (Gmail Android con un account Non Gmail).
Esiste un ottimo strumento online di Campaign Monitor che genererà VML (Vector Markup Language), il linguaggio proprietario di Microsoft utilizzato per la marcatura HTML in Outlook, consentendo in tal modo immagini di sfondo in quelle versioni di Outlook che non supportano le immagini di sfondo. Vincere!
Ma se non vuoi fare confusione con il codice VML e vuoi attaccare con HTML e CSS, usa semplicemente un colore di sfondo di fallback appropriato per quando le immagini di sfondo non sono supportate. E quando scegli un colore di sfondo di fallback non dimenticare di prendere in considerazione il colore di qualsiasi testo che potrebbe essere seduto sopra l'immagine di sfondo.
L'uso di un colore di sfondo di fallback è anche un ottimo modo per garantire che le e-mail siano ancora comprensibili se qualcuno le sta leggendo su un dispositivo mobile con una cattiva connessione dati. Se le immagini non vengono caricate, il colore di sfondo di fallback riempie lo spazio in cui si trova l'immagine di sfondo.
Una tecnica nota come Pixel Art porta questo ad un altro livello. Conosciuta come una forma di design difensivo, combina immagini e colori di sfondo che creano mosaici quando le immagini non vengono caricate.
Limitazioni nel supporto per i caratteri web e le rigorose linee guida del marchio hanno fatto sì che storicamente i progettisti di e-mail dovessero creare immagini con del testo al loro interno, in modo che potessero avere il pieno controllo sull'aspetto del testo.
Nel passato, quando l'e-mail veniva principalmente visualizzata sui dispositivi desktop, ciò era perfettamente accettabile. Tuttavia, il testo nelle immagini pone a enorme problema per le persone che visualizzano le email sui dispositivi mobili. Come l'immagine si scala, così fa il testo. Diventa spesso illeggibile, creando un'esperienza negativa per l'abbonato.
La soluzione? Utilizza un'immagine di sfondo con testo live in alto. Utilizzando il live text, sarai in grado di controllare la dimensione del testo su diversi dispositivi utilizzando le query multimediali, che sono ampiamente supportate in client di posta elettronica popolari come Gmail e Apple Mail.
Questa email di REI utilizza una combinazione di immagini di sfondo e del testo su di essa per il suo messaggio principale, e ha un bell'aspetto su desktop e dispositivi mobili:
Da REIL'umile GIF animata è ancora ampiamente utilizzata dai designer di email. Le GIF sono perfette per aggiungere un po 'di interesse o eccitazione a una email. Ma c'è una tendenza pericolosa di GIF animate sempre più complicate con animazioni più lunghe - e questo significa dimensioni di file più grandi.
Potrebbe essere un gioco da ragazzi scaricare una GIF da 4MB dal tuo laptop, a casa, sulla tua connessione internet cablata. Ma pensa a coloro che stanno cercando di scaricare la stessa GIF su un dispositivo mobile utilizzando la loro rete di dati. L'immagine potrebbe richiedere così tanto tempo per il download che il lettore si stancherà semplicemente di aspettare e chiudere o cancellare la tua email. E questo è particolarmente grave se il messaggio principale della tua email è in GIF.
Idealmente, si desidera mantenere le dimensioni delle immagini GIF animate inferiori a 1 MB. Ciò significa semplificare qualsiasi animazione, mantenendo la gamma di colori relativamente piccola e una breve durata di animazione. Non devi essere una procedura guidata di Photoshop per ottimizzare le tue GIF per e-mail. Esistono strumenti online che possono aiutarti a fare proprio questo, come questo ottimizzatore GIF online.
Per ridurre le dimensioni della GIF animata, prova:
Questa email di Postable presenta una divertente GIF animata e gli orologi si fermano a 303kb:
Dai un'occhiata alla versione animata attualeI pulsanti di invito all'azione, o CTA in breve, sono il punto principale per la posta elettronica. Dopo tutto, stai inviando un'e-mail per informare l'iscritto di qualcosa e vuoi che l'abbonato sia in grado di fare qualcosa con le informazioni nella tua email. È qui che entra in gioco il pulsante call to action.
Il problema qui è che ora la gente non fa clic sulla tua e-mail da un dispositivo desktop con un mouse o un trackpad. Ma usano anche tavolette con stili. E smartphone, di dimensioni variabili dello schermo, con il pollice o il dito per toccare.
I pulsanti di invito all'azione devono essere selezionabili su una varietà di dimensioni dello schermo diverse, utilizzando il mouse, lo stilo, il pollice o persino il dito. Saluta i pulsanti a prova di proiettile.
I pulsanti a prova di proiettile usano solo HTML e CSS per creare un pulsante cliccabile al 100%. Esistono diverse tecniche che puoi utilizzare per creare un pulsante antiproiettile. E anche un generatore di codice che creerà il tuo pulsante per te. Le informazioni chiave per un ottimo pulsante antiproiettile sono le dimensioni. I pulsanti consigliati da Apple Guidelines non devono essere più piccoli di 44px per 44px per garantire che possano essere intercettati da un dispositivo mobile. E questo è lo standard che i designer di email hanno adottato per i pulsanti antiproiettile nelle loro e-mail.
Tutte queste considerazioni progettuali garantiscono che le e-mail vengano lette, comprese e gestite da un pubblico più ampio. Tutti gli obiettivi che qualsiasi azienda di email marketing dovrebbe mirare a raggiungere.
Accentsconagua