Email marketing is powerful. Beautiful and engaging emails bring excellent results to many businesses. But what is behind all that beauty? A big part of that rests in the hands of crafty email developers, who build email templates with HTML and CSS. Web designers and developers use HTML and CSS for their projects too, and, often, coding for email and web is seen as one and the same. But are they, really? In this blog post, we’d like to show you why email code (thus even email marketing design) isn’t the same as web development and design. And we’ll give you some great pointers to help you with email coding and troubleshooting.
Coding for the Web
Coding for the web is usually referred to as coding for browsers, and web developers can usually:
- Use semantic HTML and CSS (such as header, footer or paragraph tags);
- Apply CSS for style and structure, most often using external style sheets (with elements and properties such as font-family, display, position, margin or float);
- Use JavaScript for dynamic elements.
Coding for the web has an accepted standard, and modern web browsers will be supporting these web standards. Therefore, web developers can create amazing, interactive websites.
Email Development
What about an HTML email template? There is just one thing to say: email development is different. While developing for the web requires coding for a handful of browsers, an email can be opened in a wide variety of devices and email applications.
So, you’re coding not just for desktop, phone or tablet but also for various applications that your email recipients can open your email on. For example, your email can be read on a desktop computer Windows Mail app, but it can also be opened on an iPhone 11 mail app. And, no, unfortunately, there isn’t one standard across them all.
Different email applications support different subsets of HTML and CSS. That support, in some cases, is on the opposite ends of the spectrum. If you talk to an email marketer, you will get to understand the pains of making an email render well in, for example, Outlook or Lotus Notes.
How to Code for Email?
Here are some tips on how to code for email:
- Be prepared: email coding will give you inconsistent results – and bugs are inevitable. Don’t aim for pixel-perfect HTML. Remember, your design will not look the same on different devices/email clients. Headaches are a possible outcome too!
- Often, email clients will disable the images by default. Thus, you cannot rely on image graphics to portray your main email message. Oh, and don’t forget that image-heavy emails can have an increased chance of being directed to the spam folder too.
- Not all email clients will support, for example, animated gifs.
- Here’s a tip for your email graphics: when coding your emails, add the width and height attributes to prevent possible image rendering issues.
- Email clients/applications (and sometimes even your Email Service Provider) can add their own code or modify your code after importing your HTML email template, or simply after making a change in the code.
- Don’t use separate CSS files. All code needs to be in the email template itself.
- CSS that is not inlined will most likely be removed.
- When coding emails, remember that there is limited font support. Therefore, the basic fonts are usually the safest option (or have fallback fonts specified!).
- When building emails, a good practice is to write each CSS property separately, as it’s said that email clients tend to prefer it.
- A lot of CSS properties won’t be supported across many different devices/clients. Even something as simple as rounded CTA button corners will not be rounded corners in some devices/applications. So when you’re thinking about your next newsletter design, take that into account.
- The display:none CSS property in emails is not supported everywhere too.
- Use tables! Web developers have moved away from table coding for quite a while now, but tables are the safest option to create the layouts of your emails. The CSS and DIV-based layouts will definitely give you a headache when you start testing your emails on different clients.
- Link colours in emails can sometimes revert to their default blue colour. So while browsers will mostly follow your rules, email clients might have their own mind about links and their colours. To avoid that, try adding an extra span style in the link tags.
- Colour codes: some email clients will support the 3-character HEX codes, while others won’t. We recommend using the full six digits of the HEX code.
Testing is Crucial
Coding for email marketing is challenging. Many web developers who try to create emails might secretly want to give up while attempting to build error-free email templates. It takes time and lots of testing to figure out the quirks of the popular email clients and apps.
Create different accounts, send lots of test emails and see how they render. Also, there are many tips shared within the email marketers’ community for code hacks and advice, like the ones we’ve just given you!
Web and Email Coding are Different
As you see, there are many differences between email and web development. Even though it’s challenging to code HTML email templates, it’s also rewarding. Seeing beautiful emails on various devices, providing a great customer experience, and driving business forward is simply amazing. Therefore, put your email developer hat on, and dive into the code to make the magic happen. That said, Smaily offers a great drag-and-drop template building experience for marketers without HTML and CSS knowledge. So, do not get discouraged if you’re not feeling like coding an email from scratch!