Die größten Hits der 90er
und das Beste von Heute

Templating für HTML Mails

Jakob Stehr

@jackomono

< html >

Tabellen HTML

Inline CSS

HTML Attribute


< table 
	width="100%" 
	cellpadding="0" 
	cellspacing="0" 
	border="0" >
< /table >


< td 
	width="100%" 
	align="center" >
< /td >


< td 
	width="30" >
< /td >

funktioniert

font

color

background-color

funktioniert nicht

float

Webfonts

position

Formulare

Javascript

Video

uvm.

mit Einschränkungen/Hacks

margin

padding

background-image

Outlook 2007, 2010, 2013, 2016
Microsoft Word

padding - nur td,th

margin - nur Block-Level, keine td,th

style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"

< !--[if gte mso 9] > < ! [endif]-->

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

< ![if !mso] > < ![endif] >

Downlevel-revealed conditional comments


	
	  
	    
	    96
	 
	
					

Win7, > 96 dpi, aktivierter Textzoom


< v:rect xmlns:v="urn:schemas-microsoft-com:vml" 
	fill="true" stroke="false" style="mso-width-percent:1000;">
< v:fill type="frame" 
    src="http://www.yoursite.com/yourimages/photo.jpg" 
    color="#7bceeb" />

< v:textbox style="mso-fit-shape-to-text:true" 
    inset="0,0,0,0">
< /v:textbox>

< /v:rect>
					

style=''

!important

@media screen and (-webkit-min-device-pixel-ratio:0)

@media only screen and (max-width: 599px)

!important

th statt td (Android 4.4)

th { display: block !important; width: 100% !important; }

Testen, testen, testen

Litmus.com

Emailonacid.com

Links

www.campaignmonitor.com/css/

Mailchimp CSS Referenz

backgrounds.cm

emailology.org

sitepackage.de/

Frameworks

ZURB Foundation for Emails

emailframe.work