Becoming an Email Developer
“You’d do something different everyday,” said the Director of Enterprise Services during our interview last week. I was glad to hear that, working on diverse projects as a full stack developer is exactly what I want to do for the rest of my career. “Some of those things,” he continued “would be HTML5 Ads and email developing.” He said it cautiously, as though I might abruptly stop the interview and walk away after hearing such thing. “I’ve never done email development before,” I said, “but I am happy to learn it and do it”.
I came home that day and spent the next 48 hours immersing myself in those topics mentioned during the interview that I didn’t know much about, in this case email developing, just like I had done for each and everyone of the countless job interviews I had undergone the past two months.
What I discovered is that HTML5 Ads and email developing are looked down upon by developers because they are thought of as “old school.” HTML5 Ads and email developing are commonly ranked among 1999 stuff like calling yourself a “webmaster”, using WYSIWYG editors like Adobe Dreamweaver and coding tables to mark up websites. What is sexy and cool nowadays are JavaScript frameworks like Facebook’s React, NoSQL databases like Google’s Firebase and code editors like Visual Studio Code.
I’m glad to be a developer with a non-traditional background, because I’m free of such prejudices and eager to learn everything that comes my way. In this case, I am particularly more prepared and happy to do things like email developing and HTML5 Ads because professionally I’ve always been at the intersection of visual creativity and tech. I studied film production in college and specialized in video editing with proficiency in Adobe Premiere Pro (sorry DaVinci Resolve). My mother is a graphic designer, so I’ve used Photoshop and Illustrator my whole life. I’m an Adobe aficionado and I like softwares like Dreamweaver and Adobe Animate for the same reason I like frontend web development: because I can see what I code.
So, what is email development?
As a developer, email development means building email templates. An email template is a reusable HTML file that is employed to build email campaigns. Building HTML email templates is not solely a coding job, there is much design involve. So if you work in a small company, you may have to know a lot about colors, images and graphic design. If you work in a big company, you will work very closely with graphic designers or UI/UX designers. This is how an email template looks like “live”:
This is how some of the HTML for this template looks like:
Categories
Emails are commonly divided in these categories:
- Newsletters (which is a marketing email sent to a subscriber list)
- Promotional (which are your usual marketing email blasts)
- Transactional (which is a one-to-one email that contains information that completes a transaction)
As a developer, it’s important that you are familiar with the complex and multi-layered email ecosystem. Email development is extremely connected with the world of marketing, and this is a world populated by all kinds of professionals who also work on email. To make life easy, marketers use ESPs.
ESP
ESP stands for email service provider, which is a special type of service for marketing companies to do everything relating to email campaigns: coding email templates from scratch, managing subscribers, analytics, running bulk email campaigns, etc. Here’s a list of the coolest ones I’ve seen:
- Mailchimp
- ActiveCampaign
- Drip
- GetResponse
- AWeber
- Litmus
- SendPulse Email
- Campaign Monitor
- Emma
- Constant Contact
Most of the ESPs above let you build email templates visually, via drag and drop method, with no coding. They are for the whole company to use, not just the developer. Here is a list of email template builders that are more focused towards the needs and desires of a developers heart:
Tips and Tricks for Email Development!
Know your clients (rendering engines!): the way an email is displayed depends largely on the rendering engine a system uses, that’s what we called email clients. Here’s a list of the top ten according to Litmus Email Analytics:
Email clients use different engines to render HTML emails:
- Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit.
- Outlook 2000, 2002 and 2003 use Internet Explorer.
- Outlook 2007, 2010 and 2013 use Microsoft Word.
- Web clients use their browser’s respective engine (for example, Safari uses WebKit and Chrome uses Blink).
Inline CSS, Media Queries, Responsiveness and other demons: since an email template is a single HTML file, you can’t link a stylesheet from a separate CSS file to it (no JavaScript files either). So all your styling has to be done within the HTML file.
This makes it hard to build a responsive email template. If you want your email to look good in all types of devices, you have to establish many different sizes that will respond appropriately to a phone, laptop, tablet, etc. These sizes are for stuff like max-height, max-width, align, padding, etc. A common practice is to establish a default size inline and at the very top of the HTML file write all your media queries, like so:
However, there are many problems with doing all your CSS at the very top of the HTML file:
1.- Many email clients like AOL and Outlook don’t support media queries.
2.- Many email clients strip the <head> element from the HTML when an email is viewed either in its web or mobile clients.
3.- Because inline styles have the highest specificity in the cascade, it’s necessary for every media query style rule you write needs to be marked with a !important declaration, like so:
<style type="text/css">
.standardCSS{
color:#505050;
font-size:15px;
}
@media only screen and (max-width:480px){
.mediaQueryCSS{
color:#CCCCCC !important;
font-size:20px !important;
}
}
</style>These styling issues are rapidly evolving. Until recently Gmail didn’t support media queries, but now they do. So make sure to always check on Twitter what the hottest news are.
Tables Within Tables: Sometimes in email development is safer to code like it’s 1999. Unlike modern web design the <table> element isn’t used just for tabular data, it’s all there is for consistent structure.
As I said at the beginning of this blog, I don’t have a prejudice against 1999. I think 1999 can be as cool and sexy as 2020. Next week I’ll write a blog on how to code an email template in Dreamweaver. In the meantime, check all these great resources:
Help! I’m a new email developer!
An Introduction To Building And Sending HTML Email For Web Developers
Email Development Best Practices
Email Design Podcast #32: Interview with Email Developer Alex Kelly
