jeanine schoessler jeaninerogers@hotmail.com @graphical
Post on 24-Dec-2015
213 Views
Preview:
TRANSCRIPT
Overview of HTMLJeanine Schoessler
jeaninerogers@hotmail.com@graphical
Back to basics“Code like it’s 1999”Design your layout using tablesUse inline CSS styles Apply styles to every tagFormat your pictures before inserting
Email exampleDevelop a template and reuseClean your text
(http://word2text.com/)
http://satinflame.com/eu/basic.html
Paragraph exampleWhat is inline CSS?
<p style="font-family:Verdana,sans-serif;font-size:16pt;line-height:20pt;color: #B00;margin-bottom:0;padding-bottom:0;font-weight:bold;text-align:center;">"Code like it's 1999."</p>
Start your emailBegin from scratch first time only!
Basic table code:<html><body><table><tr><td></td></tr></table></body></html>
...<table width="600" cellspacing="0" cellpadding="0" style="border: 1px solid #000;"><tr><td><p style="padding:0;margin:0;"><img style="border-bottom: 1px solid #000;" src="http://www.satinflame.com/tutorials/email_header.jpg" alt="HTML: Email" width="600" height="180" border="0"></p></td></tr></table>...
AccessibilityWhat is it?
<p style="padding:0;margin:0;"><img style="border-bottom: 1px solid #000;" src="http://www.satinflame.com/tutorials/email_header.jpg" alt="HTML: Email" width="600" height="180" border="0"></p>
Writing good alt tags
What would you search for?
Whitespace on <td> only<tr><td align="left" valign="top" style="font-family:Verdana,sans-serif;font-size:10pt;line-height:14pt;color:#000;padding: 15px 15px 0px 15px;text-align:left;"> <table width="568" cellpadding="0" cellspacing="0"> <tr> <td align="left" style="font-family:Verdana,sans-serif;line-height:14pt;color:#000;padding: 0 0em 15px 0px;text-align:left;">
(0 = 0em = 0px; 0 is 0 everywhere!)
Styling your paragraph<p style="font-family:Verdana,sans-serif;font-size:16pt;line-height:20pt;color: #B00;margin-bottom:0;padding-bottom:0;font-weight:bold;text-align:center;">"Code like it's 1999."</p>
Use <br> (SHIFT+ENTER in Dreamweaver) to make space and keep formatting
Test your code
http://www.campaignmonitor.com/blog/post/3442/
New changesCSS style breakpoints with media queriesCampaign Monitor template
top related