jeanine schoessler [email protected] @graphical
TRANSCRIPT
![Page 2: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/2.jpg)
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
![Page 3: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/3.jpg)
Email exampleDevelop a template and reuseClean your text
(http://word2text.com/)
http://satinflame.com/eu/basic.html
![Page 4: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/4.jpg)
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>
![Page 5: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/5.jpg)
Start your emailBegin from scratch first time only!
Basic table code:<html><body><table><tr><td></td></tr></table></body></html>
![Page 6: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/6.jpg)
...<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>...
![Page 7: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/7.jpg)
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>
![Page 8: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/8.jpg)
Writing good alt tags
![Page 9: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/9.jpg)
What would you search for?
![Page 10: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/10.jpg)
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!)
![Page 11: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/11.jpg)
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
![Page 12: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/12.jpg)
Test your code
http://www.campaignmonitor.com/blog/post/3442/
![Page 13: Jeanine Schoessler jeaninerogers@hotmail.com @graphical](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649dd25503460f94ac962e/html5/thumbnails/13.jpg)
New changesCSS style breakpoints with media queriesCampaign Monitor template