Category: Email Development


An interview with MJML

Over the recent months, MJML has been gathering some serious attention in the email development world. Developed in 2015 by MailJet, MJML has gone on to receive over 5,000 stars on GitHub, its own Slack community, and numerous updates improving it.

So, what is MJML?

In their own words, “MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.”

With all this in mind, and the rising popularity of this email framework, we decided to have a sit down and interview Nicolas Garnier, the current project lead for MJML.

The Interview

Can you give some background on yourself and your history in Email Development?

While I graduated from a Master in Business & Marketing, I discovered programming as a hobby while studying and instantly got hooked, becoming a self-taught developer. As I wanted to bridge both worlds, I started developer relations in 2013, then joined the email service provider Mailjet after my internship at Microsoft, again in the DevRel team, in 2015. I started working more on the programming and deliverability side, as I was focused on our API, meeting developer communities and advocating developers’ needs internally. Then, after working in the open sourcing process for MJML and seeing how rapidly the interest grew among the email community, I got the opportunity to take over the project in May 2016. I’ve been leading this very exciting project since then!

In two sentences, how would you sell MJML to our readers?

MJML is a layer of abstraction to make responsive email easy. Instead of having to deal with complex hacks and quirks proper to each email client over and over again, we bundled all of our findings as well as the community’s discoveries in a simple language that is responsive by design on every major email clients.

What was the inspiration behind creating MJML?

We initially created MJML at Mailjet for our own needs, and had been using it for more than a year before open sourcing it. As we provide a drag and drop tool to create responsive templates, we needed to be able to programmatically manipulate responsive email HTML from UI blocks. Manipulating this code quickly got tricky as we had to play with conditional comments for Outlook, fallbacks for Gmail and every other hack, hence the idea of a layer of abstraction to make this easier.

What would you say is the primary difference between MJML and something like Foundation by ZURB?

First, we have a completely different approach in terms of technique used: MJML is mobile-first, while FFE is desktop-first. In email clients where you can’t make a distinction between the mobile and desktop versions, like Outlook.com, the default layout will be shown in either case. We consider it better to show a mobile layout on a desktop screen than a desktop layout on a mobile screen.

Our users also really appreciate what they call our “forward-thinking” spirit, as we roll out updates regularly and like to explore new areas with interactive components, such as mj-carousel. MJML is also very lightweight, flexible and you can easily create your own custom components.

Finally, I think the community plays a big role in MJML. Members are very active on the community Slack, helping each other out and working with us to make MJML better everyday thanks to their contributions.

Do you have any new features planned for MJML? If so, can you give us a sneak peek?

Yes, we’re always up to something! One big milestone coming up for us is the launch of MJML 4, which will make the engine up to 35 times faster and ease the component creation process even more.

We also just released v3.3.0, which introduces native support for media queries and the mj-accordion interactive component, among other new features.

What do you think is the next “big thing” in Email Development?

As the vast majority of email geeks, I think interactivity is going to be big. Right now, it is mostly restricted to “visual” interactions, but I believe we’ll be able to provide a better experience serving real business purposes in a near future. To do so, we need to be able to access outside services from emails, which is quite limited at the moment as most email clients don’t allow form submissions. However, things are changing. The most recent example? Requesting and sending money from Gmail.

Another big thing coming is the ultra personalization of emails. I love how Product Hunt customizes their newsletter so everyone gets a different one. When you open it, you know it’s going to be made of content you’re interested in. It’s impressive how relevant they get, blurring the line between marketing and transactional emails.

Are there any email developers who inspire you? If so, why?

Pardon my chauvinism, but I’m a big fan of Rémi Parmentier, aka HTeuMeuLeu, a real email detective! Rémi is a great source of knowledge and actually helped us on several occasions on MJML, especially on interactive components. I love his mindset, how he explores what’s under the hood of those email clients that drive us nuts, and how he shares his findings with the email community to make our life more sane.

I also really like Justin Khoo, aka Freshinbox. His blog is a very rich source of information for email hacks. If you’re encountering a problem you can’t fix, his blog is probably a good place to start!

Last, but not least (even though I could go on forever), Mark Robbins is someone to follow too, both for his experiments with interactivity and his involvement in different conferences, he’s a great speaker!

Do you have a favourite email of 2017 so far?

Burberry had struck last year with their scarf email (offering visual interactivity as well as personalization with your initials printed on the scarf), and they did it again this year with an email taking us through a cool interactive path, where we get to explore the brand’s universe.

Closing words

I’d like to thank Nicolas for taking the time to do an interview with us and sharing his thoughts. If you’d like to try out MJML you can try it live here.

Don’t guess, test!

As always, whenever you’re making changes to your email development process it’s important to ensure you test ever iteration. That’s why we offer a 7 day free trial of our testing suite.


Techniques for Excellent Emails in Outlook.com

Mar 2017 Update:
This article has been updated to address updates. Outlook.com has come on leaps and bounds since this article was originally published. As a result, this article is drastically different to the one first published.

Since Microsoft migrated all of their users from the old Hotmail platform, Outlook.com has grown by leaps and bounds. Despite the facelift, Hotmail and Outlook.com are almost identical under the hood and this tricky client is still giving everybody a run for their money. Check out our list of must-know tips for Outlook.com, below.

  1. Outlook.com adds spaces under images.
  2. Margins are back
  3. Background images don’t repeat.
  4. Outlook.com and links
  5. The “blank email” bug is no more.
  6. Media Queries are out.
  7. You can target Outlook.com

1. Outlook.com adds spaces under images.

Like many webmails, you may find space appearing under your images in Outlook.com. The fix, which is quite common in the email development world, is fairly simple. Simply add the style below.

style="display:block;"

This should completely remove the floating space below images.

2. Margins are back.

When this article was originally posted four years ago, we were of the belief that margins just didn’t work in Outlook.com. We later learned that wasn’t quite true, thanks to a weird bug with Outlook.com you’d need to include a capital letter in your margin declaration.

With the changes Outlook.com have made to their webmail, we’re now happy to report that you can use margins just as you would anywhere else!

3. Background images don’t repeat.

You can use background images in Outlook.com which, in itself, is good news! However, there are a few considerations to use. The following CSS will not be supported:

background-repeat: repeat;

It shouldn’t be a major issue for anyone adding background images. You’ll just need to make sure your images are large enough to cover the area. It’s also worth noting that you’ll need to declare your background images using HTML:

background=""

Rather than CSS:

style="background:();"

As Outlook.com will only support backgrounds declared with HTML, ignoring those done with CSS.

4. Outlook.com and links.

This is currently one of the most common bugs with Outlook.com; the way it handles links. Whenever adding a link in your email, you should ensure the link includes http:// or https:// otherwise Outlook.com will display your link in the email. You’ll also need to ensure your href on a tags aren’t empty, as Outlook.com will strip those but leave the content. Please see the example below.

Click me!

Will be displayed as [example.com]Click me!

Click me!

Will be displayed as Click me!

5. The “blank email” bug is no more.

Previously, Outlook.com would be very selective with what it allowed through aptly named the blank email bug. This bug would cause Outlook.com to show a blank white email, rather than your content. It would do this if you included any HTML, comments, or emojis in your block. Thankfully, since then Outlook.com have sharpened up quite a bit and this is no longer happening!

6. Media Queries are out.

Some bad news, Outlook.com will not respect Media Queries. Although Media Queries are primarily used for handling mobile responsiveness, they have a lot of uses in coding for webmails and desktop clients too. Media Queries can be used for webkit targeting, progressive enhancement, and interactive email, to name just a few.

7. You can target Outlook.com.

Pioneered by the incredible Rémi Parmentier, there is now a method you can specifically target Outlook.com. To put the hack into easy to understand terms, Outlook.com will prefix styles in their own special way. This means that you can include a style that will be ignored by all other email clients, but prefixed and parsed by Outlook.com. See the example below

[owa] .foo { color:red; }

Will become

.rps_a113 .x_foo { color:red; }

While you can see Outlook will respect it, it will be ignored by other clients, Very cool! Thanks again to Remi for such an amazing method.

Noticed anything we’re missing? Let us know in the comments below, and we’ll add it to our list!

Don’t guess, test

The changes to this article are the perfect example of how email clients are ever changing. It’s important constantly test your emails, what worked yesterday might not work today. This is why we’re offering you a 7 day free trial of our email testing.

.pre {margin-left: 20px;}
.anchor_link {text-decoration: none; color: black;}


The Basics of Email Design

Have you ever wondered why can’t you use the same fancy design in your email templates as on your website? Read on below and you’ll learn the basics / limitations of email design.

Short glance into email history

Email was born in the very early days of Internet. Industry players were in a big rush for capturing as many email users as possible. Obviously they were not really interested in cooperating with each other in building their email clients or rendering engines.

history of email clients

This is the reason why email coding is still the trickiest thing you can do with HTML. The email clients we use today have very different email rendering engines in the background, and standardization is very slow.

600 px email width – myth or reality?

Due to smaller screen sizes back in the early days of HTML emails 600 px became the most used email width.

screen resolution statistics from 1999 to 2011

Image source: nngroup.com

But do you still need to use 600 px email width these days?

Although screen sizes increased a lot since then, there are still couple email clients like Yahoo Mail and Outlooks which might have problems with wide emails.

Most Outlook users use the 3 column view in which most of the screen is covered by the first two columns and less than 50% of the screen remains for email viewing.

Outlook 2013 screenshot

In Yahoo mail users use a similar 3 column view too and on top of that they are displayed banner ads on the right side of the screen, which takes up extra space.

We conducted series of email rendering tests to figure out how different email widths behave in Yahoo and Outlook.

Let’s take a look at the below 750 px wide email template from Econsultancy.com in Yahoo Mail.

econsultancy responsive email template in yahoo mail

You can see that the right side of the email is cut on the most common 1366×768 px resolution. The email would be cut in Outlooks as well on the same screen size.

Based on our tests the maximum email width that can fit into the screen in Outlook and Yahoo is roughly 650 px. So if significant number of your subscribers use these email clients you should stay under 650 px or simply use the most common 600 px width, like industry leaders – Mailchimp, Campaignmonitor, Getresponse, etc. – do.

Stretching the limits of email design

Besides email width there are many other limitations of email design, which you need to accept or just invest the extra work required for a workaround.

Video in email?

Most email clients won’t support embedded video in your email. Only some email clients – like Apple Mail or iOS – support embedded HTML5 video.

If most / or desired segment of your list uses the above mentioned email clients you’re good to go with embedded video otherwise use animated GIFs in your email.

Use animated GIFs instead

With animated GIFs you can “almost” reach the same effect as with a video, so don’t be afraid to use them. They work in most email clients – but won’t play in Outlook 2007-2013 for example, and will only show the first frame of the animation.

For more creative animated GIF examples check out this previous blog post.

Modern fonts?

Designers and marketers are bored with Arial or Times New Roman so they are always looking for ways to improve.

That’s what Mailchimp listened to so they built in some Google Fonts into their email builder.

Couple email clients support the tags, @font-face or @import, to allow you to use any font of your choice. The font needs to be hosted somewhere, such as Google fonts, or imported using the @import tag.

But the majority of email clients won’t support them so always make sure that you have built-in failover for a web-safe font.

web safe fonts

Background images?

Some email clients, particularly Outlook 2007+ and Hotmail, will automatically disable background images in your email campaigns.

Try to avoid background image use and create designs where text and images are well separated.

Image source: Reallygoodemails.com

If you really need to use background images you can use VML (Visual Markup Language) to make them work in Outlooks as well. Regardless always make sure that you have a failover background color too, which will make your email enjoyable even if background images don’t appear.

Do you need to send fancy HTML emails at all?

There are some use cases when very minimal – plain text like – HTML emails will work better than design heavy HTML emails.

For example B2B (cold) emails, on-boarding emails, online course emails are mostly very minimal HTML emails.

If your email is text content heavy and you truly want to focus on the power of words, it’s quite likely that you don’t need a very fancy email design at all.

For example I once asked Joanna Wiebe from Copyhackers, why was she using plain text like emails? She told me that these perform better than fancy design heavy HTML emails.

In most cases you’ll still need to send emails which include a series of images:

  • Your logo – To show off that the given email belongs to your brand.
  • Images of your products / services – Could you imagine a pure text email from Bestbuy? Most people expect to receive image heavy, visually appealing, stylish emails with nice pictures from businesses.
  • Social icons – To promote your other online communication channels to your email subscribers.

Before you start designing your first email template check out what kind of emails do others in your industry send, since you need to stand out of the crowd and find your own voice to be successful in the fierce competition today.

Don’t guess – test!

Email design can be tricky and the limitations can be exactly that – very limiting. That’s why Email on Acid offers a free 7 day trial to all users. Preview how your email will look on different email clients in seconds.


Developing HTML Emails for Gmail: 12 Things you MUST know

Mar 8, 2017 Update:
This article has been updated to reflect the big Gmail update that included support for responsive email.
  1. Gmail has several email clients.
  2. Gmail app for non-google accounts (GANGA) does not support background images.
  3. Gmail clips your message at 102K.
  4. Gmail only supports in the
  5. Gmail removes your entire block if it encounters an error.
  6. Gmail displays preheader text in the subject-line.
  7. Gmail does not support attribute selectors and most pseudo-classes.
  8. Gmail displays an image download icon over large unlinked images.
  9. Gmail does not allow negative CSS margin values.
  10. Gmail automatically converts phone numbers and URLs to links.
  11. Gmail uses the HTML5 DOCTYPE.
  12. Gmail’s DOCTYPE can create extra space under images.

1. Gmail has several email clients.

Although Gmail is most often identified with their Webmail and mobile apps, Gmail has many different versions and incarnation. This includes Gmail’s Inbox client, G Suite for business as well as a particularly problematic version of their Android client thats configured for POP/Imap access (see #2).

Remi Parmentier has published an article on the different Gmail clients.

2. Gmail app for non-google accounts (GANGA) does not support background images.

The Gmail Android app that comes pre-installed with most new Android phones contains a feature to access non-Google accounts using POP and IMAP. Emails accessed through this setup lack the embedded style () support as well as the support for background images.

3. Gmail clips your message at 102K.

If your email exceeds 102K, Gmail will display the first 102K along with a message that reads:

[Message clipped]  View entire message

When the user clicks to view the entire message, your email will be displayed in a new window.

If you are close to 102K, you might save a few bytes by removing any unnecessary spaces, carriage returns or comments. 

We recommend that you avoid embedded images and documents when sending HTML emails.

4. Gmail only supports in the .

Gmail now supports embedded styles (). However embedded styles are only supported in the head of your HTML document. The Gmail Android app does not support at all when rendering emails retrieved through non Google accounts (GANGA).

5. Gmail removes your entire block if it encounters an error.

Gmail is very finicky when it comes to parsing embedded styles. If it encounters even one error, it throws away the entire block. 

Gmail does not like an ‘@’ declaration within an ‘@’ declaration.(see details here). One way to deal with this is to use multiple style blocks and put the styles that are Gmail safe in the top block.

@media only screen and (max-width:320px) {
@viewport { width:320px; }
}

Gmail eliminates your style block if it exceeds 8192 characters.

If your style block exceeds 8192 characters, split it into two parts as Gmail will only remove the latter block that exceeds the treshold (the 8192 character limits is a sum of all your style blocks).

6. Gmail displays preheader text in the subject-line.

Like many modern clients, parts of the text in your body – the preheader – is automatically shown after the subject without the recipient having to open the email message. This text can be a visible part of your email body or it can be specially crafted to only display before the email is opened. This technique is covered in this article.

7. Gmail does not support attribute selectors and most pseudo-classes.

Attribute selectors like the one below allow for a more flexible selection of elements in CSS. Although they are supported in modern email clients such as iOS and Apple Mail, they are not supported by Gmail.

div[class="content"]{ color: red }

Gmail also does not support pseudo-classes like :checked and :active and only supports :hover in their Webmail email client. Therefore interactive email support in Gmail is very limited or non-existent.

8. Gmail displays an image download icon over large unlinked images.

Gmail will overlay an icon that lets recipients download images that are not wrapped with a URL. This can be frustrating to designers who would rather Gmail not mess when their email designs.

The simplest solution is to ensure that your images larger than 300×150 are wrapped with a link, however this article goes into several other options as well.

9. Gmail does not allow negative CSS margin values.

Most webmail clients such as Outlook.com and Yahoo! Mail do not allow negative margin values and Gmail is no exception.

10. Gmail automatically converts phone numbers and URLs to links.

Both the desktop and mobile version(s) of Gmail now insert an anchor link around phone numbers. In the desktop version, the link opens Google’s new voice/chat console which is displayed along the right column of the Gmail interface.

To block this, use an HTML entity in your phone number that Gmail does not recognize such as “­”

­212­-389­-3934 

In the above example we inserted this entity before each dash.

Click here for more examples and fixes.

If you have a URL or email address listed without a link, Gmail will add it for you.  For example name@test.com within this paragraph will get converted to:

<a href=“mailto:name@test.com”name@test.com</a

Here are two possible fixes:

1.) Insert an HTML entity that Gmail does not recognize, like:

&#173;­ 

So change name@test.com to:

name@test­&#173;.com 

Change www.mydomain.com to:

www.mydomain­&#173;.com 

Change http://www.mydomain.com to:

http:&#173;­//www.mydomain­­.com 

2.) Insert an anchor around the URL or email address and format it like the rest of your text.  For example:

<a href=’#’ style=“color:#000; text-decoration:none”test@test.com</a

11. Gmail uses the HTML5 DOCTYPE.

Regardless of the DOCTYPE specified in your email, the email will be rendered using the HTML5 DOCTYPE in Gmail.
This may cause your email to render differently than if you loaded your email in a browser.

12. Gmail’s DOCTYPE can create extra space under images.

Similar to #7, this space is also caused by the DOCTYPE.  Here are a few workarounds (these work in Hotmail and Yahoo! Beta as well):

1.) Add style display:block to the image element

<img src=“test.jpg” style=“display:block”

2.) Add align absbottom in the image element

<img src=“test.jpg” align=“absbottom”

3.) Add align texttop to the image element

<img src=“test.jpg” align=” texttop ”

4.) Add line-height 10px or lower in the containing TD

<td style=“line-height:10px”

5.) Add font-size 6px or lower in the containing TD

<td style=“font-size:6px”

For more workarounds check out this blog article: 12 Fixes for Image Spacing

Got another tip?

Got any more tips and tricks for Gmail? Feel free to share below!

Make sure your email renders nicely not just with Gmail but with all the other major email clients as well. Get started for free with our 7 day trial of Email on Acid.


Media Queries Demystified: CSS Min-Width and Max-Width

Now that Gmail is supporting media queries in some clients, we have seen a resurgence in interest about how to use them. Read on to learn about media queries in HTML email.

What are media queries?

A media query consists of an optional media type (all, handheld, print, TV and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation. Media queries are part of CSS3, and enable developers to customize their content for different presentations of their content.

At a basic level, media queries enable an email developer to create responsive email by detecting the width of the display. For this purpose, the most commonly used query is max-width. At any width that is less than the max-width specified, all of the CSS within the query will take effect.

Media queries can also be used to target certain resolutions or even specific email clients. Media queries can be used instead of or in addition to fluid hybrid design.

How min and max width queries work

How media queries function can be a bit confusing. Let’s take a look at the queries which are commonly used in email.

Max-Width

Here is an example of a max-width query.

@media only screen and (max-width: 600px)  {...}

What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S, with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.

Min-Width

Here is an example of a min-width query.

@media only screen and (min-width: 600px)  {...}

What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S, with a screen width of 320px, the media query will not trigger and the styles contained in { … } will not take effect.

Combining Min-Width and Max-Width

These queries can be used together to target a specific range of screen sizes.

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

Breakpoints

Most media queries are set to trigger at certain screen widths or breakpoints. Exactly what these should be set to is a matter of some debate amongst email developers.

iPhones and iPads provide us with a few easy breakpoints to start from. Coding styles for these specific clients will make sure our emails look great on these screens. Androids, on the other hand, vary widely in screen size because there are so many different manufacturers and devices. I recommend creating two to four breakpoints, based on popular Apple devices, which will cover most devices.

  • Breakpoint 1 (iPhone 5S): 320px
  • Breakpoint 2 (iPhone 6+): 414px
  • Breakpoint 3 (iPad Mini): 703px
  • Breakpoint 4 (iPad Air): 768px

Breakpoints 3 and 4 are optional, as most emails will look fine showing the desktop version on an iPad or large tablet. You could even get away with using just breakpoint 2, if you code your container tables to expand to 100% width (and not a set width, which may or may not match the device well).

Taking advantage of precedence

Remember, CSS rules that appear later in the embedded styles override earlier rules if both have the same specificity. This means that you can set rules for tablets by putting the Breakpoint 4 media query first, then set styles for mobile devices with a Breakpoint 2 media query. Because the Breakpoint 2 styles come after the Breakpoint 4 styles, your mobile styles will override your tablet styles when the breakpoint 2 query is triggered. This means that you don’t have to set min-width for any of your media queries, as long as they are arranged in the correct order.

Here is an example order.

  • Desktop styles (not in a media query)
  • Tablet Styles (max-width: 768px)
  • Mobile Styles (max-width: 414px)

Coding for media queries

When coding an email to be responsive using media queries, a common technique is to create tables with align = “left” and a special class to target inside the media queries. For example, a two-column section might look like this.

Each of the tables with 49% width can fit side by side when on “desktop” view. 49% is used instead of 50% because Outlook can be very picky about what fits side-by-side and what doesn’t. You can make 50% width fit if you set all of your styles just right (no border, padding, etc). You can make a 3 Column section using similar code, but use three tables set to 32% width instead.

When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones, so that they fill the whole screen. This can be accomplished for most phones with a single media query.

@media only screen and (max-width: 414px) {
  .deviceWidth {width:280px!important; padding:0;}	
  .center {text-align: center!important;}	 
    }

You can continue to add media queries with special styles to cover as many different screen sizes as you’d like. You should also add code to your media queries to optimize font-size and line-height for each screen size, improving readability for your recipients.

If you’d like to start working with a template like this, grab our “Emailology” template from the Resources section. You can get a free account to gain access to all of our resources (like templates, white papers, webinars and client tips and tricks).

Other Media Queries

You can do a few other interesting things with media queries. The below uses are most relevant to email, but check out MDN’s page for even more media query techniques.

Orientation

You can use the following media query to target device orientation. Unfortunately, this query doesn’t work well in iOS Mail. In most versions, the landscape media query will always trigger regardless of orientation.

@media screen and (orientation: landscape) { ...  }

Targeting Yahoo! Mail

You can use this simple query to write styles that will trigger only in Yahoo! Mail. This can be used to address layout or rendering issues that you see only in Yahoo! Mail, or to include messages intended only for Yahoo! users.

@media (yahoo) { ...  }

Pixel-density

This media query can be used to target only devices that have a certain pixel density. Combined with webkit, this can effectively let the email developer target only iOS devices. This can be useful when adding interactive code that is known only to work in iOS Mail.

@media screen and (-webkit-min-device-pixel-ratio: 2) { ...  }

Media queries for print

By setting specific styles for print, you can ensure your email will be easy to print and look great. This is especially important for coupons or tickets. You can hide useless elements, like links and buttons, and display only the part of the email that is important to print.

@media print { ...  }

Media query support chart

Media queries have fairly wide support now that Gmail has enabled classes, IDs and embedded styles. Check out the support chart below.

Media Query Support

Environment Email Client Media Queries Supported?
Webmail AOL
Webmail Gmail
Webmail Google Apps
Webmail Yahoo! Mail
Webmail Outlook.com
Webmail Office 365
Desktop Apple Mail
Desktop Lotus Notes
Desktop Outlook 2000-2016
Desktop Outlook 2011 (Mac)
Desktop Thunderbird
Mobile iOS Mail
Mobile Gmail App (Android)
Mobile Gmail App (iOS)
Webmail (Regional) BOL
Webmail (Regional) Comcast
Webmail (Regional) Free.fr
Webmail (Regional) Freenet.de
Webmail (Regional) GMX
Webmail (Regional) La Poste
Webmail (Regional) Libero
Webmail (Regional) Mail.ru
Webmail (Regional) Nate
Webmail (Regional) Naver
Webmail (Regional) Orange.fr
Webmail (Regional) QQ
Webmail (Regional) SFR.fr
Webmail (Regional) T-Online.de
Webmail (Regional) Telstra
Webmail (Regional) Terra
Webmail (Regional) Web.de
Webmail (Regional) Yandex.ru

What do you do with media queries?

Let us know your favorite uses for media queries in the comments below!

Don’t guess, test

Media queries can be confusing and take trial and error to perfect. That’s why we offer you 7 days free with Email on Acid, so you can ensure your media queries, and your emails, are perfect before you hit send.


What is DKIM? Everything You Need to Know About Digital Signatures

DomainKeys Identified Mail (DKIM) allows senders to associate a domain name with an email message, thus vouching for its authenticity.

This is done by “signing” the email with a digital signature, a field that is added to the message’s header. A “signature” is generated by the sending mail transfer agent (MTA) using an algorithm, applied to the content of the signed fields, which creates a unique string of characters, a “hash value.” When the signature is generated, the public key used to generate it is stored at the listed domain. After recieving the email, the recipient MTA can verify the DKIM signature by recovering the signer’s public key through DNS. It then uses that key to decrypt the hash value in the email’s header and simultaneously recalculate the hash value for the mail message it recieved. If these two match, then the email has not been altered. This gives users some security knowing that the email did actually originate from the listed domain, and that it has not been modified since it was sent.

Does DKIM filter email?

No, it doesn’t. It does aid filters that have been set up by the recieving domain because of the information it provides. For instance, if the email is from a trusted domain and is successfully verified through DKIM, the email may have its spam score reduced. If the email’s DKIM signature cannot be verified (because the email was faked or for another reason), the email might be marked as spam and either be quarantined or have a spam tag added to the subject line (to warn recipients that the email is suspect). Gmail, for instance, does not deliver emails from eBay.com or Paypal.com if the DKIM signature cannot be successfully verified because of the high liklihood that the email is a phishing attack.

How can I test my DKIM?

As part of our spam testing suite, we offer DKIM testing.

You can also test DKIM by sending an email to a Gmail account. Open the email in the Gmail web app, click on the down arrow next to the “Reply” button (top right of email), and select “show original.” In the original, if you see “signed-by: your domain name” then your DKIM signature is good.

What result do I want from DKIM?

For the most part, DKIM is binary. Either it is working and your signature can be verified (see “pass” below) or there is some kind of problem. If your signature is working, there’s no need to read any further. If you’re experiencing errors, the following section may help you diagnose the problem.

How can I read the DKIM header?

Here is an example DKIM signature (recorded as an RFC2822 header field) for the signed message:

DKIM-Signature a=rsa-sha1; q=dns;
d=example.com;
i=user@eng.example.com;
s=jun2005.eng; c=relaxed/simple;
t=1117574938; x=1118006938;
h=from:to:subject:date;
b=dzdVyOfAKCdLXdJOc9G2q8LoXSlEniSb
av+yuU4zGeeruD00lszZVoG4ZHRNiYzR

Let’s take this piece by piece to see what it means. Each “tag” is associated with a value.

  • b = the actual digital signature of the contents (headers and body) of the mail message
  • bh = the body hash
  • d = the signing domain
  • s = the selector
  • v = the version
  • a = the signing algorithm
  • c = the canonicalization algorithm(s) for header and body
  • q = the default query method
  • l = the length of the canonicalized part of the body that has been signed
  • t = the signature timestamp
  • x = the expire time
  • h = the list of signed header fields, repeated for fields that occur multiple times

We can see from this email that:

  • The digital signature is dzdVyOfAKCdLXdJOc9G2q8LoXSlEniSbav+yuU4zGeeruD00lszZVoG4ZHRNiYzR.
    This signature is matched with the one stored at the sender’s domain.
  • The body hash is not listed.
  • The signing domain is example.com.
    This is the domain that sent (and signed) the message.
  • The selector is jun2005.eng.
  • The version is not listed.
  • The signing algorithm is rsa-sha1.
    This is the algorith used to generate the signature.
  • The canonicalization algorithm(s) for header and body are relaxed/simple.
  • The default query method is DNS.
    This is the method used to look up the key on the signing domain.
  • The length of the canonicalized part of the body that has been signed is not listed.
    The signing domain can generate a key based on the entire body or only some portion of it. That portion would be listed here.
  • The signature timestamp is 1117574938.
    This is when it was signed.
  • The expire time is 1118006938.
    Because an already signed email can be reused to “fake” the signature, signatures are set to expire.
  • The list of signed header fields includes from:to:subject:date.
    This is the list of fields that have been “signed” to verify that they have not been modified.

What do the results of my EOA DKIM test mean?

The possible results for your DKIM test are:

  • pass = ‘The message was signed, the signature or signatures were acceptable, and the signature(s) passed verification tests.’
    This is the result you want to see. Everything worked perfectly.
  • fail = ‘The message was signed and the signature or signatures were acceptable, but they failed the verification test(s).’
    This means that the message had a signature, and the signature was formed correctly, but didn’t match the signature of the sending domain. This probably means the message was modified somewhere along the way.
  • none = ‘The message was not signed’
    This means that the message had no DKIM signature. This is not the same as failing.
  • policy = ‘The message was signed but the signature or signatures were not acceptable.’
    DKIM can be configured to be more or less stringent in what is an acceptable match. A “policy” error means that the message was signed and correctly formed, but didn’t meet the policy requirements of the recipient.
  • neutral = ‘The message was signed but the signature or signatures contained syntax errors or were not otherwise able to be processed.’
    The message was signed, but it was not formed correctly. This is possibly a configuration error on the sending domain side.
  • temperror = ‘The message could not be verified due to some error that is likely transient in nature, such as a temporary inability to retrieve a public key. A later attempt may produce a final result.’
    This error indicates that there was a short-term problem verifying the signature. Feel free to try again. Repeated problems with this may indicate a DNS or lookup failure on the sending domain.
  • permerror = ‘The message could not be verified due to some error that is unrecoverable, such as a required header field being absent. A later attempt is unlikely to produce a final result.’
    The signature (or some part of it) was missing from the recieved message, which caused a failure. This indicates that either the header was formed incorrectly or it was modified after being sent.

“If you’re havin’ DKIM problems I feel bad for you, son…”

Personally, I have just shy of 100 problems, but none of them are DKIM related. Are YOU having DKIM problems? Let us know in the comments below (or jump on our forum) and we’ll try to help!

Don’t guess, test

Just like making any other changes to your email, making changes to your DKIM signature or modifying how you send emails at all can have an adverse effect on your email rendering. That’s why we offer you 7 days free with Email on Acid, start testing today!


The Importance of Content-Type HTML Character Encoding in Email

There have been many questions raised by our members on how email clients set the Content-Type within their HTML emails. As you may already know, the Content-Type plays a major role in the way an email will be displayed, especially with respect to special characters in non-Latin languages or when copying from a text editor like Microsoft Word.

In summary, all email clients ignore the Content-Type defined within your meta tag. Instead, they read it from the Content-Type value that is in the header of your email. The character type value within the header is automatically set by the server sending your email. This value can be changed but you would need direct access to the email server. The safest solution is to convert all of your special characters to HTML entities and we have created a free online tool to help assist you in that process.

What is Content-Type?

A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1.

To illustrate, let’s take the following code:

UTF-8 Characters: ö ü ä


UTF-8 Chinese: 激 光 這


HTML Entity Characters: 漢 字

Here’s how it renders using each character set:

As you can see above, the Chinese symbols are not represented in the ISO-8859-1 character set. This is because ISO-8859-1 only includes Latin based language characters. The result is a bunch of jumbled text, which is the ISO-8859-1 interpretation of the symbols.

Where does this all fit into HTML emails?

In website development, we can tell the web browser what character set to use in a meta tag like this:

Emails are displayed in clients using the same premise. It will display the email based on what Content-Type has been set. However, email clients read the Content-Type value that is set in the email header and they completely ignore the META tag that is within the HTML.

How does the email header Content-Type get set?

The header content is set by the server sending the email and contains information like To, From, Date, Time, etc. Some of which is displayed at the top of each email when viewing it in an email client.

Here is a snippet of an email header (notice the Content-Type value):

Date: Wed, 15 Dec 2010 12:45:55 -0700
To: test@test.com
From: testfrom@test.com
Subject: UTF-8
Message-ID: 
X-Priority: 3
X-Mailer: EOAMailer 5.0.0
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
Content-Type: text/html; charset="UTF-8"

Email client test results

I sent the above code example to all the email clients that we support. Pretty much every client renders text based on the Content-Type value set in the email header. Gmail is the only client that automatically converts your text to UTF-8, no matter what the header Content-Type is set to.

Here are the test results:

Clients Content-Type
AOL
Hotmail
Outlook Express
Outlook 2003, 2007 and 2010
Lotus Notes 6.5, 7, 8 and 8.5
Live Mail
Windows Mail
Entourage 04 and 08
Yahoo Classic, Current, and Beta
Thunderbird 2 and 3
iPad
iPhone Mail
Android Mail
Each take the Content-Type from the header of your email
Gmail
Android Gmail
iPhone Gmail
iPad Gmail
Each convert the Content-Type to UTF-8

One thing that I found very suprising is the fact that the web-based clients convert your text to the Content-Type character set prior to displaying it in the browser. I was able to check this by viewing what Content-Type they were setting in their META tags. As it turns out most of them are using UTF-8.

The Solution

Now you might be saying to yourself, great just when I thought designing emails wasn’t complicated enough. It does in-fact add another layer of complexity but there are a couple fairly easy solutions.

Option 1:
Contact your email service provider and ask them what Content-Type they set in the header when sending the emails. Once you know the Content-Type use that value in your HTML Meta tag when designing the email.

Option 2:
Convert all special characters to their HTML entities and you won’t have to worry about the header Content-Type. For example, the following character “” has an HTML entity value of ““. To help assist you in the conversion we have created a free online tool that will convert all of your special characters for you! Just use this conversion tool before you send your email.

In Conclusion

It is always important to check your character sets using both IE and Firefox, especially if you are using non-Latin characters or copy/pasting content from a text editor like Microsoft Word.

At this time, when you submit an Acid Test, our servers are configured to send your email using the UTF-8 Content-Type to each of our supported email clients.

Just like making any other changes to your email, changing your content-type or the way you encode HTML characters can have a big knock-on effect throughout the rest of the email. Make sure you’re steering clear of any issues by testing for free with our 7 day trial of Email on Acid.


A How-To Guide on Embedding HTML5 Video in Email

Feb, 22, 2017 Update:
This article has been updated to address the changes in email clients since it was written in 2013.

This article will teach you how to embed HTML5 video so that it can be played in email clients that support video in email, specifically Apple Mail, iOS 10 and the Samsung email client. It will also cover various fallback techniques so that alternate content is displayed in the clients that cannot play video.

Click here to see the full code

Email Client Support

As you can see from the table below, support for HTML5 video is still limited but the clients that do support it represent over half of the market share. Email applications, like the native iOS client, Apple Mail and the Samsung email client will allow recipients to play your video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.

Client Plays Video     Shows Fallback
Apple Mail  
Lotus Notes  
Outlook 2003-2016  
Thunderbird  
iOS 10, Native Client  
iOS 9, Native Client  
iOS Gmail  
iOS Yahoo! Mail  
iOS Outlook  
Samsung Galaxy, Native Client  
Android 4, Native Client  
Android Gmail  
Android Yahoo! Mail  
AOL Mail  
Gmail  
Yahoo! Mail  
Outlook.com  

Basic Video Code

The following is the basic video code. Clients that will be able to display and play video will use the poster attribute as the cover image for the video and the file referenced by the source tag as the video. Clients that don’t support video will render the image within the video tag that is wrapped by a link.


Email Specific Fallbacks

However, as is the case with email, many email clients don’t play ball. Certain clients such as iOS 8 and Android 4 will render the video cover but the video remains unplayable, potentially causing confusion to the recipient. Thus, the safe bet is to display a separate fallback section by default and then only display the video section in clients that are able to play video like the code below.


Video Content: MP4

Fallback Content

Since Yahoo! Mail strips display:none inline, you also need to add this to the :


 .video-wrapper {display:none;}

Displaying Video in Clients That Support Video

Apple Mail

For Apple Mail, we can use the -webkit-min-device-pixel-ratio media query to enable video. However we also need to prevent the video from displaying in iOS 8 clients that match that media query but does not play video. The fix is to add a min-device-width query that is wider than the iPad’s email client device width. Interestingly, this media query will activate on AOL Mail (that does not support video) for webkit browsers such as Chrome and Safari, but luckily, AOL Mail will simply display the fallback image and link that is embedded within the video tag.

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
{
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
}

iOS 10

Video was supported in the iOS 7 email client but was removed in iOS 8 and 9. Apple then added video support back in iOS 10. Unfortunately, in iOS 8 and 9, the email client would still render the video with a play button but not play the video! We need a way to only show the video content in iOS 10. Our friend Remi Parmentier discovered a clever method to only display video in IOS 10 using the @supports declaration. It targets certain CSS that iOS 10 supports but not iOS 9. Read here for his explanation.

However, Yahoo! Mail does not like the @supports declaration and will expose any CSS within the block in the Webmail. (Yahoo! Mail used to break media queries as well but that has been fixed – see this article for background). To ensure the CSS within the @support block are not activated in Yahoo! Mail, I use the “starts with” (^=) attribute selector that Yahoo! Mail strips (it allows regular attribute selectors).

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
  div[class^=video-wrapper] { display:block!important; }
  div[class^=video-fallback] { display:none!important; }
}

Samsung Email Client

Although not frequently discussed, the Samsung email client that comes pre-installed in the Galaxy line of phones supports video. If you want to display video within the client you can use the following CSS:

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

Full Code




Video in Email Test

 .video-wrapper {display:none;}
 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
 {
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
 }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
  }
  #MessageViewBody .video-wrapper { display:block!important; }
  #MessageViewBody .video-fallback { display:none!important; }



Video in Email Test

Video Content

Fallback Content

Video Formats

HTML5 supports three main video formats: MP4, OGG and WebM. Due to intellectual property issues, Apple decided to only support MP4 in their browsers and email clients, hence that’s the only format I’d recommend using for video in email.

You should also ensure that your server is configured to output the correct MIME type so that the email client is able to detect the proper video format when retrieving the video. Check out this article for more details. If you are using the Apache Web server, ensure that this entry is in your .htaccess file.

AddType video/mp4 .mp4 .m4v

Should You Use Video in Email?

Although embedding video in email is not difficult, it is not exactly trivial either. Some email marketers advocate for just displaying a fake play button on an image and having that open the browser to a landing page that hosts the video. Others prefer displaying an animated gif converted from a video since animated gifs are supported in all email clients except for Microsoft Outlook.

Personally I think it depends on your audience and your brand. Having a video play right in the email client can add a wow factor to your newsletters and if you use video a lot, the experience of having the video play without taking the user outside to a browser may make your recipients more likely to play the video. Either way, its your call!

If you’ve decided to use video in your email, make sure that you verify that your email will render nicely across the most popular email clients. Email on Acid can help you test your email across these clients in seconds.

Big Thanks to Big Buck Bunny!

This video was used for testing coutesy of Big Buck Bunny.


What are you going to do with HTML5 video in your next email? Let us know in the comments below.


600+ Free Email Templates from Email on Acid

A good email template can make or break your marketing, but designing and building a template from scratch can be a very time-intensive process. Instead of creating a template from the ground up, let us save you hours of precious time with these 10 places to grab your very own email template. Simply download a template and customize it to fit your specific needs. Oh and did we mention… They’re free!

The following sites offer free email templates or template builders to get your next email campaign up and running in no time. Take a look at what’s out there for free and grab a new template to make your next campaign capture more clicks than ever before!

1. Email on Acid’s Responsive Template Library

Cost: Free!
Not to pat our own backs too hard or anything, but our templates have gotten a lot of attention. Over the years, we’ve been building up a bulletproof selection of templates created both by us, and some excellent email designers and developers. All of these templates are free to use with any Email on Acid account.

2. ZURB

Cost: Free!
We can’t write about free templates without mentioning ZURB’s awesome tool. They offer five different templates, all of which are responsive and pretty well made. The best part is, it’s totally free. Go to their site for yourself, or check out one of the templates in your browser, below.

3. Campaign Monitor

Cost: Free!
Campaign Monitor provides excellent email services from start to finish, including a super cool template builder. You can use it for free, no account required, and it does a bang up job of making templates for your needs. Once you’re done creating, you can import it straight into your Campaign Monitor account or download it for free and go from there. The folks at Campaign Monitor also run an excellent blog with lots of helpful tips, go check it out!

4. ActiveCampaign

Cost: Free (with account)
ActiveCampaign is a full service ESP that provides sending services, marketing automation and email templates, along with their online email designer tool. Check out some previews of the templates they offer here, or sign up for a free account and log in to see for yourself. To find their templates once logged in, click on the Campaigns tab, then on “Email Templates” on the right side of the screen. Their library includes 52 templates that range from very simple (single column, white background) to more complex.

5. 99 Designs

Cost: Free!
99 Designs offers this free template pack on their blog, which includes 3 templates in 4 colors. These include a newsletter, a promotional email and a notifications template. This trio would make a great starter package for a business that’s trying to establish a consistent look. If you want something a little more custom, consider taking advantage of 99 Designs’ crowd sourced design contests. You should have no problem finding an amazing design at a good price.

6. Free Email Templates.com

Cost: Free!
This site offers 70+ of email templates for free, so it shouldn’t be hard to find the right one for you. Use the categories on the right side of the page to browse for the perfect free template. All you have to do is download and customize their readymade email templates for your business!

7. Benchmark Email

Cost: Free (as part of service)
Benchmark Email offers some free templates with its service, which you can try free for 30 days. Benchmark focuses on promoting events through email, and they have a huge library of over 400 templates to support this. They categorize their templates by industry, but it only takes a few copy and image changes to convert a template for your specific niche.

8. GraphicMail

Cost: Free (as part of service)
GraphicMail is an ESP that hosts a sizeable library of email templates. You’ll have to sign up for an account to get access to their templates, but don’t worry: it’s free. For 15 days you’ll have access to their support team and all their cool features, but after that you’ll have to pony up to keep getting the good stuff. 15 days should be plenty of time to check out their templates and see if they’ve got something to offer for you and your business.

9. Cerberus

Cost: Free
If you’re looking for a template which is a little less designed but has a solid foundation, look no further than Cerberus. Created by Ted Goas, it features a series of responsive, hybrid, and fluid templates that are not only solidly built but boast good accessibility too.

Want to customize these templates to better reflect your business? Personalize these templates in a flash with fresh copy and images to ensure your brand is resonating through the design.  In no time you can turn your next email campaign into a lean, mean prospect converting machine!

But wait, you still need to test!

After you download your new template, make sure to continue to test as you tinker with and customize your new template. A simple tweak in the HTML could cause rendering issues across multiple devices.

Email on Acid even offers a free 7-day trial, which includes unlimited email testing in the most popular inboxes so you can thoroughly test as you integrate your new template into your emailing efforts.


Free Responsive Email Template

With mobile here to stay and so many of our users inquiring about best practices for developing responsive emails, we figured it’s a great time to offer up a series of free email templates to get you up and running as fast as possible.

There are several approaches to responsive email designs. This particular template offers 3 different “layouts” which trigger based on the width of the screen. By default, it supports 1-3 columns and as you trigger each media query conditional statement, it converts to a one a column layout for easy reading on mobile devices.

If you already have an account with us or are a community member, you already have access to this template in our resources section! Simply log in and navigate to the resource center in the left navigation bar. If at any point you have issues with the download, contact our support team!

Template Details

When developing this template, our first order of business was to research the most common dimensions that are used in popular devices today. With that study, along with our own media query test we’ve identified the most common device widths to target.

The breakpoints we’ve selected for this template are as follows:

  1. A width less than 480px for the iPhone and smaller smart phones.
  2. A width between 481px and 640px for medium sized Android devices
  3. A default dimension of 580px for tablets, web, and desktop email clients

What’s interesting about the above dimensions is that the breakpoint for medium sized handheld devices is actually greater than the real-estate your email will get in most web and desktop email clients. For that reason, the default width for our template is set to 580px. This dimension is less than the media query dimensions that we’ve used for medium sized mobile devices.

You can mix and match each section of this layout and we tried to make it super generic because your needs will likely change over time.

This template has been tested across most major email clients.

So how’d we do it?

1.) Media Queries

Here’s the entire style block:


   .ReadMsgBody {width: 100%; background-color: #ffffff;}
   .ExternalClass {width: 100%; background-color: #ffffff;}
   body	 {width: 100%; background-color: #ffffff; margin:0; padding:0;}
   table {border-collapse: collapse;}
 
    @media only screen and (max-width: 640px)  {
      body[yahoo] .deviceWidth {width:440px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	  	
    }
 
   @media only screen and (max-width: 479px) {
      body[yahoo] .deviceWidth {width:280px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	 
   }
 

We then used the ‘deviceWidth’ class on all tables and images throughout. This resets the width for each element based on the width of the mobile device. You could add more media queries if you want – feel free check out our latest research for more breakpoint ideas.

2.) Floating Elements

The next challenge was creating floating elements that naturally stack when there’s not enough room for them to float. Floating elements for email is rather tricky because several email clients do not support the ‘float’ property. Instead, we used the ‘align’ attribute within table elements.

For example:

Simple enough right? Well yes and no. Whenever you ‘left’ or ‘right’ align tables in Outlook 2007, 2010, and 2013, you end up with extra table padding. So if you are trying to accomplish a pixel perfect layout, you might want to check out this Outlook padding work-around for getting aligned tables to match up perfectly. In the case of this template, we used percentage based widths for each floating table and in some instances we had to rely on the ‘

‘ fix as defined in that blog post.

Conclusion

Obviously you will need to customize this template for your needs.  Just remember, you can keep it short and sweet for your mobile readers by hiding some elements within your layout using media queries. Both the Android and the iOS support the display:none property.

Hopefully this will save you some time and stress when creating your first responsive email!  Stay tuned for more creative solutions from Email on Acid.  Cheers and happy testing!

We’ve tested this template thoroughly and we trust it, that being said when it comes time for you to update it with your content, you’ll need to test it again. Any number of little changes can have massive consequences in the world of email. That’s why we’re offering you a 7 day free trial to test in Email on Acid.

Comments on this Blog

Comments on this blog are now closed, but please feel free to contact us with questions about this template, or post questions in the forum.

Notice: This blog post is intended for educational purposes. The materials used, including but not limited to, artwork, research, coding techniques, and the overall layout are to be considered ‘derivative’ and in no way do we intend to infringe on any unknown copyrights. We give our utmost respect to the millions of designers and developers who continuously inspire us to learn and create.

If you’d like to obtain rights to use any of the fonts that where included in the artowrk of our template, they are availible for purchase online: Hand Gothic, Thirsty Rough, Thirsty Script, Veneer.

  • Free Download

Enter your email here.

We’ll reply back with a link to download the template.

Email Address: