When I started to design newsletters around a year ago, I knew practically nothing about this topic. Newsletters were these things which I would receive in my inbox, right? Next to my coworkers, who did App design or re-thought the concept of our website I didn’t seem to have an important position.
Since I had never worked with code before and wanted to get an easy entrance into the topic, I was still satisfied. To my surprise I learned that newsletters are not that boring and unchallenging, rather the contrary was true.
It is possible to make absolutely beautiful things if you have love to detail and the patience to make new design concepts work in every email client.
For starters I only want to talk about 4 tips, which I see as a basis before digging deeper into the actual design.
Don’t use nothing but images images
It seems like the simplest solution – you don’t have to worry about fonts and tables and all that mad stuff, but effectively it’s not. One problem is that by making your newsletters nothing but (or an overwhelming amount) pictures, it is more likely to receive a higher spam rating. Once you are in that category it is quite hard to get out, meaning a huge junk of your audience won’t be reached anymore.
Another problem is, that some clients will not display images by default and the user has to manually allow showing them. If your email is purely image based, the user will not receive any information about it’s content and is much more likely to just hit delete without reading it.
Image alt text
When you do use images give them a description with the alt-tag. This text will be displayed if the picture cannot be shown or is deactivated and gives the user information what he would see there. It is also important for disabled (for example blind) readers, as the alt-description will be treated as text and read to them out loud through a machine.
An example for an alt tag would be:
<img src=„blog-image.jpg” alt=„Newsletter – 4 tips to get started“>
Of course it’s best to make the alt-text relevant to what is shown in the image.
Choose a text size which makes it easily readable for people. (So no size 10px in light grey, please!)
Mentioned in the Litmus conference was that for copy text standard size is around 14px, but that also depends on what kind of font you are using.
It is easier to navigate through an email if you use a clear hierarchy, which means the same size for headlines, sub-headlines, copy text and footnotes.
For example H1 (headlines) are always 24px, H2 (subheadlines) always 18px or 16px, copy text 14px and footnotes 12px.
Subject line and Pre-header
I believe you all know what a subject line is, but just in case: It’s like an introduction to your email and appears behind the email name.
The pre-header is the summary text, that follows right after the subject line. If you don’t define it, whatever you wrote as the first sentence in the email will be displayed. But why not take the opportunity to control what’ll be displayed?
It’s a great chance to give the user information about the contents and make him interested in opening your newsletter.
At this point, I want to stress just one thing: Regardless of what you see on other infographics or posts, using deceiving copy will not give you the results you want!
Don’t pretend that the other person „just won an iPad“ or will see „great kitten images“, when you want to sell him a product about plant medicine.
Sure, your open-rate might be great – for once!
Once the person discovers the lie, you will most likely be handled as spam and never appear in their inbox again.
Also, very often email clients automatically read these lines and automatically mark you as spam on their own.
I think, the better option is to just be honest and give a useful first line about the contents of your email.
But how do you write the pre-header?
This is an example from one of my newsletters:
<p class=”preheader” style=”Margin: 0; color: #f4f4f4; display: none; font-family: Noto Sans, Tahoma, Verdana, sans-serif; font-size: 1px; font-weight: normal; line-height: 1px; margin: 0; padding: 0; text-align: left;”>Are you in Rio for the Olympics? You should visit this breathtaking places</p>
<!–preheader text end–>
As you can see, we put the text in the smallest font-size, so it’s not visible in the email itself. Of course you are free to style it however you like.
So that’s it.
I hope these 4 tips were a useful start .
See you next time!