Posted by 
Archived in When we are given a blank canvass to design HTML emails we take into consideration the following:
Preview Pane
We optimise the HTML template design for the top 2-4 inches as there is only this much space to tell the story and persuade the viewers to open our email instead of just previewing it.
75% of users use a vertical preview pane, 25% use a horizontal preview pane. To accommodate both sets of users we design the HTML email template messages so that it displays the most important call to actions and key content in the top left of the message.
Images
We do not use more than 30% ratio of images to text as most ISP and spam filter emails with will block emails with a higher ratio of images.
Up to 45% of viewers may have images turned off or blocked in their email client so we design the layout to focus the readers eyes on the key content of the message and also include image tags with full descriptions to encourage readers to download the images.
Width
We keep our HTML email width under 600 pixels to avoid users having to scroll to read the message.
Fonts
We use only universally supported fonts as non-standard fonts not supported by the reader’s computer may seriously affect the design layout.
Content
There are two distinct audiences, skimmers and readers. Readers are not a problem but skimmers will look at the top of the message, headlines and subheads and key bold phases throughout the message. We design the message, making proper use of bold face type style, so we can pull the reader down through the message and still deliver relevant content quickly.
Where possible we design the email to cover the main bullet points and use links to drive the viewer to your website. We encourage clients to include as many links as possible. Emails with many links will get a higher click rate than those with less links.
We include a text version of the email within the HTML so that it can be read by non-HTML email packages.
Scripts
We do not use scripts such as JavaScript as some applications view it as a security risk and will block messages. Instead we drive readers to a webpage where dynamic components are easily rendered.
HTML Code
We make sure our HTML code always conforms to W3C Standards. HTML code not conforming to WC3 can cause delivery and rendering issues.
