Sia come designer che come sviluppatori, un giorno il tuo cliente ti chiederà un modello di email per la sua newsletter. Devo dire che i modelli di posta elettronica non sono così entusiasmanti semplicemente perché c'è una grande lacuna nel supporto per HTML e CSS. Penseresti che nell'era odierna non sarebbe il caso dato che stiamo spingendo avanti con HTML5 e CSS3. Tuttavia, sono triste nel dire che quando si tratta di rendere le e-mail non è assolutamente così.
La prima cosa da tenere a mente quando si crea un modello di email HTML è il fatto che tutti gli stili CSS devono essere inseriti in linea. In ogni altro caso, questo è un grande no-no. Ma, poiché c'è pochissimo supporto per i CSS esterni e persino per i CSS nella testa, l'inline è il modo per farlo. Inoltre, e sono sicuro che ne avrai già sentito parlare, il modello deve essere creato con TABELLE, non DIV. Ancora una volta, questo è un peccato, ma è la strada da percorrere. Dato che le e-mail non sono così grandi nel complesso, progettarle e crearle non è difficile: è solo noioso rispetto al web o al design mobile.
Sommario mostra
Il design
La struttura
Lo stile
Il contenuto
Lo stile in linea
Corpo
Tavolo
Prima riga - Intestazione
Seconda fila
Terza fila
Quarta fila
Quinta riga – Piè di pagina
Parole finali
Il design
Consigliato per te: come velocizzare il processo di progettazione utilizzando i moderni framework CSS?
La struttura
All'interno del corpo della pagina HTML, incolla il codice qui sotto. Semplicemente guardando il codice, puoi dire che non c'è molto nella struttura di questa email. Questa è in realtà un'ottima cosa in quanto le e-mail non dovrebbero mai essere complesse. Finora, c'è anche una minuscola quantità di stile solo quello che specifica la larghezza totale della tabella e che non c'è nulla tra le celle della tabella.
Ok, ora aggiungeremo alcuni CSS all'interno del contenuto del documento. Non è niente di speciale, solo un ripristino e una definizione del colore e dello stile del collegamento. Starei molto attento a quale CSS inserisci qui poiché spesso viene ignorato dai client di posta elettronica.
È giunto il momento di riempire le tabelle di contenuti. Puoi trovare le immagini all'interno del file fornito sopra - all'inizio di questo tutorial. Ora dovresti compilare tutto il testo e le immagini che devono essere all'interno di questa email. Tieni presente che nel tutorial non devi effettivamente collegare i collegamenti ipertestuali a nulla e sei libero di utilizzare anche le tue immagini. Finora all'interno del codice, ho definito la larghezza per tutte e tre le immagini solo per assicurarmi che la loro dimensione sia impostata.
C'è qualcosa di cui ho bisogno che tu sia estremamente consapevole: le immagini sono ottime per le e-mail purché siano a: di piccole dimensioni eb: abbiano un tag alt che le descriva bene. Sono sicuro che sai che affinché le immagini appaiano all'interno di un'e-mail, il destinatario di questa e-mail deve consentire la visualizzazione delle immagini. Se non lo fanno, non c'è nulla che dica loro cosa dovrebbero aspettarsi. È anche un problema di accessibilità se non si fornisce una descrizione per gli utenti non vedenti. Tuttavia, questa è un'altra storia. Quindi, la lezione è: usa sempre una piccola immagine con un tag alt!
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>
Lo stile in linea
L'ultima cosa che faremo è fornire lo stile CSS in linea per questo modello di email HTML. È ciò che rende l'aspetto dell'e-mail come puoi vedere finora questa e-mail non è stata affatto carina. Spezzerò questa parte in piccoli pezzi in modo che non diventi troppo opprimente.
Potrebbe piacerti anche: 7 consigli utili per rendere più cliccabile l'oggetto della tua email.
Corpo
Innanzitutto, impostiamo il colore di sfondo dell'intera pagina e-mail, nonché la dimensione e il colore del carattere predefiniti.
<body bgcolor="#f7d973" ></body>
Tavolo
La prossima cosa da fare è centrare il contenuto dell'e-mail e fornirgli anche il proprio colore di sfondo in modo che risalti.
Prima riga - Intestazione
Stanno succedendo molte cose nella cella della prima fila. Si prega di notare che lo stile in linea è su <td> non su <tr>. Quello che stiamo facendo qui è un nuovo colore di sfondo che corrisponda a quello del logo. Inoltre, c'è anche un po 'di riempimento e allineamento. Ora sto cambiando il colore del testo in bianco perché il testo alternativo sarà nero per impostazione predefinita. Non sarai in grado di vederlo su questo sfondo, quindi mi assicuro che tu possa farlo cambiando il colore del testo. Potrebbe sembrarti inutile, ma come ho detto questo è molto importante per le persone che non hanno immagini consentite per impostazione predefinita.
All'interno della riga c'è, ancora una volta, solo una cella che si estende su due colonne. Questa cella viene manipolata leggermente aggiungendovi del riempimento e una linea di separazione in fondo per separare il suo contenuto dalla riga sottostante. Abbiamo anche un grande titolo che sta guadagnando spazio attraverso i margini. E questo è tutto per questa riga.
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>
Terza fila
Per entrambe le celle qui stiamo impostando sia la larghezza che il riempimento. Sono esattamente gli stessi in modo che le celle siano divise uniformemente a metà. Oltre a ciò, non c'è nient'altro poiché le celle sono riempite con un'immagine e del testo a riguardo.
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>
Quarta fila
Questa è di gran lunga la sezione più stilizzata di questo modello di email HTML. Come puoi vedere dal codice qui sotto, c'è molto da fare. Innanzitutto, l'intera riga riceve un nuovo colore di sfondo e un nuovo colore del testo per assicurarsi che il testo sia visibile, proprio come nell'intestazione. Sia la prima che la seconda cella e il loro contenuto stanno ottenendo le stesse identiche modifiche di stile. Innanzitutto, la cella stessa riceve un nuovo sfondo e un nuovo colore del testo. Quindi, il collegamento all'interno della sua intestazione diventa giallo. Infine, l'ultimo paragrafo viene sottolineato e per aggiungere un po' di separazione viene aggiunto anche un margine. Come ho detto, la seconda cella e il suo contenuto assumono esattamente la stessa stilizzazione.
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
E infine, il piè di pagina. C'è molto poco da fare qui; solo un po 'di spaziatura tramite imbottitura e basta!
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Parole finali
Questo tutorial è un po' lungo, ma spero che tu ora capisca cosa serve per creare un modello di email HTML da zero. Non è un concetto complicato ma può essere noioso. Ora è il tuo turno di uscire e iniziare a creare e-mail dall'aspetto straordinario e di fascia alta! Puoi combinare diverse tecniche di creazione di un modello di email per renderlo più unico.
Questo articolo è stato scritto da Hannah Butler. Lavora come web developer e designer. Inoltre, le piace condividere la sua esperienza sotto forma di articoli. In questo caso, ha una sua sezione sul sito web WriteMyPaper4Me.co. In futuro, inizierà a scrivere un blog per descrivere agli altri i suoi metodi di lavoro.
