Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Crea una semplice email responsive in HTML

by
Length:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

In questa guida ti mostrerò come creare una semplice email responsive in HTML che funzionerà in ogni client email, includendo anche tutti i client e applicazioni per smartphone. Utilizza solo media query necessari e per assicurare la massima compatibilità, un approccio a larghezza fluida.

Media query: Solo metà della soluzione

C'era un tempo in cui le media query erano abbastanza per ottenere email responsive che funzionavano con le applicazioni email per iOS e Android, che supportano entrambi media query.

Da allora, c'è stata una proliferazione di applicazioni di posta creati per le piattaforme iOS e Android con vari gradi di supporto per i metodi di sviluppo per le email responsive.

Degna di nota è l'ultimo aggiornamento per l'app Gmail per Android, che è due volte così popolare come l'applicazione di posta predefinita per gli utenti Android (che ora comprendono 11% del totale delle aperture). Non ha mai supportato le media query e continua a non farlo, tuttavia, ora riduce le email comprimendone la dimensione della tabella esterna per adattarsi all'interno dell'area visibile dello schermo. È difficile da controllare e, quando la vostra intera email si basa sulle media query per visualizzare correttamente su telefono, genera alcuni risultati molto sgradevoli.

Perché il fluido è il nuovo nero

La buona notizia è che puoi disegnare e costruire una email che si mostrerà perfetta in ogni applicazione per le email, includendo anche quelle che non supportano le media query. Puoi fare tutto ciò usando un layout fluido.

Esistono, tuttavia, alcuni compromessi che si devono fare per il design. I layout con colonne uguali che si riducono poi ad una singola colonna, non funzionano molto bene con questo metodo. Se puoi imparare a vivere senza di loro, ci sono molte grafiche funzionali che possono funzionare molto bene.

Questo è ciò che andremo a creare oggi:

Final-Product-Both

Guida introduttiva

Ok, iniziamo con la nostra sezione vuota.

Quello che andremo a creare qui è la nostra pagina base che ha un suo header, doctype e una tabella contenitore con un colore di sfondo applicato (ad entrambe le tabelle e ad un'altra più grande che li contiene, in quanto applicare lo style al codice body non è pienamente supportato). Per ulteriori informazioni su questa impostazione di base, vedere Costruire da zero un modello email in HTML.

Poi ho aggiunto la nostra principale tabella di contenimento al centro con una classe 'content'.

Fai attenzione

Nota: Farai caso che in questo tutorial andrò ad inserire il codice CSS all'inizio del nostro documento. In genere inserisco gli stili all'inizio quando andrò a riutilizzarli e, mantenere gli stili in linea.

Importante: Ogni volta che si utilizzano le regole CSS nella sezione head del documento, devi utilizzare uno strumento per portare tutti in linea alla fine del processo. Se utilizzi un servizio come MailChimp o Campaign Monitor, ti porteranno per voi, i tuoi stili in linea appena importi la tua grafica. Devi fare questo perché alcuni client, come Gmail, ignoreranno o elimineranno il contenuto del tuo tag <style> o semplicemente lo ignoreranno. Puoi anche usare strumenti come Premailer per portare il tuo CSS in linea. Se usi Premailer o strumenti simili, ricorda di togliere le tue media query prima di processare (se vuoi che rimangano intatte), e poi reinseriscile alla fine. MailChimp e Campaign Monitor si preoccupano automaticamente di farlo per te.

Nascondere gli stili per mobile da Yahoo!

Avrai fatto caso che il tag body ha un attributo extra. Yahoo Mail ama interpretare il tuo media query come Vangelo, quindi per evitare questo problema, è necessario utilizzare i selettori di attributo. Ho trovato una soluzione semplicissima per fare questo (come suggerito da Email on Acid) ed è semplicemente aggiungere un attributo arbitrario al tag body. Come suggerito, io uso 'yahoo' ma può essere qualsiasi qualcosa che ti piace:

È quindi possibile destinare classi specifiche utilizzando il selettore di attributo per il tuo tag body nel CSS.

Due trucchi per padroneggiare il metodo fluido

Come puoi notare, la nostra tabella 'content' è impostata in modo tale che sarà larga al 100% così che sarà fluida e prenderà l'intera larghezza di uno smartphone e di uno schermo dei tablet. Abbiamo anche impostato che la massima larghezza sarà di 600px in modo da evitare che prenderà l'intera larghezza sui dispositivi che hanno schermi grandi.

Ora ci sono due cose un po' difficili che dobbiamo affrontare per garantire che tutto ciò, venga visualizzato come previsto in tutti i client di posta elettronica. Queste due correzioni, grazie all'eccellente tutorial di Tina Ye sono su questo metodo che è disponibile sul Blog di FogCreek.

1. Superare la mancanza di supporto per Max-Width

Sfortunatamente, max-width non è supportato da tutti i client di posta elettronica. Al fine di ottenere una corretta visualizzazione della nostra email in Outlook, Lotus Notes 8 & 8.5, abbiamo bisogno di racchiundere ogni tabella in qualche codice condizionale che crea una tabella con una larghezza impostata per tenere tutto dentro. Ci si rivolge ad IE (che è il motore di rendering utilizzato da Lotus Notes) e Microsoft Outlook.

Racchiuderemo la nostra tabella in alcuni codici condizionali:

2. Una soluzione per Apple Mail

Stranamente, Apple Mail (normalmente un client di posta elettronica molto progressiva) non supporta neanche la proprietà max-width. Ma supporta le query media però, così possiamo aggiungerne una che dice di impostare una larghezza sulla nostra tabella con classe 'content', come il riquadro di visualizzazione in grado di visualizzare l'intero 600px.

Creare l'header

Ora aggiungeremo la prima riga della nostra tabella — l'intestazione. Aggiungi il seguente codice allo stile della riga che abbiamo appena creato:

E poi, aggiungi questo nel tuo CSS, aggiungi lo spazio per l'intestazione:

Aggiungere la prima riga responsive

Ora andremo a creare la nostra prima vera riga responsive. Il modo per farlo è quello di creare due tabelle che 'flottano' uno accanto all'altro utilizzando la proprietà HTML 'align'.

Colonna di sinistra

Sostituisci il nostro piccolo saluto "Hello!" con il seguente:

Ora creiamo la tabella di 70px e aggiungiamo anche un po' di margine in cui agirà come spazio tra le due colonne. Il margine sul fondo aggiungerà uno spazio verticale quando le due colonne si ridurranno su mobile.

Colonna di destra

Creiamo ora la colonna di destra allineando di nuovo la tabella a sinistra. Questa tabella andrà ad essere larga di 445px, che ci lascerà 25px di spazio sulla sinistra. Questo è davvero importante perché Outlook automaticamente ridurrà le tue tabelle se non c'è almeno 25px sulle righe date.

Responsive-AlignedTables

Fino a quando permetti di avere almeno 25px di spazio, le tue tabelle funzioneranno così come aspettato.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Permetti di avere almeno 25px di spazio per impedire ad Outlook di ridurre le tabelle

Stop! Suggerimento alternativo per ingannare Outlook

Per risolvere questo capriccio, è possibile utilizzare del codice condizionale anche per ingannare Outlook a pensare di avere una cella chiusa e aperta una nuova. Dopo aver chiuso il tag della tua prima tabella e, prima di aprire il tag della tabella per la tua seconda, aggiungi semplicemente:


Continuiamo...

Sulla tabella di destra, più ampia, stiamo andando ad utilizzare lo stesso approccio che abbiamo utilizzato nella tabella contenitore, che prevede la creazione di una classe aggiungendo anche il codice condizionale che racchiude. Vogliamo che questa tabella sia larga 100% sui telefoni e poi che andrà sotto la tabella sulla sinistra.

Qui puoi vedere che ho creato una classe chiamata 'col425' per questa tabella, la nostra colonna larga 425px. Ho racchiuso la tabella in un codice condizionale che lo racchiuderà in una tabella larga 425px. Poi, aggiungiamo la nostra classe alla Media Query che abbiamo creato anche per Apple Mail.

Ora centro la nostra cella, aggiungiamo l'intestazione stilizzata.

Ho aggiunto alcune classi nelle altre celle per dare uno stile, così come alcuni stili che userò più avanti per altri tipi di testo:

La nostra intestazione è ora completa e ora puoi vedere sotto come le due colonne appariranno sui telefoni. (Per avere una anteprima di ciò che stai scrivendo, dovrai commentare in via temporanea la media query di min-device-width, perché forzano una larghezza fissa su desktop).

01-header

Creare una riga con singola colonna

Per creare una riga che contiene una singola colonna, basta aggiungere semplicemente una nuova riga al nostro '.content.' tabella. Poi aggiungeremo una classe 'innerpadding' a queste righe con valori di spaziatura che potremo riusare. Aggiungiamo anche una classe 'borderbottom' per inserire un bordo ad ogni riga.

Il nostro CSS per questa sezione:

Creazione dell'articolo con doppia colonna

Adesso andremo a creare una riga responsive esattamente come l'intestazione ma, con una leggera differenza sulla dimensione così che possiamo avere una immagine larga.

Abbiamo aggiunto un bottone qui con la classe 'buttonwrapper'. Contiene una cella con margine, un colore di sfondo preimpostato e infine un collegamento all'interno. Preferisco usare questo metodo perché ti permette di avere un bottone con una larghezza fluida di cui risulta veramente utile quando si crea un modello riusabile, dove, la lunghezaz di ogni bottone sarà differente ogni volta che verrà utilizzato. Se vuoi avere una larghezza fissa per i tuoi bottoni, potresti provare il Bulletproof Button Generator al posto di Campaign Monitor.

I nostri stili per il bottone:

Così come la larghezza impostata per questa nuova classe 'col380', aggiungeremo la nostra grandezza alla nostra lista di stili per prendersi cura di Apple Mail. E ora dovrebbe essere così:

Email-TwoCol

Creazione di una immagine su singola colonna

Questa è una riga davvero semplice; dobbiamo semplicemente impostare l'immagine al 100% della lunghezza dell'email e assicurarsi che la sua altezza sia impostata ad automatica usando il CSS.

Nel nostro CSS:

Creare la riga del testo finale

Infine, dobbiamo aggiungere una riga per il testo senza il bordo in fondo:

Creare il footer

Per creare il footer, aggiungeremo una nuova riga con una tabella all'interno. Una delle righe conterrà un'altra tabella per le nostre icone dei social network.

Aggiungeremo altri stili richiesti per il nostro footer nel CSS:

Ottimizzare i bottoni per i telefoni

Sui telefoni, è ideale che l'intero bottone sia un link, non solo un testo, perché è molto difficile individuare un piccolo collegamento con il dito. Perché non è possibile avere questo lavoro su ogni client per desktop (il margine non è supportato completamente con i tag <a>), è qualcosa che andrò ad aggiungere sulle versioni mobile usando le media query.

Andremo ad eliminare il colore dal <td> in cui è stato applicato e, poi lo applicheremo di nuovo al tag <a> che avrà molto margine.

Userò entrambi max-width e max-device-width in questa media query nel tentativo di evitare il bug in Outlook.com su IE9.

Ora quando farai tap sul bottone colorato su mobile, è un collegamento!

Ulteriori miglioramenti con media query

Se vuoi, puoi ora partire con il miglioramento del tuo layout applicando nomi delle classi agli elementi che vuoi controllare e poi, creare nuove regole all'interno delle media query che abbiamo creato sopra.

Come esempio, trasformeremo il nostro link di eliminazione della sottoscrizione in un bottone, aggiungendo una classe al collegamento:

e aggiungendo questo CSS alla media query:

Email-Footer-MQs

Puoi anche ridurre la quantità di spazio per le classi .innerpadding, .header e .footer per i client che supportano le media query.


Prova e parti!

Infine, come sempre, assicurati di validare (usando il validatore W3C --- dovresti ricevere solo un errore per l'attributo proprietario 'yahoo' sul tag body) e provare per bene usando dispositivi reali e un servizio di anteprima web come Litmus o Email on Acid.

Divertiti creando email responsive che saranno stupende da guardare in ogni client di posta elettronica.

Per passare al prossimo livello in ciò che hai imparato, dai una occhiata ai prossimi tutorial:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.