Tips to Create HTML Email template That Works with All Email Clients
In this tutorial I will show you how to create a simple HTML
email which will work in every email client.
What we have to use in Email template :
1. Use inline CSS.
Only use inline CSS. This will save you many headaches as Gmail and many other email clients choke on having CSS in a <style> tag.
2. Set specific Height and Width, for images and tables.
Give specific height and width to image. some clients will automatically apply their own dimensions where they aren’t explicitly stated, which leads to spacing and alignment issues. I’ve seen this happen for tables as well, so to be safe, always have explicit height and width properties to force a box-model structure.
If you are using banner with full with then you can give 100% with to image so that it can render properly in small screen like phone.
3. User table for spacing if looking for outlook margin and padding problem fix.
Outlook ignore margin and padding in email template so you can use table for that or you can use transparent png for make space.
4. Use Alt texts for Images.
A big reason for having alt texts for images is the case where the image cannot be rendered. Sometimes this is due to image blocking being enabled within the email client or possibly because of a slow internet connection. An alternate text can still convey the message/intent to the user in these cases. Another reason is for users who have disabilities and use a screen reader, they can still get context from the alt attribute.
5. User simple text with background color is best idea.
If you are designing a email template then try to make it good with text and background colors only not use any background image and font style or any other abstract.
6. Use Table and ignore div tag
Most of the Email client support table HTML they not compatible with Div. So Use Table structure only
What we shoule not use in Email template :
1.Don't Use Background image in design.
when you create email template design then not use any image as background because most of the email client not supported background image style. If we found any template text with background image then only solution is to use as image with text with HTML img tag.
Don’t use HTML Div tag
2. Don't Use table sturcture
Most of the Email client support table HTML they not compatible with Div. So Use Table structure only. Use Nested Table or Tables within Tables within Tables
The cardinal rule for HTML emails is to use nested tables instead of the <div> tag to space out your content. This is the best way to slice any email template and render it 100% accurate on email client.
3.Javascript or Flash not supported in email template
Javascript and flash are unsupported in email clients. If you need to apply this type of animation then you can use animated GIF image instant of that.
4. Media Queries not supported
don't use media queries because that's not supported for email clients or web clients
5. Don’t use internal and external css
Email client not supported internal and external css. For best result use ony inline css.
Apart from that ignore external links to include in template HTML.
6.Don’t design Email template like a web page.
Because in email template there is some restriction to create HTML slicing like
Can’t use backgournd, we can’t use div tag and many css styles so before creating a email template remember all the things which are needed in email template design
7. Don't use class
Email client not supported class also so its totally use less and rework if you use class.
Email preset template HTML
1. Use inline CSS.
Only use inline CSS. This will save you many headaches as Gmail and many other email clients choke on having CSS in a <style> tag.
2. Set specific Height and Width, for images and tables.
Give specific height and width to image. some clients will automatically apply their own dimensions where they aren’t explicitly stated, which leads to spacing and alignment issues. I’ve seen this happen for tables as well, so to be safe, always have explicit height and width properties to force a box-model structure.
If you are using banner with full with then you can give 100% with to image so that it can render properly in small screen like phone.
3. User table for spacing if looking for outlook margin and padding problem fix.
Outlook ignore margin and padding in email template so you can use table for that or you can use transparent png for make space.
4. Use Alt texts for Images.
A big reason for having alt texts for images is the case where the image cannot be rendered. Sometimes this is due to image blocking being enabled within the email client or possibly because of a slow internet connection. An alternate text can still convey the message/intent to the user in these cases. Another reason is for users who have disabilities and use a screen reader, they can still get context from the alt attribute.
5. User simple text with background color is best idea.
If you are designing a email template then try to make it good with text and background colors only not use any background image and font style or any other abstract.
6. Use Table and ignore div tag
Most of the Email client support table HTML they not compatible with Div. So Use Table structure only
What we shoule not use in Email template :
1.Don't Use Background image in design.
when you create email template design then not use any image as background because most of the email client not supported background image style. If we found any template text with background image then only solution is to use as image with text with HTML img tag.
Don’t use HTML Div tag
2. Don't Use table sturcture
Most of the Email client support table HTML they not compatible with Div. So Use Table structure only. Use Nested Table or Tables within Tables within Tables
The cardinal rule for HTML emails is to use nested tables instead of the <div> tag to space out your content. This is the best way to slice any email template and render it 100% accurate on email client.
3.Javascript or Flash not supported in email template
Javascript and flash are unsupported in email clients. If you need to apply this type of animation then you can use animated GIF image instant of that.
4. Media Queries not supported
don't use media queries because that's not supported for email clients or web clients
5. Don’t use internal and external css
Email client not supported internal and external css. For best result use ony inline css.
Apart from that ignore external links to include in template HTML.
6.Don’t design Email template like a web page.
Because in email template there is some restriction to create HTML slicing like
Can’t use backgournd, we can’t use div tag and many css styles so before creating a email template remember all the things which are needed in email template design
7. Don't use class
Email client not supported class also so its totally use less and rework if you use class.
Email preset template HTML
|
|
