HTML E-MAILS

Creating Responsive HTML emails can be tricky. You can't rely on modern CSS properties. While on web, you can use the latest techniques (because browsers are automatically kept up to date), there are many big companies that still use really old e-mail clients, that don't get updated. An e-mail has to look great in all e-mail clients, new & old & that's quite a challenge.

You basically have to use tables in html (very oldschool) and use attributes where possible. When in doubt which properties you may use, you can always check on The Ultimate Guide to CSS of Campaign Monitor .

File structure

The file structure of the demo project looks like this:

project-root
├── en-mail-html-v1.html
│   └── img
│       ├── ...

Basic Responsive HTML email

You can find a very basic example of a responsive e-mail here here.

E-mails regulary are 650px wide (that's our most used width)
Use oldschool colspan - but do it correctly, or your e-mail will have error in various clients
Coding emails is all about precision (each td should add up to the max width), if you don't do this properly this will mess up the layout in some clients. (thank me later!)
Snippet: This is the preview text that will appear nexto your subject in e-mail clients. The client will display the first text it comes across, that's why we add a snippet of text & hide it in the main email. Because display:none doesn't work for all clients, it's a good idea to set the snippet text to a 0 font-size & line-height & the text the same colour as the background.

.snippet {
  display: none !important;
  font-size: 0px;
  line-height: 0px;
  color: #FAFAFA;
}

<table width="650" cellpadding="0" cellspacing="0" style="margin:auto" align="center" class="mail" bgcolor="#FAFAFA">
  <tr class="line-height-none">
    <td valign="top" align="center" bgcolor="#FAFAFA" style="color: #FAFAFA;"><span class="snippet">
        <singleline label="snippet">this is a snippet</singleline>
      </span></td>
  </tr>
</table>

Buttons can be quite tricky to implement, but Campaign Monitor offers a great solution with their Bulletproof email buttons

Example of content with 2 borders.

@media screen and (max-width: 650px) {
    .image-responsive {
      display: inline-block !important;
      width: 100% !important;
      height: auto !important;
    }

    .table-border {
      width: 5% !important;
      display: inline-block !important;
    }

    .table-content {
      width: 90% !important;
      display: inline-block !important;
    }
}

<table width="650" cellpadding="0" cellspacing="0" style="margin:auto" align="center" class="mail" bgcolor="#ffffff">
  <tr>
    <td valign="top" class="table-border" width="50"></td>
    <td valign="top" class="table-content tagline" width="550">
      <span class="tagline fallback-text">Lorem</span>
    </td>
    <td valign="top" class="table-border" width="50"></td>
  </tr>
  </tr>
</table>

You'll notice:

50+550+50 = 650 (precision)
table-borders & table-content are specified in the media query & will ensure that there is a nice border on both sides of the content on mobile

Testing

Campaignmonitor has testing (if the client hasn't got a subscription, a test costs €5)
Hubspot has unlimited e-mail client testing

Hubspot templates

Mandatory:

the full address

 <strong>{{ site_settings.company_name }}</strong><br>{{ site_settings.company_street_address_1 }}, {{ site_settings.company_zip }} {{ site_settings.company_city }}{{ site_settings.company_state }}, {{ site_settings.company_country }}<br><br>

the unsubscribe tag

<a class="hubspot-mergetag footerlinks" data-unsubscribe="true" href="{{ unsubscribe_link }}"><span class="footerlinks">Update your email preferences</span></a> | 
<a class="hubspot-mergetag footerlinks" data-unsubscribe="true" href="{{ unsubscribe_link_all }}"><span class="footerlinks">Unsubscribe</span></a><br/>

Campaign Monitor templates

Add each layout block as new table in a table row. This will enable to moving of layout blocks in the campaign monitor editor.

Mandatory:

the unbsubscribe tag

<unsubscribe><span class="unsubscribe">Unsubscribe</span></unsubscribe>

Outlook & Fonts in Email

Outlook has very limited support for web fonts and does not handle fallback fonts reliably.

For example, if you define a Google Font like this:

font-family: 'Manrope', 'Arial', sans-serif;

What Happens in Outlook

Outlook first checks if Manrope is installed locally on the device.
If it isn’t installed, it should fall back to Arial — but Outlook ignores this and instead defaults to a generic serif font.
You also cannot reliably use conditional checks like:

<!--[if mso]>

…to force a font for Outlook only, because this would make every email default to Outlook styles, even on devices where the font is installed.

Web Fonts Support

Unfortunately, support for web fonts in email clients is still very limited, especially in Outlook.

Best Practice

The most reliable approach is:

Set a safe default font (e.g., Arial) for your general email styles.
Use a media query for modern email clients that do support web fonts and define the Google Font there.

Example:

body {
  font-family: Arial, sans-serif; /* Default font */
}

@media screen {
  .google-font {
    font-family: 'Manrope', Arial, sans-serif; /* Google Font applied where supported */
  }
}

Why This Works

Modern clients use the Google Font where possible.
Outlook and other limited clients fall back gracefully to a safe default like Arial.

Rare issues

HTML

Do not use modifiers in CSS for an email, this will break your email in certain responsive clients (such as GMAIL in IOS,Android. Strangely enough this does not have effect in the mobile app for Outlook.
If you're listing class names, don't add a comma after your list item, this will cause these classes not to work.
If you're adding a link, make sure to give the a href a class but also wrap the link text in a span with the same class (many e-mail clients will override the class of the link & give it that ugly hyperlink blue).