[cssday 2015] css & email design - realtà e prospettive
TRANSCRIPT
![Page 1: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/1.jpg)
![Page 2: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/2.jpg)
Ho visto la NewEconomy e sono sopravvissuto.
Faenza - 27 marzo 2015
Chi sono?
@morloi @voxmailit
Alessandro Morloi Grazioli
www.emailmarketingblog.it
*Nel tempo libero uso le spade, ma è un altro discorso.
![Page 3: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/3.jpg)
![Page 4: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/4.jpg)
Faenza - 27 marzo 2015
Come si legge l’email oggi?
n.b. i dati in questione sono approssimativi e falsati [gmail, download immagini]
![Page 5: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/5.jpg)
Landing / SitoEmail / Contenuto
Landing / SitoClickDownload immaginiAperturaPreheaderOggetto
Faenza - 27 marzo 2015
Il flusso di vita di un’email
Mittente
Inbox
CSS
![Page 6: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/6.jpg)
<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
Il primo trucco. Il preheader nascosto.
![Page 7: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/7.jpg)
EmailHTMLCSS
DesignImmagini
TestoLink
Faenza - 27 marzo 2015
Email e Web sono uguali
WebHTMLCSS
DesignImmagini
TestoLink
![Page 8: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/8.jpg)
Faenza - 27 marzo 2015
Email e Web sono diversi
Email<table>
<td><td>
style=”...”bgcolorpadding
Web<div><h1><p>
<style>background-color
margin
![Page 9: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/9.jpg)
![Page 10: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/10.jpg)
![Page 11: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/11.jpg)
Faenza - 27 marzo 2015
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%
![Page 12: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/12.jpg)
Faenza - 27 marzo 2015
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à]
![Page 13: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/13.jpg)
Faenza - 27 marzo 2015
Mobile Email e supporto Media Query
*fonte https://www.campaignmonitor.com/css/ e VOXmail
@media
![Page 14: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/14.jpg)
![Page 15: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/15.jpg)
![Page 16: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/16.jpg)
![Page 17: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/17.jpg)
Faenza - 27 marzo 2015
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!
![Page 18: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/18.jpg)
Faenza - 27 marzo 2015
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 */ }
![Page 19: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/19.jpg)
Faenza - 27 marzo 2015
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
![Page 20: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/20.jpg)
Faenza - 27 marzo 2015
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;}
![Page 21: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/21.jpg)
Faenza - 27 marzo 2015
“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;}
![Page 22: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/22.jpg)
Faenza - 27 marzo 2015
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;}
![Page 23: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/23.jpg)
Faenza - 27 marzo 2015
Si può sperimentare. Basta scegliere il target
*fonte https://www.campaignmonitor.com/css/ e VOXmail
@font-face
CSS3
<audio>
<video>
![Page 24: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/24.jpg)
Faenza - 27 marzo 2015
Bibliografia e risorse
http://www.emailmarketingblog.itPensieri sparsi sull’email marketing by Bago e Morloi powered by VOXmailhttps://www.campaignmonitor.com/css/La guida di riferimento per il supporto dei css nell’emailhttp://backgrounds.cm/Background generator per emailhttp://buttons.cm/Button generator per emailhttp://responsiveemailresources.com/Tutto sullo stato dell’email responsivehttp://zurb.com/ink/Framework per lo sviluppo di email responsivehttp://zurb.com/ink/inliner.phpPratico inliner onlinehttps://litmus.com/community/code/516-outlook-com-stripping-conditional-comments-try-thisIl delirio conditional commentshttps://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-designLa guida di Litmus ai pulsanti bullet proof
![Page 25: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/25.jpg)
![Page 26: [CSSday 2015] CSS & Email Design - Realtà e Prospettive](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55b82987bb61eb680f8b45a2/html5/thumbnails/26.jpg)