No description, website, or topics provided.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
html
.gitignore
LICENSE
README.md
package.json
sendmail.js

README.md

Responsive Email Layout


Preface

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.

Tools

Editor

Undoubtedly, Dreamweaver is the best tool to create table layout.

You could review your table layout easily.

Mail Testing

Manual test

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.

Auto testing

You should try Litmus or EmailOnAcid

Doctype

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.

Reset

Mailchimp has provided a good reset styles set.

Mailchimp - Reset Styles

P.S. If your email can't display correctly on Blackberry, try to remove this rule.

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

Control your viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Ignore old Gmail.app bugs on your Android

If you encounter layout issues in old Gmail.app on Android devices.

Don't waste time on it.

Two level table deep, at least!

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.

Best practices for your TABLE

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.

Set your width

For better layout control, set your width attribute on HTML.

Control width in your media queries for mobile.

Don't use space image

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">&nbsp;</td>

Set your comfortable width

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.

Best practice for your img tag

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">

Taming your font/background color!

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>

Progress enhancement

You could use CSS3 for your Mobile Web.

Keep in mind and create things awesomed !

Tools you might need

Mailchimp's Inline CSS service

Campaignmonitor's CSS compatible charts

Zurb's Responsive Email Templates

Zurb's Ink Email Template AMAZING!

Reference

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

Mailchimp - Reset Styles

Mailchimp - HTML

http://templates.mailchimp.com/development/media-queries

http://templates.mailchimp.com/design/mobile-friendliness/

Wikipedia - List of display pixel density

Nettuts - Responsive Email Template tutorial