Month: March 2017


6 Rules to Follow When A/B Testing Your Email

Every audience is different, period. One incentive to your audience could fall flat, while another soars. That is why it’s critical to test, test and test some more by split testing your content, incentives, time of send and more. The options are exponential on what you can test, but that doesn’t mean you should!

In this blog, we’re going to break down what guidelines you need in place to ensure you’re A/B test yields results that will actually improve your marketing strategy in the long run. To run a test that will yield repeatable, statistically significant results, you need to adapt a systematic approach. Before we breakdown 6 guardrails to put in place when running split tests, let’s breakdown what an A/B test in email actually is!

What is an A/B test?

A/B testing is a simple way to test your current design (A) against changes to your page/email/ad (B) and determine which one produces the most positive results. This technique can be used to make sense of metrics such as sign-ups, downloads, purchases, and so on, to identify which version will increase or maximize an outcome of interest.

A simple tweak in your email campaign or website could significantly increase your bottom line; that’s why testing MUST be your #1 priority. Without further ado, lets look at A/B guidelines to follow when running a test to ensure you are getting the most marketing bang for your buck.

Know Your Baseline Results

You won’t know if the two versions of you’re A/B test yielded positive results if you don’t have a good grasp on your baseline metrics. A baseline result means you already know what your average open, click-through and conversion rates are. For example, If you ran an A/B test and your conversion rate for A was 1.3% and your conversion rate for B was 3.23%, but your baseline conversion rate is 4.5%, the test had a winner, yes, but what you tested will not positively impact your bottom line in the long run. You want to test option A and B against each other, but you also want to know that whichever one does better in the test is also doing better than your current results.

Test ONLY One Element at a Time

This is the foundation for yielding successful (and true) results. For example, don’t test two different layouts and two different CTAs at once. This will mess up your control condition because you’ll have nothing to compare your changes to. If you were to test multiple elements against each other in an A/B test, you wouldn’t be able to identify the element that resulted in more opens, clicks, conversions, etc.

Test Your Elements at the Same Time

When testing, the two variations of the test must be run simultaneously. When each test is run can drastically impact and skew your results. For example, according to MailChimp, the most optimal days to send email campaigns are between Tuesday and Friday, so if one element was tested on Tuesday and one on Friday, it could not be determined if the results were statistically significant. That is because you can’t factor in any variables that might have changed between Tuesday and Friday.

Measure the Data that Matters

Like I mentioned previously, there are many different things you can test like email layout, images, subject lines, CTA, but remember that each of those things is likely to have an effect on different parts of the conversion process.

For example, if you are deciding that you are going to test two different CTA buttons, it wouldn’t make any sense to see which version had the most opens. Instead, if you are testing two buttons, the data you will want to hone in on is CTR. You would, however, look to which email got a better open rate if you were testing two different subject lines.

Test Your Whole List, Not Just a Sub-Set

The larger your test sample, the more accurate, repeatable and reliable your results will be! If you are only using a small sub-set of your list, the results may not produce statistically significant results.

Another consideration to keep in mind is to randomly split test. If you identify two groups that have different characteristics/demographics, you cannot guarantee your results aren’t skewed based on the make-up of these groups. Handpicking groups can negatively impact your results. You want to gather empirical data, not biased data, to find out which version of your a/B test lead to better conversions.

Ensure Your Results Are Statistically Significant

If you cannot find the results to be statistically significant, then you’ve got a failed A/B test. It’s shockingly easy to get results that are due to random chance. ”Statistical significance” coincides with another A/B testing term called “confidence level.” The confidence level is the probability that the measured conversion rate differs from the control page conversion rate for reasons other than chance alone.

You should have a confidence level of at least 90-95% before you can determine that your results are statistically significant. For example, if you had a very low response to an email campaign sent out the day before Christmas, you should consider that the holiday might have negatively impacted your open rates. Numbers are important, but you must also be able to analyze the numbers logically to gain a conclusive summary of the results.  Quality trumps quantity any day of the week in A/B testing. If in doubt, run the test again to validate the results!

If you need some help crunching the numbers, grab this A/B calculator to be confident that the changes you made have really improved your conversions.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect A/B test for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!


Yahoo Mail Android App Limits Styles to Email Body

Ever since Gmail started supporting media queries, there has been a resurgence of interest in responsive email design. If you’re using media queries in your design you should know that the Android version of Yahoo! Mail does not support the tag in the head of an email.

Android and iOS Versions of the Yahoo! Mail app.

Although the Android and iOS versions of the Yahoo! Mail app look similar, there is a key difference between them and that is the iOS version supports in both the head as well as the body of the email whereas the Android version only supports in the body.

Here’s a code snippet to test with:




.head-class{background-color:green;}
@media only screen and (max-width: 2046px)  {
  .head-mq{background-color:green;}
}



.body-class{background-color:green;}
@media only screen and (max-width: 2046px)  {
  .body-mq{background-color:green;}
}


HEAD STYLES:
Class:

Media Query:


BODY STYLES:
Class:

Media Query:

Here’s the results in the two versions of the Yahoo! Mail app:

This makes Yahoo! Mail’s Android version an outlier in email clients as all other email clients that support the tag either support them in the head and body or just in the head (in the case of Gmail). See this table for details.

Lack of max-device-width support.

Just like Yahoo! Mail Webmail, both iOS and Android versions of the app do not support the max-device-width media query. So you’re limited to using max-width. This may come in useful when troubleshooting responsive email designs.

Should You Duplicate Your Styles?

Should you put your embedded styles in both the head and body of your email to accommodate Yahoo! Mail’s Android app? If your style block is not large, it may not be a bad idea to also include them in the body to enable your email to be responsive in the Android client. However duplicating your style blocks increases the chance for error and the possibility of running into character limitations in certain email clients like Gmail. Therefor, it may be best to keep your responsive styles in the head and allow your design to render as the desktop version in the Android client.

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


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!