Downloaded 16 times
![Faenza - 27 marzo 2015
morloi@voxmail.it
Come si legge l’email oggi?
n.b. i dati in questione sono approssimativi e falsati [gmail, download immagini]](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-4-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
Dove lo metto il CSS?
*fonte https://www.campaignmonitor.com/css/ e VOXmail
<style> in <head>
<style> in <body>
<link> in <body>
<link> in <head>
inline e tutti gli altri [strippando cose qua e là]](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-12-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
Modern Email Typography? Well, ehm, maybe.
<style>
@import url(http://fonts.googleapis.com/css?family=Merienda);
</style>
oppure
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
oppure
<style> @font-face { font-family: 'thegirlnextdoor'; src: url('[...].eot'); src: url('[...].eot?
#iefix') format('embedded-opentype'), url('[...].woff') format('woff'), url('[...].ttf') format
('truetype'), url('[...].svg') format('svg'); } </style>
Remember! Graceful degradation!](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-17-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
Workaround, trucchi et similia. Bottoni!
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="
height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;
font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:
all;">I am a button →</a>
</div>
</td>
</tr>
</table>
fonte http://buttons.cm/ // Campaign Monitor
VML Fallback
PROGRESSIVE ENHANCEMENT
@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }
@-moz-document url-prefix() { /* Insert -moz-targeted CSS here */ }](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-18-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
Sfondi, Sfondi, Sfondi!
<div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/YJOX1PC.png">
[...]
</td>
</tr>
</table>
</div>
fonte http://backgrounds.cm/ // Campaign Monitor
Background Image - VML Fallback](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-19-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
Sempre più difficile: CSS3 shadowbox!
<table class="twelve columns effect1" bgcolor="#ffffff">
<tr>
<td class="text-pad">
<h1>Hi, Susan Calvin</h1>
<p class="lead">Phasellus dictum sapien a neque luctus cursus.</p>
<p>[...]</p>
</td>
<td class="expander"></td>
</tr>
</table>
La base: CSS3 “puro”
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-20-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
“CSS3” shadowbox alla maniera di Gmail!
<table class="twelve columns effect1" bgcolor="#ffffff">
<tr>
<td class="text-pad">
<h1>Hi, Susan Calvin</h1>
<p class="lead">Phasellus dictum sapien a neque luctus cursus.</p>
<p>[...]</p>
</td>
<td class="expander"></td>
</tr>
</table>
<table><tr><td style="opacity:0;width:580px;height:16px;font-size:1px;line-
height:16px;" ><img src="http://www.voxmail.it/lamiaombra.png"
/></td></tr></table>
Fallback per Gmail: immagine con trucchetto
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-21-2048.jpg)
![Faenza - 27 marzo 2015
morloi@voxmail.it
A Outlook piace farlo strano. Tipo VML
<table class="twelve columns effect1" bgcolor="#ffffff">
<tr>
<td class="text-pad">
<h1>Hi, Susan Calvin</h1>
<p class="lead">Phasellus dictum sapien a neque luctus cursus.</p>
<p>[...]</p>
</td>
<td class="expander"></td>
</tr>
</table>
<!--[if !mso]><!--><table><tr><td style="opacity:0;width:580px;height:16px;
font-size:1px;line-height:16px;" ><img src="http://www.voxmail.
it/lamiaombra.png" /></td></tr></table>
<!--<![endif]-->
<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="
width:570px;height:10px;position:relative;left:5px;margin-bottom:5px;"
strokecolor="none">
<v:fill type=gradient color2="#666666" color1="#ffffff" opacity="0%" >
</v:rect><![endif]-->
Fallback per Outlook: VML a gogo
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}](https://image.slidesharecdn.com/cssday2015-cssemaildesign2-150330031839-conversion-gate01/75/CSSday-2015-CSS-Email-Design-Realta-e-Prospettive-22-2048.jpg)
Uploaded byVOXmail
[CSSday 2015] CSS & Email Design - Realtà e Prospettive
Il documento discute l'importanza del design delle email, esplorando differenze tra email e web design e l'utilizzo di CSS. Vengono presentati suggerimenti pratici per la progettazione di email, inclusa l'importanza dell'adattamento per dispositivi mobili e l'uso di tabelle per garantire compatibilità, specialmente con Outlook. Include anche link a risorse utili per migliorare la progettazione delle email.
![[SMAU Milano] Email marketing: falsi miti e cattive abitudini](https://cdn.slidesharecdn.com/ss_thumbnails/milanoemailmarketing-falsimitiecattiveabitudini2-161111094721-thumbnail.jpg?width=640&height=640&fit=bounds)
[CSSday 2015] CSS & Email Design - Realtà e Prospettive
- 1. CSS & EmailDesign. Realtà e prospettive. Faenza - 27 marzo 2015 morloi@voxmail.it
- 2. Ho visto laNewEconomy e sono sopravvissuto. Faenza - 27 marzo 2015 morloi@voxmail.it Chi sono? @morloi @voxmailit Alessandro Morloi Grazioli www.emailmarketingblog.it *Nel tempo libero uso le spade, ma è un altro discorso.
- 3. Faenza - 27marzo 2015 morloi@voxmail.it Perché Email Design? 1971 2015
- 4. Faenza - 27marzo 2015 morloi@voxmail.it Come si legge l’email oggi? n.b. i dati in questione sono approssimativi e falsati [gmail, download immagini]
- 5. Landing / SitoEmail/ Contenuto Landing / SitoClick Download immagini AperturaPreheaderOggetto Faenza - 27 marzo 2015 morloi@voxmail.it Il flusso di vita di un’email Mittente Inbox CSS
- 6. <div style="display:none; font-size:1px; color:#333333; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">Preheader Text</div> Faenza- 27 marzo 2015 morloi@voxmail.it Il primo trucco. Il preheader nascosto.
- 7. Email HTML CSS Design Immagini Testo Link Faenza - 27marzo 2015 morloi@voxmail.it Email e Web sono uguali Web HTML CSS Design Immagini Testo Link
- 8. Faenza - 27marzo 2015 morloi@voxmail.it Email e Web sono diversi Email <table> <td> <td> style=”...” bgcolor padding Web <div> <h1> <p> <style> background-color margin
- 9. Faenza - 27marzo 2015 morloi@voxmail.it Email hates standards
- 10. Faenza - 27marzo 2015 morloi@voxmail.it Browser wars are for pussies
- 11. Faenza - 27marzo 2015 morloi@voxmail.it Non dimentichiamo gli italiani! 17,40%* 13,56% 16,58% 5,06%* 1,12% 2,60% 10,82%* 4,72% + 2,29% 1,12% + 2,60% 4,50%* 0,69% 0,31% 0,82%* 0,26% 0,23% *caselle riferite a domini di posta // fonte VOXmail 15,75%* 16,04%
- 12. Faenza - 27marzo 2015 morloi@voxmail.it Dove lo metto il CSS? *fonte https://www.campaignmonitor.com/css/ e VOXmail <style> in <head> <style> in <body> <link> in <body> <link> in <head> inline e tutti gli altri [strippando cose qua e là]
- 13. Faenza - 27marzo 2015 morloi@voxmail.it Mobile Email e supporto Media Query *fonte https://www.campaignmonitor.com/css/ e VOXmail @media
- 14. Faenza - 27marzo 2015 morloi@voxmail.it Back to 1999: Tabelle ovunque!
- 15. Faenza - 27marzo 2015 morloi@voxmail.it E perché le tabelle? Outlook non ama altro.
- 16. Faenza - 27marzo 2015 morloi@voxmail.it Return to 2015: ma che siano responsive!
- 17. Faenza - 27marzo 2015 morloi@voxmail.it Modern Email Typography? Well, ehm, maybe. <style> @import url(http://fonts.googleapis.com/css?family=Merienda); </style> oppure <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> oppure <style> @font-face { font-family: 'thegirlnextdoor'; src: url('[...].eot'); src: url('[...].eot? #iefix') format('embedded-opentype'), url('[...].woff') format('woff'), url('[...].ttf') format ('truetype'), url('[...].svg') format('svg'); } </style> Remember! Graceful degradation!
- 18. Faenza - 27marzo 2015 morloi@voxmail.it Workaround, trucchi et similia. Bottoni! <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style=" height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035"> <w:anchorlock/> <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center> </v:roundrect> <![endif]--> <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block; font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide: all;">I am a button →</a> </div> </td> </tr> </table> fonte http://buttons.cm/ // Campaign Monitor VML Fallback PROGRESSIVE ENHANCEMENT @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ } @-moz-document url-prefix() { /* Insert -moz-targeted CSS here */ }
- 19. Faenza - 27marzo 2015 morloi@voxmail.it Sfondi, Sfondi, Sfondi! <div style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="http://i.imgur.com/YJOX1PC.png"> [...] </td> </tr> </table> </div> fonte http://backgrounds.cm/ // Campaign Monitor Background Image - VML Fallback
- 20. Faenza - 27marzo 2015 morloi@voxmail.it Sempre più difficile: CSS3 shadowbox! <table class="twelve columns effect1" bgcolor="#ffffff"> <tr> <td class="text-pad"> <h1>Hi, Susan Calvin</h1> <p class="lead">Phasellus dictum sapien a neque luctus cursus.</p> <p>[...]</p> </td> <td class="expander"></td> </tr> </table> La base: CSS3 “puro” .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }
- 21. Faenza - 27marzo 2015 morloi@voxmail.it “CSS3” shadowbox alla maniera di Gmail! <table class="twelve columns effect1" bgcolor="#ffffff"> <tr> <td class="text-pad"> <h1>Hi, Susan Calvin</h1> <p class="lead">Phasellus dictum sapien a neque luctus cursus.</p> <p>[...]</p> </td> <td class="expander"></td> </tr> </table> <table><tr><td style="opacity:0;width:580px;height:16px;font-size:1px;line- height:16px;" ><img src="http://www.voxmail.it/lamiaombra.png" /></td></tr></table> Fallback per Gmail: immagine con trucchetto .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }
- 22. Faenza - 27marzo 2015 morloi@voxmail.it A Outlook piace farlo strano. Tipo VML <table class="twelve columns effect1" bgcolor="#ffffff"> <tr> <td class="text-pad"> <h1>Hi, Susan Calvin</h1> <p class="lead">Phasellus dictum sapien a neque luctus cursus.</p> <p>[...]</p> </td> <td class="expander"></td> </tr> </table> <!--[if !mso]><!--><table><tr><td style="opacity:0;width:580px;height:16px; font-size:1px;line-height:16px;" ><img src="http://www.voxmail. it/lamiaombra.png" /></td></tr></table> <!--<![endif]--> <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" style=" width:570px;height:10px;position:relative;left:5px;margin-bottom:5px;" strokecolor="none"> <v:fill type=gradient color2="#666666" color1="#ffffff" opacity="0%" > </v:rect><![endif]--> Fallback per Outlook: VML a gogo .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }
- 23. Faenza - 27marzo 2015 morloi@voxmail.it Si può sperimentare. Basta scegliere il target *fonte https://www.campaignmonitor.com/css/ e VOXmail @font-face CSS3 <audio> <video>
- 24. Faenza - 27marzo 2015 morloi@voxmail.it Bibliografia e risorse http://www.emailmarketingblog.it Pensieri sparsi sull’email marketing by Bago e Morloi powered by VOXmail https://www.campaignmonitor.com/css/ La guida di riferimento per il supporto dei css nell’email http://backgrounds.cm/ Background generator per email http://buttons.cm/ Button generator per email http://responsiveemailresources.com/ Tutto sullo stato dell’email responsive http://zurb.com/ink/ Framework per lo sviluppo di email responsive http://zurb.com/ink/inliner.php Pratico inliner online https://litmus.com/community/code/516-outlook-com-stripping-conditional-comments-try-this Il delirio conditional comments https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design La guida di Litmus ai pulsanti bullet proof
- 25. Faenza - 27marzo 2015 Una piccola sorpresa: MOSAICO
- 26. GRAZIE! p.s. la teorianon sanguina. Faenza - 27 marzo 2015 morloi@voxmail.it