Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS & Email Design.
Realtà e prospettive.
Faenza - 27 marzo 2015
morloi@voxmail.it
Ho visto la NewEconomy e sono sopravvissuto.
Faenza - 27 marzo 2015
morloi@voxmail.it
Chi sono?
@morloi @voxmailit
Alessan...
Faenza - 27 marzo 2015
morloi@voxmail.it
Perché Email Design?
1971 2015
Faenza - 27 marzo 2015
morloi@voxmail.it
Come si legge l’email oggi?
n.b. i dati in questione sono approssimativi e falsat...
Landing / SitoEmail / Contenuto
Landing / SitoClick
Download
immagini
AperturaPreheaderOggetto
Faenza - 27 marzo 2015
morl...
<div style="display:none;
font-size:1px;
color:#333333;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflo...
Email
HTML
CSS
Design
Immagini
Testo
Link
Faenza - 27 marzo 2015
morloi@voxmail.it
Email e Web sono uguali
Web
HTML
CSS
De...
Faenza - 27 marzo 2015
morloi@voxmail.it
Email e Web sono diversi
Email
<table>
<td>
<td>
style=”...”
bgcolor
padding
Web
...
Faenza - 27 marzo 2015
morloi@voxmail.it
Email hates standards
Faenza - 27 marzo 2015
morloi@voxmail.it
Browser wars are for pussies
Faenza - 27 marzo 2015
morloi@voxmail.it
Non dimentichiamo gli italiani!
17,40%*
13,56%
16,58%
5,06%*
1,12%
2,60%
10,82%*
...
Faenza - 27 marzo 2015
morloi@voxmail.it
Dove lo metto il CSS?
*fonte https://www.campaignmonitor.com/css/ e VOXmail
<styl...
Faenza - 27 marzo 2015
morloi@voxmail.it
Mobile Email e supporto Media Query
*fonte https://www.campaignmonitor.com/css/ e...
Faenza - 27 marzo 2015
morloi@voxmail.it
Back to 1999: Tabelle ovunque!
Faenza - 27 marzo 2015
morloi@voxmail.it
E perché le tabelle? Outlook non ama altro.
Faenza - 27 marzo 2015
morloi@voxmail.it
Return to 2015: ma che siano responsive!
Faenza - 27 marzo 2015
morloi@voxmail.it
Modern Email Typography? Well, ehm, maybe.
<style>
@import url(http://fonts.googl...
Faenza - 27 marzo 2015
morloi@voxmail.it
Workaround, trucchi et similia. Bottoni!
<table width="100%" border="0" cellspaci...
Faenza - 27 marzo 2015
morloi@voxmail.it
Sfondi, Sfondi, Sfondi!
<div style="background-color:#7bceeb;">
<!--[if gte mso 9...
Faenza - 27 marzo 2015
morloi@voxmail.it
Sempre più difficile: CSS3 shadowbox!
<table class="twelve columns effect1" bgcol...
Faenza - 27 marzo 2015
morloi@voxmail.it
“CSS3” shadowbox alla maniera di Gmail!
<table class="twelve columns effect1" bgc...
Faenza - 27 marzo 2015
morloi@voxmail.it
A Outlook piace farlo strano. Tipo VML
<table class="twelve columns effect1" bgco...
Faenza - 27 marzo 2015
morloi@voxmail.it
Si può sperimentare. Basta scegliere il target
*fonte https://www.campaignmonitor...
Faenza - 27 marzo 2015
morloi@voxmail.it
Bibliografia e risorse
http://www.emailmarketingblog.it
Pensieri sparsi sull’emai...
Faenza - 27 marzo 2015
Una piccola sorpresa: MOSAICO
GRAZIE!
p.s. la teoria non sanguina.
Faenza - 27 marzo 2015
morloi@voxmail.it
Upcoming SlideShare
Loading in …5
×

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

898 views

Published on

Tabelle e stili inline. Chiunque si trovi ad occuparsi di email design è costretto a fare un viaggio nel tempo, ritrovandosi improvvisamente alla fine degli anni 90. Client di posta ostinati, webmail e device mobili rendono la vita un inferno. Viaggio all'interno delle problematiche e delle possibilità di uso dei CSS nell'email design, con un occhio ai possibili sviluppi e piedi e mani nella realtà di tutti i giorni (con un focus specifico sulla realtà webmail italiana).

Published in: Marketing
  • Be the first to comment

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

  1. 1. CSS & Email Design. Realtà e prospettive. Faenza - 27 marzo 2015 morloi@voxmail.it
  2. 2. Ho visto la NewEconomy 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. 3. Faenza - 27 marzo 2015 morloi@voxmail.it Perché Email Design? 1971 2015
  4. 4. 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]
  5. 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. 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. 7. Email HTML CSS Design Immagini Testo Link Faenza - 27 marzo 2015 morloi@voxmail.it Email e Web sono uguali Web HTML CSS Design Immagini Testo Link
  8. 8. Faenza - 27 marzo 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. 9. Faenza - 27 marzo 2015 morloi@voxmail.it Email hates standards
  10. 10. Faenza - 27 marzo 2015 morloi@voxmail.it Browser wars are for pussies
  11. 11. Faenza - 27 marzo 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. 12. 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à]
  13. 13. Faenza - 27 marzo 2015 morloi@voxmail.it Mobile Email e supporto Media Query *fonte https://www.campaignmonitor.com/css/ e VOXmail @media
  14. 14. Faenza - 27 marzo 2015 morloi@voxmail.it Back to 1999: Tabelle ovunque!
  15. 15. Faenza - 27 marzo 2015 morloi@voxmail.it E perché le tabelle? Outlook non ama altro.
  16. 16. Faenza - 27 marzo 2015 morloi@voxmail.it Return to 2015: ma che siano responsive!
  17. 17. 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!
  18. 18. 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 &rarr;</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 &rarr;</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. 19. 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
  20. 20. 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; }
  21. 21. 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; }
  22. 22. 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; }
  23. 23. Faenza - 27 marzo 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. 24. Faenza - 27 marzo 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. 25. Faenza - 27 marzo 2015 Una piccola sorpresa: MOSAICO
  26. 26. GRAZIE! p.s. la teoria non sanguina. Faenza - 27 marzo 2015 morloi@voxmail.it

×