How To Code A Responsive Email The Right Way
Emails employ the same set of languages used for traditional web pages: HTML and CSS. So, coding and designing responsive emails must be a similar experience, right? Not quite. Sure, the underlying structure is very similar, but responsive email design introduces some concepts that both beginner and experienced email designers should pay attention to.
What Is Responsive Email Design?
In a nutshell, responsive email design is a technique that allows emails to be viewed in various implementations throughout screens of different sizes. A responsive design, in theory, looks as good on a wall-sized TV as it does on your phone, and offers similar functionality on both. All the buttons and design assets should stay in place.
Responsive design in itself isn’t anything new. It’s a concept that’s been around ever since the very first smartphones (which had dedicated email clients). However, it grew over time to become the norm. Today, you usually start from designing the mobile version, and then expand onto the desktop version. It’s a much more efficient way of handling things.
3 Key Concepts You Must Pay Attention To
There are three core ideas that you have to master in email design: concept, usability, and implementation. The first one relates to branding, color schemes, and other design assets used by the company or organization. The second is about portability, and the third one is about implementing the code in a way that’s specifically catered to the typical email viewport.
1. Start by Sketching Out the Design
Before you even start coding, you want to visualize the design. This can be done via Photoshop, Adobe XD, Affinity or Sketch (among other programs). You want to get a general idea of what the email will look like on both mobile and desktop devices before you start implementing the code. Less is more when it comes to email design.
2. Know Email Design Limitations
There are plenty of limitations in email design. For example, linking to external stylesheets isn’t considered a best practice due to incompatibilities between email clients. The same goes for frameworks and libraries — they cannot be used to code an email. You’re left with good old HTML and inline CSS. Be creative with it!
3. Keep The Implementation Simple
The more features you add to an email, the more likely it is that it’s going to break on some email clients. In email design, less is more. Keep things simple and you’ll minimize the risks of not reaching your target audience. For example, you shouldn’t use custom fonts, and you definitely shouldn’t add too many moving parts.
How Do You Code Responsive Email?
For this specific purpose, we’re going to assume that you already know what HTML and CSS are and that you can work with them freely. Creating your own responsive template is a great way to make your newsletter or your promotional email more captivating for the end-user, fine-tuning it to the specific style and branding of your company or organization.
Starting at a high level, you want your email to be “fluid,” meaning that you want it to resize correctly throughout mobile and desktop email clients. In order to do that, you have to create the skeleton of your HTML structure correctly. This includes default implementations such as setting the viewport’s scalability in the head section, and using the CSS @media query:
<head>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;”><title>Page title</title>
<style type=”text/css”>
@media screen and (max-width: 630px) {}
</style></head>
<body style=”padding:0; margin:0">
</body>
</html>
A few things to note here. Our skeleton tells our HTML page to scale the width of the email based on the device’s width, but it also says that it should maintain a 1:1 ratio between initial scale and maximum scale, meaning that it will keep expanding when you make the window larger. Or, if you make the window smaller instead, the design will contract when you make the window smaller.
In the <style> tag, the @media query tells us what the maximum width of the HTML page for screens should be. That way, the email elements will never overflow and make it hard to see the whole picture. If you’re used to receiving newsletters in your inbox, you know what we mean. Most newsletters have a column-like design that is derived from this specific setting.
NOTE: In responsive email design, CSS isn’t used externally. If you’re used to traditional web design, you might also be used to linking CSS files with the <link> tag, but you don’t do that here. Instead, you add CSS either in the head section for general-purpose settings, or directly inline, as you can see from the styles found in the <body> tag.
What To Add in The Body of Your Responsive Email
After you created the skeleton, you want to start putting some things into the body of your email. In order to do that, things need separation. In traditional web design, Bootstrap is usually the way to go for this. In email design, the concept is very similar, but you simply use HTML tables, with a few tweaks here and there:
<table border=”0" cellpadding=”0" cellspacing=”0" style=”margin: 0; padding: 0" width=”100%”>
<tr>
<td align=”center” valign=”top”></td>
</tr>
</table>
Then, depending on your needs, you might want to do some magic in the <head> of your email. We won’t go through each setting that you can include, but if you want your email to work correctly across various email clients, you have to pay attention to their features. In fact, the reason why we don’t do external CSS linking is that some clients do not support it.
Proceeding with the body of your responsive email, you want to create a style that’s unique to your company and the way you approach your users. A simple aesthetic works best because it’s more efficient to code. You want the logo at the top, maybe some basic navigation, a header, a body, and a conclusion. Here is an example for the header:
<table border=”0" cellspacing=”0" cellpadding=”0" width=”600" class=”100p”>
<tr>
<td height=”35"></td>
</tr>
<tr>
<td align=”center” style=”color:#FFFFFF; font-size:24px;”>
<font face=”’Roboto’, Arial, sans-serif”>
<span style=”font-size:44px;”>Introducing DarwinApps</span><br />
<br />
<span style=”font-size:24px;”>
You concept the incredible, <br />
we build the impossible.
</span>
<br />
<br /><table border=”0" cellspacing=”0" cellpadding=”10" style=”border:2px solid #FFFFFF;”>
<tr>
<td align=”center” style=”color:#FFFFFF; font-size:16px;”><font face=”’Roboto’, Arial, sans-serif”><a href=”#” style=”color:#FFFFFF; text-decoration:none;”>FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height=”35"></td>
</tr>
</table>
Generally, creating a responsive email is just like designing a web page. The only difference, however, is in how tables are used to space out content, and how CSS is used inline for most things. You would probably never use the <font> tag on a web page, but in email design, you’re forced to do it due to the limitations of this technology. Only use simple fonts!
Why You Should Create Your Own Responsive Email Template
The internet is full of email templates that you can use for your company. However, templating is only a temporary solution for startups that do not have enough budget to create their own assets. If you really want to stand out, you have to design and code your own email designs. Sure, it’ll take some more time and effort, but the reward is worth it.
Your branding is unique, your site likely is as well — you don’t want your email to feel cheap, or out of touch. Every design piece that you send out to users should feel like a mirrored image of your company’s values. If your company values minimalism, the email could be just text; if they value a more colorful, flamboyant approach, you should add that into the design.
Overall, creating your own responsive email template is an investment. Capturing the attention of users via email has become quite hard, and making the template exclusive to your company or organization gives you an edge against the competition. It’s an investment worth making, especially now that emails are more personalized and targeted than ever.
Enjoy what you’re reading? Feel free to leave a comment below. We at DarwinApps work hard to provide you with the best resources when it comes down to envisioning, designing, and creating some of the best design pieces on the internet. Our design process is very thorough; we leave nothing up to chance. Learn more about it here.
