background preloader

E-Mail Design

Facebook Twitter

AvoidingFpsForSenders - Spamassassin Wiki. Sections found below: General Guidelines -- These guidelines can be useful if you haven't yet sent out your email(s), and want to keep the scores low (or negative) to avoid false-positive problems. Fixing FPs -- Your email was flagged as a spam -- how to avoid this next time Newsletter Aids -- Your newsletter is confirmed opt-in / double opt-in, never spams, and you want to gain some negative scoring traits. Other Resources -- Where else can you look for guidance? General Guidelines These guidelines can be useful if you haven't yet sent out your email(s), and want to keep the scores low (or negative) to avoid false-positive problems.

Tip: Don't worry too much about specific rules within SpamAssassin. Tip: Be honest in your headers. Spammers need to try to fake out filters by hiding their source and destination; if you try to hide your source and destination you'll look like spam too. Tip: Use a domain name which is identified by a verifiable IP address. Fixing False Positives. Applying fluid layouts to HTML email design. Following our recent post in Smashing Magazine, we received a couple of questions in regards to designing fluid layouts for email. Hardcore CSS trivia aside, the big questions came down to: ‘Can I use a fluid layout to adapt my design to fit in any-sized email client?’

, and perhaps more importantly, ‘Does the CSS used to achieve fluid layouts work at all?’ I’ll answer these shortly, but first, I wanted to look at the fundamentals of fluid-width design and its applications in HTML email. CSS nerds are going to love this. Using fluid layouts in email In ‘Web Design 101’, you probably learnt a little something about fixed and fluid (or relative/liquid/flexible/elastic) layouts. While fixed-width layouts are overwhelmingly the popular choice when designing HTML email, the rise of responsive email design for mobile devices has renewed interest in all things fluid.

Sadly, things are never so easy. <table width="90%" style="max-width: 600px;">... As you can see, support is a little shaky. Is there an equivalent of CSS max-width that works in HTML emails. CSS Inliner Tool | MailChimp Labs. Premailer: pre-flight for HTML email. Guide to CSS support in email. Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients.

To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010. Email Testing and Email Preview - Email on Acid. With the recent increase in mobile email open rates, it makes perfect sense that you'd want to design your email with each of the most popular devices in mind. In a recent article: Media Queries in HTML Emails, we explore which devices support media queries. To take it a step further, here's your play by play approach to developing your email for the iPhone, iPad, and Android devices.

First we need to set up your media queries to detect the user agent: Important: I have included some notes in this snippet but be sure to strip out all of the CSS comments to avoid getting blocked by SPAM filters. What happens next depends on your layout. As a general rule, it's better to add "bells and whistles" to your media queries which optimize your layout in mobile devices. However, if you want to get really crazy, there is one more option: Let's say you have a three column layout and you want it to appear as two columns in the iPad and one column in the Android & iPhone. As you may know, Yahoo! Make Your HTML Email 5&frac12; Times More Mobile Friendly. Let's face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here's 5½ improvements you might consider making when you revamp or greenfield your next template.

Note: This article is a guest post by Josh Rubinstein. Why should you care? From the time we rise until the wee hours of the night our smart phones are never far from our opposable thumbs. The Concept of "The One Web" represents a shift in thought towards "democratically" publishing online content to a range of devices. The statistics back this up: no matter what service your company provides, your HTML email needs to be optimized for mobile today – according to Campaign Monitor, the iPhone now accounts for almost 15% of their email subscribers. One HTML template for them All Tip #1: Design all "clicks" to be touch friendly! 7 Tips for Creating Mobile Friendly Email Campaigns | Mobile Marketing Blog | In Transit - Bluetrain Mobile. Optimizing HTML email for mobile using progressive disclosure.

For the most up-to-date techniques, please view our Guide to Responsive Email Design. I know you folks are probably well over me talking about Jakob Nielsen (I agree, his site causes most designers to go into meltdown), however his latest Alertbox article gave us a bit of inspiration for yet another mobile optimization for email. This time it involves the use of a mobile stylesheet to display content only when the email recipient prompts for it.

This allows the email to be quickly navigated without scrolling the length of the message… Plus it’s pretty darn novel to use, too. Short emails rule on mobile devices If you regularly use a mobile device to read email, you’ll know that short messages are far easier to digest than multi-page essays. “We’ve known for 14 years that it’s best to be concise when writing for the Web. Using CSS to show and hide email content Lets say we have an email newsletter with multiple articles. However, we didn’t get away with it so easily. So there you have it.