Email Design Crash Course

Read our guide: //exportkit.com/plugin/environments/html5/responsive-html-email-designs for full details.

Unlike web browsers, email clients do not parse all HTML elements. This is mainly for security reasons, but also to preserve bandwidth.

Learn more about Class Tag, Code Tag and Responsive Screens before creating emails designs.

KISS – Keep it Simple, its an Email

An email should contain only a few images at most and text.

Emails Do Not Support Div Tag

Emails have very limited rendering capibilities and only allow a few elements – Div is not one!

You Must use Tables to Maintain Your Design

Tables are key to visually maintaining your design elements. Emails are considered the Wild West when it comes to rendering as there are MANY email clients and each renders differently.

Tables

(FOLDERS ONLY)
${class|table:width="100%" border="0" cellpadding="0" cellspacing="0"}

This will create a table without borders and padding which will allow you to ”design normally” – to an extent. You can additionally add External CSS to control these elements.

Rows (tr)

(FOLDERS ONLY)
${class|tr: }

It is IMPORTANT to note the colon/space ": " in the Class Tag. Class Tag requires args to render correctly, so you must add an argument to the tag - in this case an empty space.

IMPORTANT: This was a previous requirement with Class Tag that we plan to change to allow for classes without arguments.

Data/Column (td)

(FOLDERS ONLY)
${class|td:align="center" class="footer"}

This will create table data that has a center align and uses the class footer.

Table Content

You can naturally add images and they will maintain their properties, but for text, you may want to use Code Tag with your layer to add RAW HTML.

Responsive Tables

You can add normal Responsive Screens, but emails have slightly different rendering rules. Because you are using Tables, you only need to add responsive design elements for typically tr, td, and contents - not the actual table itself.