Saturday, 19 June 2010

E-Flyers

When designing/creating a html e-flyer, you have to almost go back in time to the early 90’s. You can’t use css/styles, and everything needs to be within a table(s), which for all you professional developers, will know this is bad practice. However, email browsers are still very much in the initial stage of the Internet; hence you need to take this into consideration.

Guidelines:

Dimensions and size


The width of the email should not exceed 600 pixels and the recommended height is 800 pixels. It should also not exceed 70kb in total size including all images to ensure quick viewing without too much load time.

HTML Coding

The email should never be just one image. Instead, it should be a 50/50 split between text and images. This is because if the user has images blocked, they will be displayed with nothing, hence nothing to encourage them to download the image(s)

Do not use JavaScript, ActiveX, Flash, or any other plugins because these will be seen as virus’ hence will not reach your readers.

Data Capture forms do not work within emails

Your HTML should be W3C compliant (http://validator.w3.org)

Images

Images should be web optimized in jpg or gif and background images do not work in all email browsers. Images should also include alt tags so that if/when the images are not displayed, the description of the image can be seen. Also, spam filters can read through your image names and alt tags hence try not to use marketing/spam terms such as:

Money back guarantee
Lowest price
Increase your energy/income
Independent reward
Free
Money back guarantee
Dear friend
Diet

Step by Step Guide:

To begin with, you cant use doc types, meta tags, cascading style sheets or div tags, hence your html will simply be as follows:









Your next step is to create a table, which must be 98% wide. This will be used as a container for your content.








Now you’re ready to insert your content (remembering you must use tables for this)

Further to the above, it is also a good idea to include alt tags within your images. The reasoning for this is because a lot of browsers block images, hence the alt tag is the only thing they see.

Here is an example of an eflyer I did earlier:



And here is the code for it: