Slicejack Email Boilerplate is merely a guideline for writing HTML code that will render correctly across each of the most popular email clients.
If you have experienced email template development then you know how painful it is to build perfect email template that works on all email clients.
To make it easier for you to develop responsive and lightweight email templates we have created Slicejack Email Boilerplate.
Quick features overview:
| Feature | Description |
| Reset styles | This styles are great starting point for your email template develpment. They fix all well known bugs in various email clients. |
| Responsive | This email boilerplate is responsive and ready for mobile devices and tablets. |
| Grid | Slicejack email boilerplate uses 12-column grid with a 600px container. |
| Lite version | There's lite version of boilerplate available for you. It's without comments so you can use it right out of the box. |
| Great compatibility | We have tested this boilerplate on numerous email clients and devices. |
| Well documented code | Well documented code for easier usage. |
| Open source | All contents of this boilerplate are licensed under the MIT license. |
This is some kind of development process that you should follow when developing email templates with Slicejack Email Boilerplate. If you are experienced email developer then you can skip this section.
First of all we suggest you to use email-lite.html for your email development because you should avoid using comments in your final email campaign. Else you may get blocked by SPAM filters.
Follow this email CSS guide
On this link you can find a complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet. It is recommended to use it as often as possible.
It’s also a really great idea to try to keep your entire email as small as humanly possible: under 100kb is ideal but not always possible, under 250kb is pretty standard.
Use a compression app like compressor.io to cut all your images down to size as much as possible before you send. Slower load times, especially on mobile, can make or break your email if the overall file size is too large.
Some email clients strip out <head> and <style> tags from emails, so it's best to have your CSS written inline within your markup. We know that writing inline CSS is time consuming and repetitive, so @peterbe built this conversion tool to automatically inline your email's CSS.
Before you send your HTML email you should test it properly. We recommend you to use Litmus or Email on Acid.
Best way to send your HTML email would be using an Email Service Provider (ESP) such as MailChimp or Campaign Monitor. If you’re just running a quick test we recommend you to use https://putsmail.com/
We have tested this boilerplate on numerous email clients and devices. In table below you can see what's supported:
| Email clients | Web email clients | Mobile devices |
|
Apple Mail 7 Apple Mail 8 Outlook 2000 Outlook 2002 Outlook 2003 Outlook 2007 Outlook 2010 Outlook 2011 Outlook 2013 Outlook 2016 |
Gmail Google Apps Office 365 Outlook.com Yahoo! Mail |
Android 4.4 iPhone 5 iPhone 6 iPad iPad Mini |
Slicejack email boilerplate uses 12-column grid with a 600px container. On mobile devices (under 600px wide), columns become full width and stack vertically.
We have created special email-grid.html file for email development with our grid. Basically it's a email-lite.html combined with grid CSS.
We suggest you to use this media query when building responsive email with our grid.
@media screen and (max-width: 600px) {}See how aspects of this grid work across devices with a handy table.
| Small devices (<600px) | Large devices (>600px) | |
| Grid behaviour | Horizontal | Collapsed |
| Container width | 100% | 600px |
| Number of columns | 12 | |
| Column width | 100% | 50px |
| Gutter width | 20px (10px on each side of a column) | |
All emails should have a container element. This gives the email a maximum width for email clients on larger screens. It also orients the email in the center.
Example:
<table class="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table><!-- /.container -->Content should be placed within columns, and columns should be placed as <td> of your .container.
You can define width of the column with classes such as .column-1, .column-2, .column-3 etc.
In .container you can place max. 12 columns.
Examples:
<table class="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column-12 first last">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
</tr>
</table><!-- /.container -->
<table class="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column-6 first">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-6 last">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
</tr>
</table><!-- /.container -->
<table class="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column-3 first">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-3">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-3">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-3 last">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
</tr>
</table><!-- /.container -->
The .first class adds the appropriate amount of padding-left to space the content away from the container’s edge. The .last class is added to your last set of columns in a row to add padding-right to the column. If you have columns in between .first and .last, these classes are not needed on the middle columns.
The reason these classes exist is that CSS properties like :last-child don’t work in most email clients so a class is needed.
Example:
<table class="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column-4 first">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-4">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-4 last">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
</tr>
</table><!-- /.container -->
If you need columns without gutter than you should use .no-gutter class on your .container.
Example:
<table class="container no-gutter" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column-6">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
<td class="column-6">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td><!-- /.col -->
</tr>
</table><!-- /.container -->
Special thanks to:
- Sean Powell
- Ian Hoar
- James White
- Campaign Monitor
- MailChimp
- Email on Acid
- Litmus
- Bringinteraktiv
- Zurb Foundation
- Peter Bengtsson
All contents of this boilerplate are licensed under the MIT license.