Designing & Coding an email newsletter is more tricky than you may think, but takes the same basic principles as if you were designing a website. As a matter of fact, an email newsletter is actually just a web page built to the most strict of standards, with several restrictions.

Why So Many Restrictions?

A web designer must make sure the website they’re creating works in all versions of Internet Explorer, Firefox, Safari, Opera, Chrome, mobile devices, etc. A web page can call upon other support documents for things like styling and functions.

An email newsletter must be coded for all the email servers worldwide: Gmail, Hotmail, AOL, Yahoo!, Microsoft Outlook, Mac Mail, Thunderbird, and all the other email clients people use. As you can guess, this means many additional restrictions as each of those clients read through code a different way. For example; some allow for hidden code to be applied in the header of the document calling text styles and such, and some do not.

What’s the Basics?

As a guide created for a particular group of individuals, we will assume you are in the business of designing these for the purpose of having Opuscule or some other firm code them.

Dimensions: While the height can be anything you desire, the width should be set somewhere between 400px and 750px.

Content: It needs to be concise, visually pleasing, easy to read and even easier to follow.

Design: Everything on your email newsletter needs to be web safe, including colors and fonts. You cannot have an image as a background, it must be a solid color.

Let’s talk a little more about these!

Email Newsletter Dimensions

Your email newsletter needs to be readable on everyone’s monitor, whether that is on their iPhone, their Outlook or their Yahoo! inbox. That being the case, the most common monitor resolution is 1024px. Take into account those people usually have other windows open and a sidebar on their email viewing screen that can be 300px wide. The last thing you want them having to do is scroll left and right to read your content. My recommendation is between 500px and 650px.

The width restriction might be more than you accounted for, but there is no height restriction.

Email Newsletter Content

As mentioned above the content of your email newsletter needs to be many things: concise, visually pleasing, easy to read and easier to follow. If your email newsletter will contain many stories, it may be best to show a title, an excerpt or teaser text, and a link to read more for each story. Often times the goal is to draw people to your website, where the real content is.

When writing content for an email newsletter I always consider that I have chosen to “bother” my subscribers with this information; the same people who usually get dozens, if not hundreds of emails per day. So it better do at least two things: grab their attention and not waste their time. I add pictures, graphics and links to the content to help the reader absorb it.

Email Newsletter Design

Here’s the hardest part, design! To start, everything must be web safe, including the font and colors. A list of web safe fonts are below, there are a few more, but these are the safest ones…

• Arial
• Comic Sans
• Courier
• Georgia
• Helvetica
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

When it comes to web safe colors, you may notice that in Photoshop there is a color palate set special for web safe. This particular setting as what you find in the “Color Picker” is too limited, being for older versions of Internet Explorer. There is no need to use this setting as it is generally more restrictive than you will need.

Doing “Save for Web” as shown on the image to the right is the best balance of saving an image with web safe colors. Through this feature you can choose to save the image as a gif, png with transparency, and jpg with line progression and quality settings.

Additionally, *** no background images *** this is very important. There are TWO basic restrictions as far as background images go. The first being that you cannot have editable HTML text or pictures over a background image. If you want to have editable text, it must be over a solid color.

And secondly, in normal web design small images are usually used in repetitive ways to create illusions based on subjective dimensions. Drop shadows are created, for example, by using a small image (maybe 60px wide by 3px tall) that is repeated, or stacked down the left and right hand sides of a page as a background image. So no matter how tall the page, this will always work.

Email newsletters do not allow for this either because it is a background image.

The example above calls for background images that create a drop shadow effect and fluctuate based on how much content there is or how large a person’s monitor is. If you knew how big you wanted the box to be and that box needs a drop shadow, and will not fluctuate in size (as the image example is above) making that is fine for a web programmer.

Two last thoughts about text over images:

*** If you want to use an image as a background, you can embed the text and compress it all together as an image, this is fine.

*** Also, this background image stuff is mostly for Outlook and Gmail. If you know all your recipients will be using something other than those two, like, if everyone receiving the email newsletter will be using Mac Mail – background images are acceptable.

What the Hell are you Talking About?

This seems like a lot of things to consider, but once you’ve got the hang of it we can work together to create magic. Then when Outlook and Gmail ever pull their acts together, we can revisit this and create beautiful magic.

If you have questions about designing or coding an email newsletter, contact an experienced New York web design company to discuss your marketing needs. We are here to help!