he process of creating and sending a newsletter is much easier than one might think, but designing a custom template and build your own code - this may take a little longer.
We have compiled some great tips to get the design HTML newsletters quality like never before. Even if you are a novice in the subject will surely find some valuable information to begin the process of e-mail marketing.
Objectives of a newsletter
Before entering the design aspects we should clarify its intent to build a newsletter. Depending on the type of website you run, the information in your newsletter can vary dramatically from the others, but the primary purpose of a newsletter is to provide convenient updates right to your Inbox for your reader.
Regular Internet users are likely to check their email more than twice a day. Even those who are constantly busy will take the time to go through your posts at least once a day. This is the perfect place to grab attention, even without visits to your site now. Even if no one is accessing your links, information is being received, which is ideal for building a brand.
Consider some of the issues that would have to offer in their design. Are you including links to register for the service; Blog links possibly, or more recently published articles on your site? Design your newsletter to reflect how you want your readers to respond, but ultimately it aims to promote interest and pass around some interesting tidbits of information for the masses.
1. Use the tables in their designs
This may seem a bit contradictory to modern web standards of today, but emails are still archaic in their rendering engines, so you have to build to older models. Unfortunately tables are the easiest way to get everything working properly between different email clients. Depending on your knowledge of the construction of table-based designs, this reality could come as good news!
You may also wonder why the div block elements and others are not so good idea. Most email clients are built to shed any weird CSS content. This means you will not be able to use much of anything except for online providers (and even full support is poor). Clients such as Microsoft Outlook 2007 and Gmail from Google have little support for floating bodies and direct positioning.
The best solution would be to nest multiple tables within. The padding and margins are not adjusted to a particular scale and many email clients. This is one reason to stick to use width = "value" in its cellular elements of the table. They always show the same width no matter which email client of your readers are using, so it's much safer and more coherent set padding and margins using empty tables cells.
2. Positioning fixed width
You have some options in building design projects newsletter, however, the best option to take is to set fixed widths for the table that contains. There are many varying monitor resolutions - you will not be able to please everyone. If you do not have static widths particular elements, you can always use width = "100%" in your table that contains. This will allow your content to fill the entire width of all email clients.
However, for many this method is a little too loose. Newsletters constructive require a fixed width in most cases, especially if you plan to use banners and images set to a particular size. I recommend working with 500px - 600px maximum width of the document. The horizontal screen size of the iPhone and some BlackBerry models are limited to 320px by 500px so even in your email template will be reduced to fit properly.
Given that many mobile users choose to view the email without HTML anyway, this should not be a big problem. Users of desktop clients and webmail likely experience a similar configuration, regardless of operating system they use. When in doubt create a template designs and choose the ones you like!
3. Pixel Units
Unless you plan to use the elements of the fluid in your newsletter you probably have to size some things. Try to keep it in pixels (px), more than any other type of unit. Percentages may easily be confused with the many customers webmail and windows software. With fewer page elements, fluid designs can emerge unscathed, though with some errors.
But pixels are always a sure thing. Working within the 600px width limit max, you can actually fit a lot of content inside. The exhibition is easier if you split your designs in two or three columns, and always write your sizes in pixels. The only exception may be the font sizes where EMS can not support their better readers, but differ em similarly sized percentages - so for the sake of simplicity, stick to the pixel-based alignments.
4. The possibilities with CSS
It may seem that the email design is to destroy using CSS styles. Although there are a lot of unsupported functions, CSS is still perfectly acceptable in many cases. Campaign Monitor has a beautiful table supported CSS properties listed email client. All basic support such as font-family and font-style concepts, so you can ignore the <font> tag if desired.
Be careful about your font styles to not push the limits too far. If you are uncomfortable with inline styles, it is always possible to use the HTML font tag though has been deprecated. If you're a CSS designer, you do not have to leave the system, but any abbreviated CSS coding can lead to faulty designs. For example the font: 12px / 14px Arial, sans-serif; Shorthand can save a lot of space, but is not fully accepted in the design of email, even when used with inline styles.
Even your color choices should be written out longhand. Hex Color as #ccc or # E3F must be written in full as #cccccc or # ee33ff respectively. If you can build what you need without CSS I recommend that path, but does not completely shy away from CSS email designs that contrary to popular belief that it is compatible with the majority of cases.
5. Anchor Links Best Practices
You probably want to include some links in your newsletter. These could be the outgoing links to other pages on the web, or maybe links that lead to the most popular pages to this website. Moreover, most of the footnotes contain a link to unsubscribe to your readers to opt for the process e-mail, but how should handle all these links in your design?
Well, it should be noted first that the email clients are very picky about their designs. Many will choose to overwrite your link styles, even CSS online. A good trick is to include both color and line and additional span tag inside the anchor element. If the color and style of your links are important to the overall design you'll want to take extra caution. I added a small code example below:
Hover effects not supported in Outlook 2007/2010, Gmail, iOS or Android. You can still include the style of: hover for all clients support: 2000/2003 Outlook, Hotmail, Apple Mail and Yahoo! Mail, but I personally do not see much benefit in partial user experience, since no anchor selectors are strongly supported recommend only offer 2-3 link colors used throughout the design.
As a presumption users also expect their links open in a new tab or window. Ideally, the target = "_ blank" attribute should be enough for all browsers recognize this functionality, and the inclusion of this attribute in your anchor links should not jeopardize email software such as Lotus Notes, or as Outlook either.
6. Test all major clients
A recent study of the most popular email clients (made by Campaign Monitor) shows ten of the most popular clients email in the last year. It may seem a bit tedious, but designers should get into the habit of reviewing your newsletters in all major email clients, at least in some of the most common clients such as Gmail, Hotmail or Yahoo! Mail.
This does not include webmail only, but the software also runs on both Mac OS X and Windows. Also according to your diagram mailing iOS and Android have shot both in the top 10 in recent years. In fact the iPhone, iPod Touch and iPad Mail ranks # 2 most popular Outlook right on! Unfortunately there is no way to prove this without owning one device - so you'll have to settle for other options.
An error with mobile stand comes in many models of iPhone and Android. Mobile email provision often resize the text in your template. This may not affect the design very much, but can be annoying to some readers. Using the CSS -webkit-text-size-adjust: none;, will ensure default text size, even throughout all the parsing engine without a try.
If you know friends or coworkers who use alternative software, you may want to ask for your help in testing the newsletter. You can send a copy of the email to check on your device or borrow the equipment out actively clear coding errors. Luckily Outlook offers a Mac version to install so you do not have to locate a Windows user for these optimizations, but when it comes to Lotus Notes or Windows Mail, you may be out of luck.
The alternative is to pay for a solution as my E-mail Preview, unfortunately, do not provide any free demo accounts, but their service is well known for offering fabulous views prior to its design. Email acid is a similar service that does offer a free account, but does not allow you to test on all clients, which kind of defeats the purpose. Representation services online should be useful if you need to test many newsletter templates in the long run without the use of alternative equipment, however, are not critical, so do not stress if you can not test everyone!
7. Always offer Web-based views
Readers will not always be able (or willing) to see your email natively. Offering another version somewhere on the web will give you a sense of ease and compatibility. This process can not be fully automated unless you are looking to include a plain text version.
Thus, would strip all HTML tags design newsletter. You would not be able to include links or styles for anything. All content is presented simply as a plain text file for readers without rendering capabilities. This is certainly a good alternative, but they offer a full web version of the newsletter that removes the damage caused by any misrepresentation. Most readers will be running a web browser until the day you can style and build your newsletter on and for perfection.
How do you set the page is entirely your decision. Some websites dedicated blog a post all to double the content of the email, perhaps with some additional information. Others will create a separate page on the main website without direct links in the navigation bar. This method can be beneficial because readers are not distracted by their primary content website template or sidebar.
8. Adding image content
Images are another reason to offer its readers a web-based solution. By default, the email clients are configured to strip images from the contents. If your address is added to a safe list, all images are displayed by default, but the user has to accept this configuration so it is certainly not a guarantee. Just make sure that the images are not required as part of the main content, but included as extra padding for aesthetics page.
Once you get to exporters graphics are some tips to building images specifically for email. You always want to set the width and height attributes in img tags. Without these specifications in order, some clients will distort the image content. An alt tag is also useful for visitors to know what is in the content of the image before it is loaded.
As mentioned above, the positioning of images in your email can be tricky. Avoid at all costs floats! The attribute align = "left" image will work much better, or, alternatively, an exact map of cells in tables to meet your images at the top, left, or right of your newsletter. You will not be able to get a perfect match-up with so many customers out there (especially mobile clients), but optimizing your images and maintain small file size for best results.
As for image storage, it is recommended that you keep all the files on your own web server. This is the best option instead of using another host of images or by uploading files to an online news service. Also you should separate the content of your newsletters, away from the rest of the images in a folder structure like this / img / mail or / img / email / 2011.
9. Avoid the Spam folder!
This may be hard to hear, but not all email clients are friendly towards newsletters. There are billions of emails sent every day and most contain spam or malicious content, so having these safety measures incorporated into the inbox is clearly the safety precautions.
However when it comes to internet marketing, you can easily be discouraged to see their latest newsletter ending away. To reduce the chances of this happening you should clean your design for simplicity. No images or make annoying popping their title text with hundreds of keywords.
Also, try to keep your content brief and on-topic. It is not necessary to include the full content of all articles or pages. Try adding one or two sentences with an alternate link out of your website instead of a long list. The shorter your email looks, the more likely it will pass inspection spam.
