For people who need to create a RED(Responsive Email Design) for newsletter.
This document might help you...
Of course, the biggest challenges are Outlook, IE, Blackberry, and OLD Androids.
Undoubtedly, Dreamweaver is the best tool to create table layout.
You could review your table layout easily.
If you have Node.js environment, you could use nodemailer to send out your email easily.
Using npm install in this project will prepare relative packages for you.
After installation, configure sendmail.js file with your gmail account.
Then run node sendmail.js to see your result.
You should try Litmus or EmailOnAcid
You could choose to use these two kinds of DOCTYPE in your document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or
<!DOCTYPE html>
Use HTML5 Doctype will make your box model consistantly.
P.S. Make all brower happen image bugs.
Accorind to EmailOnAcid's suggestion, you should remove your doctype and test it on ie6, ie7, ie8 and other modern browsers then test with doctype on Hotmail.
And then you chould test with EmailOnAcid to make sure everything goes well.
Mailchimp has provided a good reset styles set.
P.S. If your email can't display correctly on Blackberry, try to remove this rule.
table {
border-collapse: collapse;
border-spacing: 0;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
If you encounter layout issues in old Gmail.app on Android devices.
Don't waste time on it.
Prevent email client strip your body tag, you need to put your content in a table to wrapper it.
Use second table to control your content.
Always set table's HTML attributes cellpadding and cellspacing to zero by default.
< table class="mail-wrapper" border="0" cellpadding="0" cellspacing="0">
...
</table>
cellpadding is your good friend to separate elements.
For better layout control, set your width attribute on HTML.
Control width in your media queries for mobile.
If you would like to set gaps between elements, don't use Space images, try this way:
<td style="font-size: 0; line-height: 0; border-top: 3px solid red;" height="10"> </td>
If your maximum width targets 600px, you would like to centre your content with 30px spaces in two sides.
Minor them (600-30*2) and set your width with 540px.
Due to browsers issue, img tag might have unpredictable spaces around itself.
You could set img tag's style to display:block.
<img style="display:block;" src="http://placehold.it/260x80">
Suprisingly, font tag could enforce your text color to anything you want!
HTML bgcolor attribute is your good friend to change background color.
<font color="#ffffff">Watch now</font>
<table bgcolor="#ffffff"></table>
You could use CSS3 for your Mobile Web.
Keep in mind and create things awesomed !
Mailchimp's Inline CSS service
Campaignmonitor's CSS compatible charts
Zurb's Responsive Email Templates
Zurb's Ink Email Template AMAZING!
CSS-Tricks - Complete guide table element
Campaign Monitor - Correct doctype to use in HTML email
Email On Acid - DOCTYPE, the black sheep of HTML email design
Campaign Monitor - Using Phone numbers in the HTML email
CSS-Tricks - Pointer Events Current Nav
http://templates.mailchimp.com/development/media-queries
http://templates.mailchimp.com/design/mobile-friendliness/