This email marketing tutorial looks at best practices in designing your email newsletters; like websites, these are enslaved by the software used to read them. Email subscribers will typically read your email newsletters either in a web browser, by using a third party webmail service provider, or the webmail extension of their hosting account, or inside an email program like Outlook Express or Windows Mail.
Knowledge of this fact should guide the way you design the layout of your newsletter. This tutorial does not teach the technical process of designing your newsletter; rather, it focuses on layout conventions and limitations to keep in mind (like screen real estate constraints).
Over 9 out of 10 Internet users have a screen resolution (what is screen resolution?) of at least 1024 pixels. With constantly falling costs of computer monitors (displays), the small remaining portion of users is rapidly diminishing.
But not all pixels are available for your newsletter; there are different ways your subscribers can read their emails. In all cases, you should only allocate a limited maximum width to your newsletter. (The choice between fixed vs. liquid layouts are discussed in the next section.)
Some users read their emails using an email client (like Outlook or Thunderbird); like all graphical email applications, a large part of screen real estate is occupied by folder panes, calendar and tasks, etc. belonging to the email program. While the available screen width ultimately depends on user preferences (folder panes can be resized), you can safely assume that 30-50% of the 1024 pixel-width we started with are unavailable. Planning for the worst, predictable case scenario, your marketing emails should be at most 500 pixels wide. Additional white-space on either side of the newsletter's virtual container doesn't hurt. On the contrary, it often tends to make your newsletter feel less "busy."
The second group of users read their emails from their web browser, using a webmail service (like Hotmail, Yahoo! Mail, or GMail). Our previous reasoning still holds true, perhaps even more, since the interface of webmail client is (with the notable exception of the new Yahoo! Mail) not as flexible or customizable as that of desktop email applications (like Outlook Express, Windows Mail, and others.)
The same controversial choice surrounds the design of email newsletters as websites. HTML and CSS, the languages used to design web pages, can accommodate two types of layouts: fixed layouts, or liquid layouts.
Fixed layouts take their name from their fixed-width: regardless of users' screen resolution, the content's virtual container is of a immutable size. A fixed layout larger than the containing window will cause a horizontal scrollbar to appear (a "horizontal overflow"). A fixed layout smaller than the available width will float in white-space (ideally centered, rather than crammed on the left or right flank of its parent container.)
Forcing the appearance of a horizontal scrollbar should be avoided wherever possible; on the other hand, a well managed floating container isn't distraction in many cases: in fact, it often helps your content "breathe."
Liquid layouts (who go by many names, including "variable-width layouts"), take advantage of all or most of the available screen real estate, be it inside an email client, or in a webmail service browser window.
Most often, for technical reasons, you will not be able to control the maximum width your newsletter should occupy: rendering engines of the most popular email programs do not support some layout technologies (like CSS) that could determine a maximum width; the alternative, feasible for web pages, is to use scripting (like JavaScript). But for security reasons, all graphical email programs have JavaScript support turned off by default; other email clients do not even support JavaScript.
Given what we just said, you should already be convinced that designing your marketing email newsletters should be done with a fixed-width layout. But there is yet another reason, which touches on "usability." Reading anything on computer screens (which are backlit) puts a strain on the eye; this strain is sufficiently annoying to explain the stagnant success of "e-books". This being said, there are several things you can do to make your content nicer to read on screen; one way is to use a fixed layout, that limits the length of each line, and makes it easier for the eyes to read one paragraph in a go. (Other usability techniques to improve the success of email marketing are discussed in a later tutorial.)