emailGrid is a starting point for creating a bulletproof email template. You are welcome to use it for any project and customize it to your heartâ€™s content.
emailGrid is a starting point for creating a bulletproof email template. You take what you want and run with it. It is designed to be as email service agnostic as possible. Iâ€™ve used it plenty withÂ Campaign Monitor andÂ MailChimp.
Tables, tables, tables! Tables is stable, and we need to kick it oldschool for email newsletters. Fortunately, I lived through the browser wars of the mid 90s, and these are the â€œbest practicesâ€ I cut my teeth on!
Remember, the majority of the structure is in the markup. Everything is based on a 80px grid with 10px of padding on each side. This leaves a 100px grid that includes 20px gutters between columns, and 10px gutters on the sides of the email.
|If you want ...||Set td width attr to ...|
- 600px width. The maximum recommended space for your messaging with respectable gutters.
- 1, 2, 3, 4 and 6 column widths, including â€œfloated imageâ€ columns (you canâ€™t float in emails, son).
- Share on Facebook, Twitter and Email using nothing more than old-fashioned URLs.
- Find/replace placeholder text to make customizing a little easier on you. If you host your newsletters on your website, you can replace these with variables from your favorite server-sided language.
- Email client preview pane text. â€œHaving trouble viewing this email?â€ Probably not. Donâ€™t let this be the message everyone sees in their iPhone mail listing. Set it in the markup, and hide it with CSS.
- All style classes and placeholder text is namespaced with â€œeG-â€ for easy customizability.
Find/Replace Placeholder Text
- [eG-newsletterTitle] - The name of your newsletter
- [eG-issueTitle] - The subject of the email
- [eG-previewText] - Text to display in the preview pane of mobile devices and email clients (hidden with CSS)
- [eG-issueUrl] - The URL of the email on your web server with protocol and trailing slash. Ex.Â http://yourdomain.com/newsletter/01-01/
- [eG-issueImg] - Image to use for sharing on Facebook
- [eG-twitterName] - The Twitter user name of the organization
- [eG-orgName] - The actual, real name of your organization (required by US law)
- [eG-streetAddress] - The actual, real mailing address/P.O. Box of your organization (required by US law)
- [eG-siteUrl] - The URL of your organization website without http://
Email Service Placeholder Variables
- [eG-unsubscribe] = Campaign Monitor: opt-out MailChimp: opt-out (required by US law)
- [eG-subscriberEmail] = Campaign Monitor: [email] MailChimp: *|EMAIL|*