What makes a good HTML email?

What makes a good HTML email

What makes a good HTML email?

Just like with web pages, the layout of an HTML email is critical in determining where your readers’ focus is directed.

If you want to code a pixel-perfect HTML email .A good HTML email is the one that renders well across the major email clients and doesn’t trigger spam filters.

Any HTML template includes two parts:

First is Header section: Any code placed between <head> and </head> is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.

Secound is Body section: Any code placed between <body> and </body> is the body section and the rendering engine uses the code to create the structure of your email.



To design a good HTML email, you should keep in mind the following tips:

Note : Keep everything within 600px wide.

TIP-1 Use table-based layout not DIVs.

For email template you must use only tables, inline style together with old HTML attributes that are obsolete in a normal world. That's the result of a lot of different mail readers that do not normally support HTML standards. Some of them strip <style> tag, some of them do not understand css shorthands.


TIP-2 Text to image ratio should be maintained at 80:20. Has small embedded images (if using them).

Background images are not supported. Be aware of any floating elements. Keep margins and padding to as minimum as possible. If you can, just use cellspacing and cellpadding attributes for tables.


TIP -3 Don’t use JavaScript.

Most (if not all) email clients remove the script tag and all which is within it, so you cant add javascript to your code. Also, you’ll have to make your CSS inline because CSS too (if written in a different file) will be pruned off by the end users email client.


TIP -4 Don’t use unnecessary tags that can increase the size of your HTML email. like Don’t use <html>, <head> and <body> - They will be discarded by most clients anyway.


TIP -5 CTA should not be placed in background images.

Avoid setting type against gradients, photos, patterns, or anything else that would require an image file to render. Remember: solid-color backgrounds only.


TIP -6 Use hard line breaks instead of “float” and “clear”.


TIP -7  Standard bullets work better in comparison to custom bullets.


TIP -8  Use Inline CSS instead of CSS stylesheets. And Uses minimal CSS.


TIP -9 Web-safe fonts should be used.


TIP -10  Specify widths and heights in pixels, not percentages.


TIP -11  Images should have suitable alt tags.


TIP -12 Make it clear who’s sending the message.

Most people are a little suspicious of strangers who don’t clearly identify themselves, and the same goes for email – make sure it’s clear right from the get-go who exactly is talking to your email subscriber.