Today internet is well loaded with different marketing strategies for different domains, from social media marketing to inbound marketing. But today when content is the king in the industry Email- marketing is the best approach to spread your information, contact with valuable concerns, promote you sales and update concerns about your entity.

The main purpose of email newsletters is different for the publisher and the readers:

Readers:

Get information and navigate through in an easy manner comparing with the simple plain text.

Publishers:

Publishers can check the open rates, forward rates, click throughs and let themselves know about the interest of people in particular item and information.

Emails are read across these three main platforms:

1-Desktop Email Readers:

Outlook, Lotus Notes, Thunderbird many more

2- Web based Email Readers:

Gmail, Yahoo many more

3- Mobile and other Smart Devices Email Apps

 

To write an email newsletter is far different than writing HTML for webpages, because different email clients render code differently, giving very different result from each other.

While thinking about to write your first newsletter these two fundamentals should be considered;

Two Fundamentals While Wrting Email Newsletter Code

  • Code your newsletters in Table rather than usual styles sued for web pages.
  • Write inline css for elements

If you have decided to write code for email newsletter then put these things under consideration while writing the code:

Tables or Divs:

There is no hard and fast rule to use either the table layout in emails but there are reasons where we can say that using tables in emails newsletter it is lot better to handle the layout than that of the divs.

Simple rule here is some email clients doesnot render divs well so to be very consistant in our email layout we use tables rather than using divs.

Best Practice:

Table layout is the best practice to be used while writing newsletters.

Why Tables:

Table can take set width and height that can maintain its layout for most of email clients. If   anything inside the table elements gets missed then table will maintain its layout by not allowing its layout to break.

Inline Css or External Stylesheet:

Emails doesnot respect to include an external stylesheet, if  you try to include email client detect and remove them from the code.

Only inline css could be used in email newsletters.

<p style=”color#000”></p>

So always try to include inline css with the elements ,because most of email clients remove the embedded style or anything that is before the body tag in the code.

Best Practice:

 Not to use external style sheet linked from the <head> section or

even the <style>css here…….</style> before the body section.

Javascript:

Javascript is not regarded by the email clients so it is not a good practice to try them in. Most of email clients will discard it.

Best Practice:

 Not to use javascript at all

Fonts:

While talking about the fonts to use in email newsletter, most of the time we are not ablel to use the desired font in our newsletter because some email clients does not read them at all.

This is because when you use a desktop application to open your emails then it will only showcase the fonts present within it.

Best practice here would be the safe fonts

Windows and Mac Safe Fonts:

Arial, Comic sans, Courier new, Georgia, Impact, Palatino, Tahoma, Times New Romans,

Trebuchet MS, Verdana

Adding Web Fonts in Emails Newsletter:

If you want to add desired font like any of the google font then you can use in the manner:

<head>

<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

</head>

But this approach needs back support of fonts those could make display better if web font is not supported and these are called web fonts:

Fall Back Fonts:

If webfonts are not are not read by email client then it will look for the fall back font.

p{font-family:”Lobster”, Arial, serif;}

you may clearly see in the above code that if the email client does not support Lobster font it will render Arial on the second choice and serif at the third choice. So it is the best approach to use a fall back font with the web font.

 

Best Practice:

 Use safe fonts that are well recognized and handled by the majority of email clients. Don’t think newsletters as fancier written copy rather than a well behaving copy on different clients.

Images:

Try to use well cropped images in newsletters with a set width and height and alt to adjust with the dimensions of the container of the newsletter.

If width height and alt tag is there in the code then if the image does not load then that height width and alt tag will not allow dispersing the layout of the section.

Declare BOTH height AND width parameters for images. Poor old Outlook Web Access especially needs this for your table layout to display properly.

Background Image:

Try to use ‘background’ property of table tr of td <td background=””> in place of css style because table ‘background’ property is rendered well in most of the clients.

Best Practice:

 To use well cropped images with certain width to be displayed according to the width or the container of the section or element.

What Needs to Avoid in CSS:

There are different restrictions in email clients but here are some general restrictions for css.

  • Negative Margin (margin-left=”-4px”) not supported so avoid this at all in the design.
  • Position (absolute/relative> is not supported generally so avoid this. While desiging newsletter avoid to overlay one layer over the other because it will not be possible while coding the newsletter. Outlook, Yahoo and Gmail all three donot support position property at all.
  • Text shadow is not supported so avoid this.
  • Box shadow not supported so avoid this.
  • Background=url(””) isnot supported even in Gmail most of the times so try to use < td background=””>
  • border-image is not supported in major clients so try to avoid these.
  • Opacity is not supported in Gmail and Yahoo so not to use this.
  • Hover,focus,active are not supported in major clients so try to avoid these.
  • word-wrap is not supported in Gmail and Yahoo particular.

Conclusion:

Email Newsletters are quite different than the web pages, so everything possible in webpages is not possible in Email codes. The main problem here is there are different email client from desktop to web based and now we have many device apps used to read emails. So they all have different rendering techniques for the HTML and Styles. That is why there are no standards to be followed about email codes. All we have to do is to take some precaution and remain in old fashion markup techniques when we think about newsletters. This seem little awkward in present scenario when almost every New Year or month gives us a standard framework to follow for the consistency against different platforms. But it is reality we are facing now but hope we would be able to have more freedom in writing Markup and CSS for email newsletters.