As I was scrolling through the depths of Facebook over the weekend, I stumbled upon a fellow designer’s post cursing HTML emails, their lack of divs, and their inconsistency across email clients. After exchanging a few comments on the issue, and doing some research, I found this to be a very common complaint among web designers. In an attempt to alleviate some stress throughout the design community, I have decided to compile a list of some basic guidelines for designing HTML emails.
Keep It Simple Stupid!
In my opinion, the reason most designers despise HTML emails is because they have created an overcomplicated design that then becomes a nightmare to implement. I completely understand the urge to add background images, and JavaScript and all the bells and whistles you would add on a normal website, but please, resist. Take a step back and think, “What is this background image really adding to this email?” In reality, it is most likely not necessary. Instead of attempting to force elements into your design to prove your “rock star-designer-status”, make your life easier and keep your design simple. Use background colors instead of images and never include JavaScript.
Design Around Content, Not the Other Way Around
Some designers have a bad habit of creating a layout that only works with a certain amount of content. This is really only efficient if you are creating a one-time email blast. However, if you are designing something that will be sent out on a regular basis, a monthly e-newsletter for example, the size of your content will often vary. Let’s take a project that is, of course, very near and dear to my heart: the revamp of our own Optimum7 Monthly Newsletter.
Before:
After:
The content in our monthly Optimum7 newsletter consists of informative articles about Search Engine Optimization, Internet Marketing, Design, Programming, Social Media, Paid Search, Copywriting, and Current Events. These articles vary in length, as do their titles, the featured images, etc. However, since I understood the purpose of the project, and the content that would be used, I was able to design a flexible layout that will stand the test of time. I am able to add the first paragraph-long or short- from each article and the design does not get thrown off. However, if I had taken an approach that is similar to the recently popular Pinterest 3-column layout, the user may have become distracted by the articles thrown together every which way and images of varying sizes. Instead, I used one column, with consistent “Read More” buttons. I also made the images a consistent width, so virtually any image will fit into the article section without becoming distracting.
What Should Your Newsletter Link To?
What your newsletter links to will depend on its purpose and content. In Optimum7’s case, we aim to spread awareness on current events in the vast world of Internet marketing, spread awareness of our brand, and ultimately showcase our services to potential clients. So it makes sense for our newsletter to link to our corresponding articles, our homepage, and our contact us page. In addition, I felt that an important feature to add to the newsletter was authorship links. All of our articles are written by the Optimum7 staff and focus on recent experiences and application. Before, there was no indication of who wrote the article and no way to connect with them directly via the newsletter. Now, each article includes a byline within the newsletter, which links to the corresponding author page. On that page, recipients of the newsletter can learn more about the author, read the author’s past articles, and contact them. The point is to allow the user a stronger, more human connection with the brand and to demonstrate the expertise of the various Optimum7 staff members.
Some other links that your newsletter should include are social media icons and specific calls to action. On the original Optimum7 Newsletter, the main call to action was in the left column. This was effective because it is above the fold, however, once the user scrolls down to read the third or fourth article, the button is no longer visible. On the new version, I have included two main call-to-action buttons, and one secondary call-to-action. There is a button at the top of the page, one after the first three articles, and then a smaller call to action in the footer. In essence, there is always a call to action within the user’s view.
In addition, be sure to include an unsubscribe link, an option to view the email in a browser, and a link to allow the user to forward the newsletter to a friend. All of these links add to the user friendliness of the design. The last thing you want to do is frustrate your users. Once a user unsubscribes, it is unlikely that they will come back to your newsletter so you need to do everything possible to prevent this from happening.
A word of warning: be careful of ads in your newsletters. Your users are more likely to read and click if they feel they are receiving valuable information in their inbox. A user who feels they are being cornered with a tawdry sale is more likely to unsubscribe.
Coding With Templates
Now that you have a beautifully flexible layout for your email newsletter, it’s time for the dirty work: coding an HTML email. While you can create a newsletter from scratch, you may want to save yourself some time and frustration and use a template as a base. MailChimp has put together a gallery of 36 basic, flexible templates to assist you. Simply download a template with the desired structure, and work from there. Keep in mind that these templates are not intended for novices. You will need knowledge of HTML and CSS, however, for those of you who have that knowledge, these templates are a great resource.
Some Quick Tips
As I stated earlier, HTML emails are infamous for their inconsistency. If you’d like to keep your sanity throughout the process, you need to have the following mindset: It is not a matter of if your HTML email will break but when and how. It is highly unlikely that your design will work across the board on every email client with absolutely no issues. For example, your email may look great in Outlook, but for some reason all of your links are blue in Gmail. This is because Gmail forcibly changes links in black to blue. Luckily, there are two fixes for this:
or
Inconsistency in styling your HTML email is going to be one of your major problems. To alleviate this problem, be forceful with your styling. For example, if you are styling H1s as you normally do, add a span tag to reinforce your styles. See below for reference.
In addition, it is important to note that email clients typically strip HTML emails of their HTML and body tags. To work around this, set a table wrapper to 100% width and use it the same as you would use the HTML/body tags. After setting your table wrapper to 100%, you can then set a wrapper within that to 600px, the recommended width for HTML emails.
When creating your newsletter, be sure to utilize alt tags. When a reader first receives your newsletter, it is most likely that the remote images will not be displayed. In addition, in a worst-case scenario where the images are unable to be displayed, your recipients will at least be able to view the descriptive text instead of the images.
Content
Although many people don’t consider “content” to be under the design umbrella, I disagree. I think these two should work hand in hand. To create an effective newsletter, your design has to be elegant and your content must be engaging. I would suggest a strong introduction, perhaps from your CEO, that greets the email recipients and explains a little bit about the company, or discusses notable recent projects. Next, high quality content. As with all things Internet marketing, content is king. If the information in your newsletter is junk, it will be seen and marked as junk by the recipient- literally. Finally, finish up your newsletter with a call-to-action or an offer in the footer.
Tracking and Testing
As always, tracking and analysis is a huge part of the design process. If you are using a third party email delivery service like MailChimp or Campaign Monitor, tracking is a breeze. You can narrow results, compare how many emails were opened and clicked month to month, etc. similar to Google Analytics. For example, we rolled out our new Optimum7 Monthly Newsletter on Wednesday, October 8 and I have already seen an increase in clicks when compared to the first 7 months of this year. While I am happy with these initial results, I do understand that there is truly not enough data to make any real conclusions. The next few months will consist of gathering more information, analyzing the results and testing different aspects of the newsletter to see what works best and what can be removed. Just like any other design project, my work is never really done. Instead, I will continually be re-evaluating the layout and creating new solutions to adapt to an ever-changing audience.
Seeking an experienced designer to help revamp your e-newsletter or website? Optimum7 designers are entirely devoted to conversions and above all, real results. Contact Us for an initial, no obligation consultation. We can help!
