Horizontal Data Bars in Email Templates

Background

Using images is the most common way to display data in email templates. One alternative way to display data is to code data bars in HTML/CSS. Here are some advantages of using this method:

Some users have turned off auto-loading images in their preferred email clients. Data coded in HTML/CSS will display automatically when the user opens the email.
If an image is replaced with data bars coded in HTML/CSS, the total email load time will be reduced.
Data bars coded in HTML/CSS can be more readable and customized for mobile devices. Data in images are not mobile responsive - they can be difficult to view on smaller screens.
For email clients that allow it, hover states can add a level of interactivity to data bars in email templates.

Basics

By using <td> cells and the background-color property, you can easily create a data bar in email.

<table width="600">
  <tr>
    <td height="30" width="600" style="background-color: #0dbd67;"></td>
  </tr>
</table>

Adding additional <td> cells and adjusting the widths will create different sections within the data bar:

<table width="600">
  <tr>
    <td height="30" width="200" style="background-color: #0dbd67;"></td>
    <td height="30" width="200" style="background-color: #86deb3;"></td>
    <td height="30" width="200" style="background-color: #dbdbdb;"></td>
  </tr>
</table>

Customizing Data Bars

Adding a linear gradient

Adjusting the background property and the linear-gradient value will create a smooth transition of colors in the data bars:

<table width="600">
  <tr>
    <td height="30" width="350" style="background: linear-gradient(to right, #10ed81 0%, #0dbd67 100%);"></td>
    <td height="30" width="250" style="background: linear-gradient(to right, #ffaa00 0%, #ff8300 100%);"></td>
  </tr>
</table>

For Yahoo! Mail and Outlook.com email clients, this CSS property does not work and the result will be a multi-colored data bar. For a fallback, add background-color after the linear-gradient which will display the data bar in one solid color.

<table width="600">
  <tr>
    <td height="30" width="350" style="background: linear-gradient(to right, #10ed81 0%, #0dbd67 100%); background-color: #0dbd67;"></td>
    <td height="30" width="250" style="background: linear-gradient(to right, #ffaa00 0%, #ff8300 100%); background-color: #ff8300;"></td>
  </tr>
</table>

For Outlook email clients, you will need to use Vector Markup Language (VML) to achieve the linear-gradient look for these data bars.

<!--[if mso]>
<v:shape coordorigin="0 0" coordsize="200 200" style="top:1;left:1;width:560;height:31" path="m 1,1 l 1,200, 200,200, 200,1 x e">
  <v:stroke opacity="0" />
  <v:fill type="gradient" color="#0dbd67" color2="#10ed81" angle="90" />
  <table width="560" border="0" cellspacing="0" cellpadding="0" style="width: 560px; height: 31px;">
    <tr>
      <td align="left"></td>
      <td align="right"></td>
    </tr>
  </table>
</v:shape>
<![endif]-->

You will need to add the width and height inline in the table element for Outlook DPI clients. This will allow the text for data labels to align correctly in the data bar.

Adding interactive hover states

<style type="text/css">
  .data1:hover {
    background: linear-gradient(to right, #10ed81 0%, #10ed81 100%) !important;
  }
  .data2:hover {
    background: linear-gradient(to right, #ffaa00 0%, #ffaa00 100%) !important;
  }
</style>

<table width="600">
  <tr>
    <td height="30" width="350" style="background: linear-gradient(to right, #10ed81 0%, #0dbd67 100%); background-color: #0dbd67;" class="data1"></td>
    <td height="30" width="250" style="background: linear-gradient(to right, #ffaa00 0%, #ff8300 100%); background-color: #ff8300;" class="data2"></td>
  </tr>
</table>

Data labels

You can add helpful information by including labels inside or underneath the data bars.

<table width="600">
  <tr>
    <td width="300" align="right" style="background: linear-gradient(to right, #10ed81 0%, #0dbd67 100%); background-color: #0dbd67; color: #000000; font-weight: 400; font-size: 14px; font-family: courier; line-height: 1.5em; margin: 0; padding: 0;" height="31">Label&nbsp;</td>
    <td width="300" align="right" style="background: linear-gradient(to right, #ffaa00 0%, #ff8300 100%); background-color: #ff8300; color: #000000; font-weight: 400; font-size: 14px; font-family: courier; line-height: 1.5em; margin: 0; padding: 0;" height="31">Label&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="middle" width="300" style="color: #0dbd67; font-weight: 600; font-size: 16px; font-family: courier; line-height: 1.5em; margin: 0; padding: 2px 0 0 0;">$12,345.00</td>
    <td align="right" valign="middle" width="300" style="color: #ff8300; font-weight: 600; font-size: 16px; font-family: courier; line-height: 1.5em; margin: 0; padding: 2px 0 0 0;">$67,890.00</td>
  </tr>
</table>

Putting It All Together

By combining all the different variations, you can create informative, visually appealing, and interactive data bars in email templates without using images.

bdjang / horizontal-bars-email-templates