General Slicejack Email Boilerplate – Perfect email template
If you’ve ever experienced email template development then you know what I’m talking about when I say how painful it can be! It’s HARD to build the perfect email template that works on all email clients.
Due to the smartphone and tablet revolution over the last few years we have a big demand for responsive email templates that should scale perfectly on desktop, tablet and mobile email clients. To make it life easier to develop responsive and lightweight email templates – we’ve created the Slicejack Email Boilerplate.
What is the Slicejack Email Boilerplate?
The Slicejack Email Boilerplate is merely a guideline for writing HTML code that will render correctly across each of the most popular email clients. Also it has a very simple grid system that helps you create delightful responsive emails.
Boilerplate is an open-source project published on GitHub under MIT License. The full documentation can be found on the same GitHub page with some extra content such as the compatibility table and detailed examples.
Here’s a short features list:
- Reset styles
These styles are a great starting point for your email template development. They fix all well known bugs in various email clients. - Responsive
This email boilerplate is responsive and ready for mobile devices and tablets. - Grid
The Slicejack email boilerplate uses a 12-column grid with a 600px container. - Lite version
There’s a lite version of boilerplate available for you. It’s without comments so you can use it right out of the box. - Great compatibility
We’ve tested this boilerplate on numerous email clients and devices. - Well documented
Well documented code for easier usage. - Open source
All contents of this boilerplate are licensed under the MIT license.
How to use the Slicejack Email Boilerplate?
This is some kind of development process that you should follow when developing email templates with the Slicejack Email Boilerplate. If you’re an experienced email developer then you can skip this section.
- Use the lite version of boilerplate
First of all we suggest you use email-lite.html for your email development because you should avoid using comments in your final email campaign. Otherwise 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. - Compress and optimize your images
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. - Bring your styles inline
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. With this in mind @peterbe decided to build this conversion tool to automatically inline your email’s CSS. - Test your email properly
Before you send your HTML email you should test it properly. We recommend you use Litmus or Email on Acid. - Send your email properly
The 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 use https://putsmail.com
Quick email development tips & tricks
Email is all about nesting tables
Due to the lack of standards support in email, it’s not possible to use divs, sections, articles or any other HTML5 element. Instead you have to use tables. Moreover, you need to use lots and lots of nested tables because neither the colspan nor rowspan attributes are properly supported.
CSS support
- No CSS shorthand is used
Instead of using the abbreviated style rule font: 12px/16px Arial, Helvetica, you should instead break this shorthand into its individual properties: font-family, font-size, and line-height. - Multiple classes
You can’t apply multiple classes to things in HTML email because it’s not supported. Every element can have a maximum of one class. - CSS style declarations
CSS style declarations are very basic, and don’t make use of any CSS files.
Images
When saving out images remember that it’s good practice to give your images names that are short and meaningful because it will improve your spam score. Names like “email_campaign_1_featured_image_3.jpg” are likely to have a much higher SPAM score than “email.jpg“.
It’s also a really great idea to try to keep your entire email as compact as possible. Under 100kb is ideal but not always possible, under 250kb is pretty standard. Slower load times, especially on mobile, can make or break your email if the overall file size is too large.
Summary
We’ve created this email boilerplate to give you some good foundations for your future email projects. Now it’s your turn to get started and create some great stuff with it. It’s over to you!
Have fun 🙂
