Best Practice EDM Specifications 

File size:

Images must be no larger than 200kb.

Dimensions/layout:

• Maximum width must be no larger than 600px.
• Vertical layout over the horizontal is preferable.
• If you have multiple product/categories to display, provide a navigation bar.
• Use 4 to 5 panel of area for visual emphasis that offers specific eye path for key offerings.
• Calls-to-action should be clear and enticing.

Image format:

• Static images (GIF,PNG,JPG) only.
• All images must insert <alt> tag.
• Animated Gifs are not recommended (due to Vista Outlook only displaying the first frame of the animation).
• No rich format element (Flash, Video).
• Graphic text is not recommend for paragraphs.
• No spaces in filenames. Use underscore or hyphen.

DO	DON’T DO
Image_1.gif     Image-1.gif	Image 1.gif

• Use email specific url from the console for image paths. 
  <img src=”email_specific_url”/>

HTML format:

All HTML should be table based, with <div> tags kept to a minimum with no floating or absolute positioning.

Fonts:

• No custom fonts. (Unless they are contained within images)
• Use only system fonts for compatibility.

Don’t do:

• No background images. Many email clients (Outlook, one of them) do not support background images.
• No Javascript.
• No Iframes.
• No External CSS.
• No bookmark anchor tags in HTML (They don’t work in Lotus notes).
• No overlapping content.
• No rotated content (unless we can put it in a square image).

Text version:

Additional text only version is preferred. (This is for those recipients who do not / cannot read HTML in their email clients).

EDM information:

• Add Subject Line Text.
• Add From Sender Name (usually company/product/ event name).

Copy and content:

• Use short sentences and paragraphs.
• Use design elements like spacing and dividing lines to distinguish the content sections from one another.
• Use bold typeface and sub headers to make certain words stand out.
• Use bullet points to showcase benefits.
• Use web safe standard fonts. E.g. Arial, Arial Black, Arial Narrow, Comic Sans, Courier New, Georgia, Impact, Tahoma, Times New Roman and Verdana.
• Ideal font size for body copy is 14 pixels and title is minimum 22 pixels which provides decent readability on mobile phones.

Responsive/non responsive:

Creating responsive templates are mainly used for mobile device displays. They require coding expertise to modify or maintain and have increased cost related due to the extra complexity for targeting multiple types of devices with different screen resolutions.

Non responsive is your traditional email template with standard dimensions. It is cheaper and less complex because it has a fixed width. Mobile users will still be able to view it but it will require the user to pan and zoom to read content.

Email width:

Stay under 600 pixels for Android, 320 to 550 pixels.

Create tappable calls to action:

Calls-to-action need to be eye-catching, in centre and tappable, with a minimum size of 44 x 44 pixels.

Layout:

While newsletters are typically designed in two or three columns, mobile optimised emails should be designed in a single column template.

Finger targets:

Increase font size, line spacing, button sizes and white space to make it easy to touch on touch screens.

Visibility of call to action and links:

As mobile devices don’t support hover states, make sure your links, buttons etc are clearly visible as clickable objects.

Tips:

• Rather than embedding videos into emails, use a still image linked to a video.

HTML styling examples:

Please check your HTML is well-formatted with standard tags.

1. All styles must be tag inline styles and not reference any external style sheets, classes or styles at the top of the HTML.

DO	DON”T DO
<p style=”color:red;”>The colour of this paragraph text is red.</p> <p style=”color: #FF0000;”>The colour of this paragraph text is red.</p>	P { color: red; ) P { color: #FF0000; ) <p style=”color: #FF0;”>The colour of this paragraph text is red.</p>

2. <font> tags are not suggested, <span> is more compliant and should be used instead.

DO	DON’T DO
<span style=”color:blue; font-size:12px;”>This text has a font size of 12px.</span>	<font size=”2” color=”blue”>This is the text. </font>

3. No custom tags.

DO	DON’T DO
Custom tags  (strip out totally)	<custom>Custom tags</custom>

4. All HTML tags should be closed and correctly nested.

DO	DON’T DO
<b>This is bold</b>	<b>This is bold
<img src=”http://www.www.com/image1.gif “/>	<img src=”http://www.www.com/image1.gif”>
<b><i>This is bold and italicized</i></b>	<b><i>This is bold and italicized</b></i>

5. Ensure images have width and heights specified.

DO	DON’T DO
<img src=”http://www.www.com/image.gif” width=”300” height=”50”/>	<img src=”http://www.www.com/image.gif “/>

6. Pixels should not be specified in tags.

DO	DON’T DO
<img width=”50” />	<img width=”50px” />
<table width=”600”></table>	<table width=”600px”></table>