HTML EMAIL

What a Designer Needs to Know

Fundamental Tips to Help You Succeed

Tips to keep in mind when designing HTML Emails

KEEP IT SIMPLE

Focus on your message and story. Many people receive multiple business emails a day and are already less than likely to open or interact with your email if it is not somewhere they already frequent.

POST IMAGES ON PUBLIC SERVERS

Use absolute paths in your code when you embed images or link to files. Make sure your assets are hosted on a publicly accessible server, so your recipients can see the images or download the files. Avoid free hosting sites, too, because these often have bandwidth limits that may prevent your images from displaying.

KEEP CODE SIMPLE

Keep the code simple. All email programs use different methods to render HTML, like Internet Explorer, Microsoft Word, or their own proprietary renderer, so more high-level coding may not display as intended.

KEEP STRIPPING IN MIND

Browser-based email fundtips like Gmail, Yahoo, and Hotmail strip out your DOCTYPE, BODY, and HEAD tags, so your code doesn't override theirs. Anything you'd normally code inside those tags (background colors, embedded CSS, JavaScript, background music files, etc.) will be removed. Use inline CSS and FONT tags. MailChimp offers a CSS inliner tool to help with this.

TEST CAMPAIGNS BEFORE SENDING

Because all email programs render HTML differently, test your HTML email on different email programs. You can also use Inbox Preview to test how your email renders in major programs.

KEEP IT SMALL

Most people view messages in their preview panes, which are narrow and small. Try to keep your designs never more than 600 pixels wide, or find a template with fluid-width.

WELL DESIGNED EXAMPLES

MY TOP PICKS FOR SENDING EMAIL CAMPAIGNS

MAIL CHIMP

Templates with marketing integration. Automate emails to send for specific tasks on a site.
Gallery of Examples

CAMPAIGN MONITOR

Resources avaialable to understand email marketing, WYSIWYG, Responsive Templates.
Gallery of Examples

CONSTANT CONTACT

Responsive templates, WYSIWYG Style, Social Integration
Gallery of Examples

What Triggers Spam Filters

Keep These Things In Mind to Avoid Getting Into Trouble

CAMPAIGN METADATA

Spam filters want you to know who you’re sending your email to.

Use merge tags to personalize the To: field on the Setup step of the Campaign Builder found in most email campaign clients like MailChimp. Anonymous domain emails launching campaigns (gmail, etc.) are more likely to be flagged as spam. However, custom domains often have their own reputation.

Do not launch a campaign from a brand new email domain until it has an established SEO reputation/ do not use personal/random one off email accounts to launch campaigns.

CONTENT & FORMAT

Make sure your content is clean.

Some servers/private domains have more aggressive spam filters and your content could get flagged. Your subscribers should have opted-in to your mailing list and be familiar with your brand.

The design of your email campaign should match content found on your social profiles and website.

SLOPPY CODE

Sloppy code, extra tags, and code pulled from Word, PDFS, or other rich text formats can trigger spam filters.

SKETCHY IP ADDRESS

Some spam filters will flag your campaigns if anyone with the same IP address has sent spam.