One of my duties as graphic design coordinator at Oracal USA was the creation of email newsletters. The design that accompanies this post is the newsletter design I created and was the basis for future newsletter designs.
Here are some insights into the creation of this design.
Trial and error: There are so many good resources for design inspiration on the Internet. While some designs are incredibly beautiful, they aren’t always the most functional. For example, what happens if someone decides to not allow images to download? How will the design hold up? According to Mathew Patterson, author of “Create Stunning HTML Email That Just Works!” some research indicates up to 40% of email recipients never enable images at all. In our template design, I made sure to make good use of the ALT tag just to be safe. Incidentally, Patterson’s book proved a valuable resource.
Keep it modular: Although I’ll be the primary designer of our email campaigns, one important consideration was to make sure others could easily adapt the design if they are called upon to design a newsletter. The top item is reserved for the featured story or product. It’s important to design this in such a way that enough of the content of this item is seen in the email browser window to give the recipient enough information before deciding whether to read. The rest of the design is “pancaked,” with subsequent news layered in descending order of importance. As you can see, this area can be divided using an image, or the table cell can function as a large text block.
Matching header and footer: The design is given cohesion through a similarly styled header and footer. This was achieved most notably through use of background and text color. I also felt it important to give readers one extra chance to click through to our website, so I included links to some of our more popular website features.
- The feature area was created in Photoshop.
- The template was coded in Notepad and in Dreamweaver CS5.
- The design was tested in a variety of email clients to ensure we reached as many recipients as possible.
- The call to action was immensely successful. I can’t divulge too many details, but we were busy for about a week filling requests.
- The template also is used in other emedia pieces, but in those pieces, the header is red (gray is reserved only for our official company newsletter), making the design adaptable to other needs while allowing for distinct differentiation.
- The template was coded using HTML tables (and nested (nested tables)) and inline CSS.
As always, your considerate questions and feedback are welcome.