Table Layout – Best Practice

Every email that is built will contain two tables. The outer shell that is set to 100% and the inner table that is considered to be the
container. The container is the actual email itself.
 Table shell of 100%
 Container – this will vary depending on the brand template

Shell – 100%
Container – 600px

Nested Tables
Design Container – 600px

Title
 Copy Copy Copy
Copy Copy Copy

Step 1 – table two columns one row

Step 2 – table with three rows and one column
Step 3 – table to support the CTA

CSS
Most web pages are made from HTML. This is the standard way to decorate plain web text with fonts, colors, graphic, and hyperlinks.
CSS describes how web pages should look.

Three Types of CSS:

1. External
2. Internal
3. In-line

Supported In-line CSS:

Font-family
Font-size
Text-decoration
Font-weight
Text-align
Padding-top
Padding-bottom
Padding-left
Padding-right
Line-height

NOT BEST PRACTICE:

 Do not use floats.
 Divs are starting to be more supported but use with caution.
 Colspan are supported but if done incorrectly can cause errors. Best bet is to stay away from them and use a nested table.
 Rowspan are still not widely supported in Outlook. Just use a nested table.
 Do not use short script.
 Do not use hand css code.
 Do not style image tags.

WEB SAFE FONTS:

These are your best bet for sans serif fonts

Arial
Arial Black
Tahoma
Trebuchet MS
Verdana
Courier
Courier New
Georgia
Times
Times New Roman

TABLE ATTRIBUTES:
Keeping a strd on table attributes will help eliminate potential rendering issues. Control all elements with inline CSS.
Width
Align [align=””]
Border [border=””]
Cell Spacing [cellspacing=”0”]
Cell Padding [cellpadding=”0”]

LINK ATTRIBUTES:
Keeping a standard on link attributes will help eliminate potential rendering issues. Control all elements with inline CSS.
Alias [alias=””]
Target [Target=”_blank”]
Add style to links

IMAGE ATTRIBUTES:
Keeping a strd on image attributes will help eliminate potential rendering issues. Control all elements with inline CSS.
Width
Height
Display block [style=”display: block;”]
Do not add style to images
Alt tag
Border [border=”0”]

IMAGE OPTIMIZATION: Saving an image once sliced. There are two options. Either a gif or jpeg.
Jpeg: Images with high graphics. Normally a hero with heavy design, texture, and color.
High
Quality = 80
Optimized
Gif: Use for something simple. A font with low tones. Example like a logo or navigation bar. Very low design.
Selective
Diffusion
Select Transparency
Color 256
Dither 100%