What I Learned After Coding Emails for a Month

When I was searching for my first developer job, I would often envision my future company’s tech stack, the tasks I might be assigned, and the team I would be working with. I usually imagined myself working with React on difficult logic problems and on a large team. After almost four months of job searching, I finally landed a position. I cried at the opportunity to finally get paid to code (and for that increase in salary). What I wasn’t expecting was to be working with only one other developer using primarily Vanilla JS and CSS, and to be coding emails.

I had gone almost my entire life not even knowing emails were HTML documents and now I had to learn how to code them?! My coworker gave me a quick rundown informing me that emails are table based layouts, inline CSS is a must, you have to use !important in your media queries, and to say goodbye to easy padding and margins. Internally I was freaking out thinking, “This goes against everything that was ingrained into me in my bootcamp” and “What do you mean I can’t use flex-box??” 😭

Needless to say I had a lot of learning to do and went through a lot of trial and error trying to learn table layouts (props to any 90s devs out there). I still have a ton of learning to do and have learned that nothing is more soul crushing than having the perfect email in the browser and then receiving your team’s test and having Outlook completely shit on it. Although I am still an email newbie, I thought I’d share some of my findings for others out there that are just starting. And of course, if any seasoned email devs are out there please feel free to correct me on any errors or misconceptions.

Email Resources

Let’s start with some resources that helped me on my journey and that I use as reference pretty often.

• Can I Email - Like Can I Use but for emails. I use this site constantly to check for support for CSS properties.
• Great beginner’s guide - This is where I started and this article has so many great resources to take advantage of.
• Email Templates - just a word of advice here: don’t try to reinvent the wheel. Take advantage of email templates. It can take so long to develop your own. Take a template, make it your own and test, test, test.
• Fun tutorial on how to build a responsive email.
• Smashing Magazine's Guide to HTML emails.
• Best practices- read this and save yourself some headaches
• I have yet to use one of these, but MailChimp and other services will take everything in your style tag and move it inline.

Tips & Tricks

I've gathered some of the tips and tricks I've learned from mistakes, my boss, and my time spend coding emails.

• I mentioned this above, but it’s worth mentioning again: take advantage of templates.
• I’ve had the most luck in Outlook using <td> in place of margins such as:

<tr>
  <td height="30" width="100%"></td>
</tr>

• If you want to use a background image always include a conditional comment below to support Microsoft Outlook 9 or later clients:

   <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"><v:fill type="tile" src="IMAGE PATH"/><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->

• Always intentionally set your tables’ cellpadding and cellspacing and border for a more controlled box-model like structure.
• Aim for simplistic layouts.
•   can be your best friend. Learn more here.
• Speaking of   if you have an extra bullet point showing in your test after your <ul> you will need to add another element that includes   so that the <ul> is not the last element.

<p style="display: inline; line-height: 1px !important; font-size: 1px !important">&nbsp;</p>

• Study emails that come into your inbox. How did they achieve their layout? Save ones you like for inspo and tips.
• Don't add px after your inline width styles. width="600" will do. Includingpx will cause rendering issues in Outlook.
• Keep your emails between 600 - 800 pixels in width. Learn more from MailChimp best practices.

Responsive Image & Text Columns

Remember above when I mentioned to aim for simplistic layouts? Well, sometimes a client will want something more complex. I was tasked with creating a column layout that alternated the positioning of the images and text, was mobile responsive, and didn't stack images in mobile view. This layout takes advantage of align and dir to achieve the desired effect.

Although I wasn't expecting to get into email development or to primarily be using Vanilla JS, I am beyond grateful for the opportunity to get to code everyday and work for a great company. Creating emails has taught me patience, gratitude (for all things web), and that Outlook is a terrible beast. I'm excited to learn all I can about email + web development and if you have any tips, tricks, or advice you'd like to share, please do!!

Thank you for reading! ✨