Coding emails in pure HTML and CSS isn’t for the faint of heart! Don’t get discouraged, though. At the end of this tutorial, we’ll show you how you can use MJML to make your life much easier when coding for email. For now, let’s continue our deep dive into HTML and start creating your email content.
Email Coding 101: How to Use HTML, CSS, and MJML
Cookie-cutter email marketing is easy. The downside, however, is that doing things the easy way means a lot of other people are doing it that way too. You’re here because you want to do more with email coding. You have ideas. You want to take things further. You’re ready to learn some code and try out real email development
This article will provide everything you need to know about using HTML, CSS, and an email-specific coding language called Mailjet Markup Language (MJML). Use this to create one-of-a-kind emails without bothering with drag-and-drop templates that limit your creativity. It’s written for both experienced web developers and less technical email senders who might not know how to code.
HTML and CSS may be the best-known way to code, but MJML is made for coding emails. As you’ll see in this guide, there are major differences between web and email development. That’s because each email client supports different subsets of HTML and CSS properties. Since MJML was created especially for email, you can skip over these challenges without compromising full control over your email.
Building an effective HTML email template
If you’ve been building websites for long enough to remember the glory days of GeoCities and Angelfire, you probably built your first websites using tables for layouts. Building an HTML email today will take you back to those heady times, although with rather less use of the
Go ahead and stick a bookmark in this section, because you’ll want to come back to it every time you start building a new email template. We’ll cover the tips and tricks that make it possible to attain good results for as many of your—or your clients’—readers as possible.
The only client that still needs HTML tables is Outlook for Windows Desktop, so until that is deprecated, you’ll need to understand how email clients render tables, even if it is just to fallback to table layouts for Outlook.
Identify your audience’s viewing habits.
The first step in building a successful HTML email is to know how it will be read. If the subscribers are all going to be reading your email on their company Outlook email, for example, this might point you toward using plaintext.
In most cases there’ll be a mix of email clients in use, but there are a few ways to find out. Campaign Monitor publishes some overall statistics for email client usage that give a broad overview, albeit with some limitations. Or you can take a look at Litmus’ Email Market Share site.
What you’re looking for in these reports is your lowest common denominator. If there’s 30% using Lotus Notes 7, for example, you’ll need to make sure you specifically test in that client before sending. A particular version of an email client might be relevant—Outlook 2003 will cause you far fewer headaches than Outlook 2007, and in some cases, your list might only use one version.
If you’ve never sent to this list before, you might just have to test in every client you can find, and make some educated guesses about the kind of audience with which you’re dealing. Are they likely to be using mobile phones to read email, or locked-down corporate servers? Maybe they’re all individuals using Outlook.com and Yahoo addresses, which are at least easy to test in. Whatever you know about your audience, make yourself some notes about what email clients you want to check most every time you send.
It’s worth remembering that over the past few years the number of recipients reading email on their mobile devices has grown to 50% of the time. In some markets, more than 70% of emails are read on mobile. Making sure your emails are responsive will give a better client experience, especially as mobile email consumption only continues to rise.
Lean on tables—and not just for data.
Gmail, Outlook, Lotus Notes, and no doubt many more all have big issues with floated elements, and are even wildly unreliable with margins and padding. You’ll want to set up some structural HTML tables to make sure you end up with an email that at least holds together well.
1. Set widths in each cell rather than on the table.
Email clients are unreliable when it comes to deducing the correct width of a cell, so it’s safest to explicitly set one. Pixel widths are the most reliable, as using percentages can give you some wacky results, especially when using nested tables.
To set your cell padding, either set it once on the whole table with the cellpadding parameter, or use CSS to set padding in individual cells. Mixing the two is likely to cause problems, and is best avoided.
2. Nest tables for consistent spacing.
Even when margins and padding are supported by most email clients, results will be inconsistent. If the spacing is critical to you, try nesting tables inside your main table instead. It’s old school, but it’s tried-and-true.
3. Set a background color on a container table.
Some email clients will ignore a background on the tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting a bgcolor attribute on it will work around this issue.
4. Whitespace matters.
Theoretically, whitespace in HTML files should be ignored. But in practice it can cause all sorts of rendering quirks—especially if you have whitespace between table cells. Make a habit of removing any spaces between the closing tag of one cell and the opening tag of the next to avoid unsightly gaps and layout problems.
Use inline CSS.
This is where the C for cascading in CSS comes in handy. Applying a style in line gives it priority over styles further away (such as webmail client styles), and also works around the email clients that strip out CSS from the head or external CSS files.
Currently, the only major email client that strips all other types of CSS, embedded tags in the head or body, and externally linked stylesheets is the Gmail app with non-Gmail addresses (commonly referred to as GANGA).
Generate A Full-Page Email Preview
If you need a full-page preview of your HTML Email, Emailpreview.io might be just what you need. You can copy/paste HTML, or import an EML file that you’ve just received, and the tool outputs a fully rendered image of your email. You can choose the device width as well. A helpful little tool to keep nearby.
Most marketing emails include trackers in HTML email, so they can track how often, when and where customers open emails. MailTrackerBlocker acts pretty much as an ad-blocker for browsers, but works with email clients. The tool labels who is tracking customers and removes tracking pixels before they can be displayed, so you can still load all remote content and keep your behavior private. Currently only available for Apple Mail on macOS 10.11 – 11.x (shoutout to Jeremy Keith!).
When using paragraph and heading tags (p, h1, h2, etc.) you must specify your top and bottom margin settings, otherwise each email client will apply their own wildly different default margins to these elements. You also need to make sure your top and bottom margins are set to zero if you don’t want any at all, in which case you would set your heading to margin:0; . If you only want a bottom margin, you should still set the top margin to zero, e.g. margin:0 0 10px 0; .
Trusted by 000’s of agencies all over the world
They provided a first class service from start to finish, and their expert knowledge and creative input were a priceless to our project. The end result was an outstanding site, rock solid coding and a super-intuitive user experience that exceeded expectations.
We’ve used Gooey countless times, for a range of small – large projects. We are always confident leaving any kind of project in Gooey’s capable hands, knowing the work will be of high quality, coupled with an outstanding delivery/service.
Working with Gooey is a no-brainer for us. They provide the flexibility to scale our development capacity when we need to, without the headache of managing multiple freelancers. The communication throughout each project and quality of work is brilliant. They are a great team that we can rely on when we need them – highly recommended!
They’re always in touch throughout the development phase, offering advice we would not have previously considered. The whole process takes very little time and the regular communication gives us peace of mind that our jobs are always delivered on time and to budget.
We have collaborated with Gooey on a number of projects over the last 5 years and we have always been pleased with their professionalism and the quality of your work. Looking forward to working together on future projects.
Over the past 3+ years, we have always been impressed with Gooey’s capability and level of professionalism, particularly in relation to complex requirements within a brief, which are handled with recommendations and guidance to find a suitable resolution.
What we do
The HTML Email Template We’re Building
Here’s the HTML email we’ll be building, feel free to fork the pen and use it yourself. Bear in mind that when we’re viewing this template through a web browser we’re much less likely to run into problems than with email clients.
Now, as we discussed in the previous tutorial, you’ll need to begin your HTML email template with an HTML doctype, and the correct language for your subscribers. In this case we are going to use the HTML5 doctype, set our language to English with , and also include the XML and Microsoft Office namespaces (the xmlns bits). We are going to need these a few lines down, as I’ll explain.
Underneath the tag you’ll see some code between