Email newsletter design tips

An email newsletter is a perfect way to stay connected with your followers and clients.

Figure out what kind of email design templates you want to send Before getting into design aspect first you should clarify what kind of newsletter you want to send whether text-based or HTML based. If going with text-based than directly think about text layout and content which you want to send. But for HTML based newsletters you have to think beyond content and layout.
Here we are discussing HTML newsletter design aspects which you have to keep in mind while designing every HTML based newsletter.
Use tables in your Layout – In today’s modern web standards this may seem a bit contradictory but e-mails are still archaic in their rendering engines, thus you have to build towards older models. Tables are the easiest way to get everything working properly among the various e-mail clients. You may also wonder why div and other block elements are not such a good idea. Most e-mail clients are built to strip away any extraneous CSS content. This means you won’t be able to use much of anything except for inline CSS. Clients such as Microsoft Outlook 2007 and Google’s Gmail have very poor support for floated elements and direct positioning.
Best to nest multiple HTML tables each other.
Fixed width positioning – Fluid elements in your newsletter need to size a few things so you should try to keep size in pixels rather than in another unit.
Working within the 600px max width limit, you can actually fit a lot of content inside. Exposure is easier if you split your layouts into two or three columns, and always write your sizes in pixels. The only exception may be to font sizes where ems can support your readers better, but em sizing will differ in similar way percentages would – so for simplicity’s sake, stick to pixel-based alignments.
c. CSS use – If you can build what you need without CSS I would recommend that path, but don’t completely shy away from CSS in e-mail designs because contrary to popular belief it is supported in most cases.

D. Anchor Links – It is sure that you have to include some links in your HTML newsletter. These could be outbound links to other web pages or links related to your website. Most footers include an unsubscribing link to opt-out from your list how you should handle all these links in your newsletter.
A neat trick is to include both inline color and an additional span tag within the anchor element. If the color and styling of your links are important to the overall design you’ll want to take the extra precaution. I’ve added a small code example below:

some link text
Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail, but personally I don’t see much benefit in the partial user experience, since the anchor selectors aren’t heavily supported I recommend just offering 2-3 link colors to use throughout your design.
As a presumption users will also expect your links to open in a new tab or window. Ideally the target=”_blank” attribute should be enough for all browsers to recognize this functionality, and the inclusion of this attribute on your anchor links shouldn’t negatively effect e-mail software such as Lotus Notes, or Outlook either.
E. Always provide a web based view – Readers won’t always be able to view your email natively always offering another version somewhere on the web will give a sense of compatibility.
F. Adding image content :- You’ll want to always set both width and height attributes on your img tags. Without these specifications in order, some clients will distort the image content. An alt tag will also prove useful, so visitors will know what the image content contains before it’s loaded.
The image align=”left” attribute will work much better, or alternatively map out exact table cells to fit your images along the top, left, or right side of your newsletter. You won’t be able to get a perfect match-up with so many clients out there (especially mobile clients), but optimize your images and keep file sizes small for best results.
What content you should write in your newsletter
Make HTML use to create a performing newsletter
Get creative with email subject line
Pic one primary call to action