HTML Email Width - Overcoming the 600px Limitation

by Gyula Németh

The de facto standard for HTML emails' width is 600 pixels. But why is that? We have written two articles about it already. The first was published on this blog long, long ago; the second was published recently on chamaileon.io's blog. The latter is an in-depth article, I really recommend you to read that.

Many people in the email community are doubting that we still need to use such narrow designs. There are many companies who are experimenting with wider newsletters. They realized that most of the people on their email lists open their emails on such email clients where it's not an issue any more.

To be honest, I'm not satisfied with the "looking at our email list then decide" approach. What if I start a new newsletter? What if I need to use my templates somewhere else? This approach is just way too much work. I want a generic solution.

So, how to define that generic solution? Well, the width of our content containers should not only be 600px, but much, much larger than that as well. When the device's width is less than the container's width, then the width of our container should be fluid (width: 100%;).

If you have multi-columns in your email, then they should be stacked on mobile devices. The break-point for this can still be 600 pixels.

It means that your content is generally fluid with an upper boundary (for example 960px), and your multi-columns are stacked under 600 pixels.

A naive approach

The straightforward approach to achieve the solution above is to use width: 100%; and max-width: 960px (or any other number) in your containers.

I like to use table-based containers because they are very robust. (Just think about Outlooks.) The pattern for the centered container looks like this:

<center>
  <table style="width:100%;max-width:###WIDTH###px;margin: 0 auto;" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="100%" style="text-align:left;">
        ###CONTENT###
      </td>
    </tr>
  </table>
</center>

The following example contains five containers with different widths: 1440px, 1280px, 1024px, 800px and 600px.

Litmus test results

As you can see in the Litmus tests, it's generally a good solution. The problem is that Outlooks and Lotus notes do not apply max-width.

You must use pixel values in the width CSS property or the width attribute to support these email clients. But there is a problem with that. If you don't use 100% as the width of your container, then it won't adapt to the available space.

We have to figure out a way where the width of the container can stay 100% and force the problematic email clients pixel values in another way.

Supporting Word-Based Outlooks

Luckily it's possible to use conditional comments to fix Outlooks. Let's start with the Word-based versions.

<center>
  <!--[if gte mso 9]><table width="##WIDTH##" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
  <table style="width: 100%; max-width:##WIDTH##px;margin: 0 auto;" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="100%" style="text-align:left;">
        ##CONTENT##
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]></td></tr></table><![endif]-->
</center>

By wrapping the previous table with another table in a conditional comment, Word-based Outlooks can be fixed.

You can see from the Litmus test results that IE based email clients (for example Outlook2000 or Lotus Notes 8) still don't apply the correct width.

Supporting IE-Based Email Clients

You might remember the rule of thumb from the previous lesson, where I introduced the "Drop Calc method". This rule of thumb is the following:

width attribute < width in class < width in inline style < !important width in class

It means that the width attribute can be overridden by a width CSS property in a class, which can be overridden by a width CSS property in inline style, which can be overridden by an !important width in a class.

Based on this, we can change width: 100% from the inline style to the width="100%" attribute. This way we can override its value with a class.

If we define that class in a conditional comment for IEs, then that value will only be applied to IE based email clients. You will have to use pixel values in the class definition:

<!--[if lt IE 8]>
<style>
.container##WIDTH##{
  width: ##WIDTH##px;
}
</style>
<![endif]-->

...

<center>
  <!--[if gte mso 9]><table width="##WIDTH##" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
  <table class="container##WIDTH##" width="100%" style="max-width:##WIDTH##px;margin: 0 auto;" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="100%" style="text-align:left;">
        ##CONTENT##
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]></td></tr></table><![endif]-->
</center>

With this method, you can create much wider centered containers than 600 pixels. If there is not enough space, then the container will use width="100%". This ensures that the container will not be wider than its parent.

As you can see it fixed even Lotus Notes 8, but if you take a closer look, you can see that the widest container is not as wide as it should be. Another good example for this is Inbox by Gmail:

Even though it's possible to create containers which can be much wider than 600 pixels, the reality is that in many email clients there is simply not enough space.

Because of this reason, your design should be prepared for variable wide containers as well. If you use a wide container (for example 1280px) then the content of that container should look good even if the actual width is much lower (for example 800px).

If you keep this in mind, you can create very good looking emails where you can combine containers with different widths.

Litmus test results

Summary

The safest width to design your emails is 600px, but more and more email coders are experimenting with wider designs.

As you could see in this article, it's technically possible to create much wider content. You only have to prepare your design in a way that it looks good even if it's smaller than the originally designed width.

The method I described works in the following way:

  • use width="100%" attribute together with max-width: 960px in inline style (where you can change the 960px to any other pixel based value)
  • use wrapper tables in conditional comments to support Word-based Outlooks
  • use conditional style to support IE based email clients

You can use this method together with the "Drop Calc" method to create complex layouts which are wider than 600 pixels.

Another cool thing about this method is that you can even combine containers with different widths to spice up your design. For example you can have a wide hero unit on the top with a huge image and the title and you can have narrower content below. I find those kind of email designs very elegant and unusual - which might attract more people to click.

If you find any drawbacks of this method, please let me know in the comments section below.