Professional Documents
Culture Documents
HTML Email Best Practices-Table Layout
HTML Email Best Practices-Table Layout
HTML Email Best Practices-Table Layout
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
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.
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%