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.
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.
Text size
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!
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:
<!–preheader text–>
<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!