Modern HTML Email Tutorial

Since the historical Gmail announcement, the rules of coding HTML emails changed dramatically. A new era has begun in the field of email marketing and design. The experience offered by HTML emails are getting closer and closer to what you get on the web, and the tools you can use are also getting better and better.

By publishing this post, a new era has begun at EDMdesigner as well. From now on, we will post much more technical articles on this blog. In the first several weeks, we are going to publish a series of articles which will be part of the Modern HTML Email Tutorial. Besides this tutorial, we will publish various tech heavy articles related to the email field. (Ideas for topics are welcome!)

You might ask what will happen with the marketing related posts. Well, don't worry! The previous blog posts will stay where they are, we won't delete them. On the top of that we have started a new blog which is dealing with the marketing related topics in much greater detail. You can subscribe to the newsletter of that blog below. (Be patient, we will publish the first post tomorrow!)

By this separation, we hope that everybody will get what they expect on a weekly basis. We will post very detailed articles on both blogs to satisfy both who are interested in marketing and those who would rather learn about the coding side of this field.

We will focus on email geeks, coders and CTOs on this blog. From now on, geeks write articles to geeks. Likewise, on the other blog marketers will write to marketers about the topics they are much more interested in.

So, what will you learn from this tutorial?

There are a few things that you will definitely pick up after finishing this tutorial. If you want to be efficient and good in coding HTML emails, you will have to internalize the following three skills:

Robust HTML Email Code

There are differences between how browsers render HTML, but luckily vendors are trying to stick to the standards. The end results are getting closer and closer to each other, but people are still suffering to create HTML and CSS that works properly on all of the dominant browsers.

You might think that sounds awful, but what if I told you that there are no standards in email HTML. There are several email clients and a lot of different devices that people use to check their emails. It's a very fragmented field and if you start to support some of the clients, you might lose another client, so you have to be very careful.

We will focus on supporting all of the major email clients - just like Gmail and Outlook - but we will take a closer look at the big local players as well, for example GMX or Yandex.

When you have finished this tutorial, you will know how HTML email code differs from regular web based HTML. You will be able to write a code that supports all of the major email clients.

Responsive Email Design

The majority of the people read their emails on mobile devices. More than half of the email opens are happening on smart phones. This is why it's critical to prepare your emails for different screen sizes.

The most obvious thing is to create a layout that will be displayed differently on small screens. You can imagine columns next to each other on large screens which will be stacked on mobile devices. Some parts might be hidden on desktop/mobile.

With these responsive techniques, your users won't have to zoom in and out, nor scroll to the left or right. They will only need to scroll up and down on a smartphone, which they can do with just one hand.

Layout is not the only issue that you will have to tackle. It's also crucial so that your clients can read the text blocks and it's maybe even more important that they can easily click (or tap) on the call to action buttons. These things make an email effective.

By the end of the tutorial, you will have gained relevant and actionable knowledge of all of these different aspects of responsive email design.

Reusable HTML Email Components and Patterns

The previous two skills are imperative to be a great HTML email coder, but not enough to be an effective one. You will need to think in components and patterns.

There will be basic building blocks which you will use very frequently. These are called components and they can be the building blocks of more complex components. Just think about a button that can be the part of more complex component, like a product component.

Efficiency can be significantly boosted if you memorize certain patterns. These patterns will help you to solve various problems which are similar in a certain way. The more patterns you know, the easier it will be to solve a new problem.

You will be able to identify certain patterns which you will have to use very frequently. For example, you will be able to use a layout pattern with many different components.

By the end of the course, you will have built up your own arsenal of reusable components and you will know many patterns that will help you to build HTML emails quickly and effectively.

The Topics We Will Cover in the Modern HTML Email Tutorial

In the following several weeks, we will publish the lessons of the Modern HTML Email Tutorial on a weekly basis.

We start from the very basics and our lessons will build upon each other. This means that it will be suitable for beginners, but HTML email dark mages might find our advanced topics useful as well.

The basic concept we follow is that we show you the basics of site building, and then we will discuss the differences between classic web based HTML and HTML emails.

The topics might change in the meantime. If they do, we will update this list.

Once you finish this tutorial, you will have learnt the fundamentals of coding modern HTML emails.

The Basics of Classic Site-Building

In this lecture you will learn about the fundamentals of site-building.

These are standard solutions which you might encounter while you are editing the HTML and CSS of a web site.

You will learn patterns which will help you to create complex layouts easily. You will start to formulate your own set of patterns which you can use as a library. It means that building static HTML sites won't be a problem for you anymore.

Responsive Techniques in Classic HTML

Being prepared for different screen sizes is one of the most important things in modern HTML.

This lesson focuses on media queries, a technology which helps you to adopt your web page to various device widths.

You will enhance the patterns you have learnt in the previous lesson. Some of them might be changed to make sure that everything will look nice on different screen sizes.

The Basics of Modern HTML Emails

Creating HTML pages which you publish on the web might be tricky. There are differences between browsers although they try to follow the standards.

In email HTML, there are no standards. You will have to use some pre-historic techniques to make it sure that your email looks pretty on most of the email clients.

In this lesson, we will take a close look at the patterns we have learnt in the first lesson and we will check out what will and what won't work on certain email clients.

Beware! This lesson will be extremely painful!

Responsive Techniques in Modern HTML Emails

Using media queries is the fundamental technique to make your email responsive for different screen sizes.

Although there are many email clients that don't support media queries, since the famous Gmail announcement we can use it more widely.

This lesson will show you what we can use from the second lesson and what we have to do differently. It will also show you interesting techniques, which were extremely useful before the Gmail update, but they are becoming less and less relevant.

Images and Videos in Modern HTML Emails

Nice looking images, GIFs and videos will make your email more enticing, but you have to know the limitations.

This article walks you through the most important issues which you might encounter when you use media in your emails. You will be surprised how many issues you can encounter related to images in different email clients.

Paddings, Margins and Borders in Modern HTML Emails

Setting spacing and borders properly can make your email design pretty, but if you don't use them wisely, it might also ruin your readers' experience.

Surprisingly, there are many problems related to these basic things. Not only technologically (for example a certain email client won't render something correctly), but also theoretically. You have to think about the different layouts and screen sizes as well if you use borders, paddings and margin.

Bulletproof Buttons in Modern HTML Emails

The final goal of an HTML email is conversion. The best way to convert your readers is to create clearly visible call to action buttons.

If your buttons are not clickable on certain devices or email clients, that can ruin your campaign and your day as a professional as well.

It occurred to us that our so called bulletproof buttons were not clickable on two very new and fancy email clients. What a shame it was! Especially because we made a campaign to our friends' startup, and most of their clients used programs mentioned before.

Typography in Modern HTML Emails

By using nice fonts, your emails can look very nice. It's obvious that picking the appropriate font can enhance the experience.

Unfortunately in the email world, you don't have as much freedom as you do on the web. Anyways, let your readers with modern email clients enjoy your hand picked beautiful font families.

Tabular Data in Modern HTML Emails

It's often needed to show data in a tabular format. Just think about a summary email of your order with the name of the products, their prices, and the total amount of money you will have to pay.

Displaying tabular data on a large screen is not an issue, but how can we do it properly on mobile devices?...

Interactive Emails

By adding interactive features to your email, you can boost the user experience a lot. These interactions will give your users the wow effect.

In this article, you will learn which techniques are viable on certain email clients.

Quality Testing of HTML Emails

Testing the quality of your emails is one of the most important things in this field.

You have to make sure that your email will look pretty on various email clients, especially on those which are predominantly used by your clients.

Summary

A new era has begun at EDMdesigner. From now on, this blog will be a tech blog, and the marketing blog posts will be published at blog.chamaileon.io.

We hope that both sides - marketers and coders - will find our weekly topics more relevant and interesting this way.

In the first several weeks, we will publish the lessons of the Modern HTML Email Tutorial. Later, we will also put out interesting posts from our engineering team about various topics. Some of these are articles which we created for in-house use, but we found that they might also be very, very interesting for the public.

This tutorial focuses on how you can learn three very important skills:

The first is being able to code robust HTML emails, which means that your emails will look pretty on most of the email clients and devices.

The second is that you will be able to design and implement responsive emails.

And the third is that you will be able to think in patterns and components, which will help you to be extremely effective.

The tutorial starts from the very basics of site building. The lessons are building upon each other, so it's suitable for beginners. For pros, it might be interesting to see how I think about coding modern HTML emails in 2016/2017.