HTML Email Layout | Inserting Images | Text Formatting
In the previous post we have gave you some information about HTML email and how to make an HTML email. In this post we are going to tell you more about the HTML email layout, HTML email formatting and especially that how you can insert images, picture or photos in HTML email.
HTML Email Layout
We have talked about using styles in HTML email in the last post and what HTML tags to use in the layout. It is widely recommended that you should use <table> tags for the HTML email layout. <table> tags are most stable option especially for multi column layouts. Gmail do not allow using div tags and it removes them. The floating HTML elements are not supported in most of the email clients so you have to use the align attribute for the <table> tag instead of floats.
Usually div tags are used in most of the latest design instead of table tags. In HTML emails it is best to use table tags instead of div but you can use div tags but as we have discussed it before that most of email clients do not support div tags in HTML emails. On the other hand table tags are widely supported by all the email clients.
Text Formatting HTML Email
HTML emails can have colored texts and fonts but they are made colored with inline styles because almost all email clients do not support external or internal style sheets except for the inline styles. The inline styles have a drawback of overloading the HTML as you have to apply inline style for every text which you want to be changed.
The inline styles are not used in HTML documents normally as they make the page heavier. In HTML emails they should only be used where necessary. You should use inline styles where you want styles for your font or text to be as it is.
The inline styles in HTML email are very helpful for headings and special notes. You want them to be of a certain color or of a certain background in your emails.
There are many email clients who change the text styles in a different way so you can override them by writing inline styles. Hotmail is a big example of that it changes the links to small blue Verdana font family. Here you can use inline styles to style your links to be as you want them to be.
Using Images in HTML Emails
Images are used to increase the beauty and look and feel of a web page. You can use images to create more attractive HTML emails. Images give you the ability to enhance the user friendly look and feel of your email. They are often used to track email open rates. They have some disadvantages as well, as spammers frequently abuse HTML email images. Most if not all email clients do not allow images to display without user’s permission. There are some email clients that show images that are included using img tag but not images that are included using CSS.
We recommend you not to use dark background colors in your email clients. It may heart the user and he can report it as a spam. So for better user experience you should use lighter colors if allowed.