[CSSday 2015] CSS & Email Design - Realtà e Prospettive

CSS & Email Design.
Realtà e prospettive.
Faenza - 27 marzo 2015
morloi@voxmail.it

Ho visto la NewEconomy e sono sopravvissuto.
morloi@voxmail.it
Chi sono?
@morloi @voxmailit
Alessandro Morloi Grazioli
www.emailmarketingblog.it
*Nel tempo libero uso le spade, ma è un altro discorso.

morloi@voxmail.it
Perché Email Design?
1971 2015

morloi@voxmail.it
Come si legge l’email oggi?
n.b. i dati in questione sono approssimativi e falsati [gmail, download immagini]

Landing / SitoEmail / Contenuto
Landing / SitoClick
Download
immagini
AperturaPreheaderOggetto
morloi@voxmail.it
Il flusso di vita di un’email
Mittente
Inbox
CSS

<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>
morloi@voxmail.it
Il primo trucco. Il preheader nascosto.

Email
HTML
CSS
Design
Immagini
Testo
Link
morloi@voxmail.it
Email e Web sono uguali
Web
HTML
CSS
Design
Immagini
Testo
Link

morloi@voxmail.it
Email e Web sono diversi
Email
<table>
<td>
<td>
style=”...”
bgcolor
padding
Web
<div>
<h1>
<p>
<style>
background-color
margin

morloi@voxmail.it
Email hates standards

morloi@voxmail.it
Browser wars are for pussies

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%

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à]

morloi@voxmail.it
Mobile Email e supporto Media Query
@media

morloi@voxmail.it
Back to 1999: Tabelle ovunque!

morloi@voxmail.it
E perché le tabelle? Outlook non ama altro.

morloi@voxmail.it
Return to 2015: ma che siano responsive!

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!

morloi@voxmail.it
Workaround, trucchi et similia. Bottoni!
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>

<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 */ }

morloi@voxmail.it
Sfondi, Sfondi, Sfondi!
<div style="background-color:#7bceeb;">

<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

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;
}

morloi@voxmail.it
“CSS3” shadowbox alla maniera di Gmail!
<tr>
<p>[...]</p>
</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{
}

morloi@voxmail.it
A Outlook piace farlo strano. Tipo VML
<tr>
<p>[...]</p>
</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 Outlook: VML a gogo
.effect1{
}

morloi@voxmail.it
Si può sperimentare. Basta scegliere il target
@font-face
CSS3
<audio>
<video>

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

Una piccola sorpresa: MOSAICO

GRAZIE!
p.s. la teoria non sanguina.
morloi@voxmail.it

[CSSday 2015] CSS & Email Design - Realtà e Prospettive

Recommended

Recommended

More Related Content

More from VOXmail

More from VOXmail (7)

[CSSday 2015] CSS & Email Design - Realtà e Prospettive