HTML Email Newsletters: Design, Code & Strategy

Tuesday, November 13, 12

The State of HTML Email Newsletters

Email Client Obstacles & Restrictions

Design for the Environment

Code like it’s 1999


The Email Environment

WHAT DOES IT MEAN?!?



Gmail



outlook



mmmm hotmail


Your mission:

Design with a goal in mind

Be useful

Less is more but still GET ATTENTION

Be trustworthy: make unsubscribing easy!


Sizing it up

Use a fixed width of no more than 550-600px

Average preview pane is 300-500px that’s generous

Design for vertical growth


The Preview Pain...

It’s more like 250 x 250px


The Preview Pain... Challenge!

Introduce yourself, entice further reading, offer a link to site/view email in browser

Left-align your company logo. It gives you credibility.

Try to get your call to action above the scroll.


Retail Emails Do It Right


Images not displayed?!



Link to view in browser



Use alt textSome email clients will apply CSS to alt text.


Plain Textin’Include a plain text version

Blackberry Curve Other Blackberry Nokia Symbian



Stick with live textEsp. for the important stuff

“Add me to your address book”

Send through a reputable provider


Code like it’s 1999

Code for the Lowest Common Denominator

Provide fallbacks - Be degradable

Define EVERYTHING


Woah There


Think of it as a challenge


Email Client Popularity

credit: campaignmonitor.com/resources/will-it-work/email-clients


Top Clients for Grooveshark


Mobile is in the Lead



Mobile is in the Lead



Layout: Use Tables

Use empty cells, nested tablesBe a Dreamweaver

Set width on every cell and Don’t rely on margin or padding.

Avoid extra space in between <td> and <img> tags

No floating!


Reset & Define Everything

Don’t rely on header stylingOnly inline styles on each instance of a tag

Leave nothing to interpretation

Set all margins and padding to zero

The Usuals: font-size, color, text-decoration, font-weight, font-family


Inline Styling Example

<p style=”font-weight:bold; font-size: 18px; font-color: #ff6600; font-family: Helvetica, Arial, Lucida Grande, Verdana, sans-serif; padding:0; margin:0; line-height: 20px;”>Hey y’all!</p>

Hey y’all!


Avoid Shorthand

Good: color: #ff6600 Bad: color: #f60

Good:font-weight: bold;font-size: 12px;font-family: georgia, times, serif;

Bad: font: bold 12px georgia, times, serif;


Images

Avoid spacer images

Include all dimensions and size image to declared size

Avoid PNGs

Provide fallback colors for background images


Display Hack for Hotmail

Windows Live Hotmail adds a few pixels of additional padding below images.

Workaround: img {display: block;}


Degradable Coding

Provide fallback colors for background images

Alt text or live text links for everything!

CSS for Alt tags


Inspirations


Inspirations


Inspirations



Inspirations


Inspirations

When it comes to email, code like it's 1999.

Design like it's 2012.- Some Campaign Monitor Blogger


Just remember this okay?

Design:Keep it simpleTake advantage of what you can do

Code:Be RedundantBe DegradableTest, test, test

Also, just break a few rules.


Resourcesinlinestyler.torchboxapps.com/styler

premailer.dialect.ca


Resourcescampaignmonitor.com

mailchimp.com

htmlemailgallery.com, emaildesigngallery.com: Email design galleries, some tips

emaildesignreview.com: Inspiration, Tips & Insights into the industry

Inline Stylers:inlinestyler.torchboxapps.com/stylerpremailer.dialect.ca


http://htmlemailgallery.com

http://htmlemailgallery.com

Have Fun

with all that!


CreditsEmail Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design-tip-the-250-pixel-box)

Email Design Guidelines from Campaign Monitor (campaignmonitor.com/design-guidelines)

Design: HTML Email: Design Techniques: Part 1 by Think Vitamin with Nick Pettit (membership.thinkvitamin.com/library/design/html-e-mail/design-techniques-part-1)

Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)

20 Email Design Best Practices and Resources for Beginners (net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners)

Make The Best First Impression: 7 Tips for the Most Effective Welcome and Confirmation Emails (emaildesignreview.com/email-design-best-practice/make-the-best-first-impression-7-tips-for-the-most-effective-welcome-and-confirmation-emails-192)

Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-design-mistakes)

Bernie Marger!


http://www.mailchimp.com/articles/stupid-html-email-design-mistakes




HTML Email Newsletters: Design, Code & Strategy

Design

alt text

preview pain

hey yall

lead credit

styler premailer

dont rely

email

design