OFT emails, part 4: info for devs
New to OFT emails? Start here! OFT emails, part 1: the worst format in the universe
Devs, this assumes you already know a good deal about html email programming — i.e. using <table>s rather than <div>s, sticking with font-family: sans-serif for all text areas, etc. You can use these specs below on top of your normal email dev specs when creating OFT emails.- Desktop only: Since OFT emails are not mobile responsive, you can remove the entire <style> tag and media query. All CSS should be inline in the body of the email; you should not use any classes.
- Formatting your HTML file as an OFT: This must be done on a Windows machine and using the Outlook desktop app. View your programmed email in Chrome, and select and copy all (Control-A, Control-C). Then open a new Outlook message, and paste the email content into the body. Add the subject line, if provided, in the Subject field. Then go to File / Save As, and choose Outlook Template (*.oft), browse to your desktop, and name and save the file there.
- Superscripted characters: If the content contains superscripted characters, place them in a <sup> tag, but do not add any inline styling. When viewing in your web browser the characters will look too large and too high, but they will look correct when you paste into Outlook to create the OFT.
- Subject: Dev should add the subject into the OFT file before saving. If you didn't receive a Subject, ask the team to provide one. If they can't provide one, the sender can add manually.
- Line height: Beware, Outlook has a minimum leading that's fairly large. If the leading in the art is very tight, it may not be achievable in an OFT.
- Background images, gradients, css shadows, css rounded corners, etc are not supported in email. (That's not an OFT-specific thing; that's emails in general.)
- Do not use <strong> or <em>. These cause errors in OFTs for some unknown reason. <b> and <i> are fine (which is insane, as they're deprecated). You can also use style="font-weight: bold" and style="font-style: italic", either in a <span> or a <td>.
When you're all done and it's time to hand off the OFT file to your team or client, I recommend always including instructions for sending OFTs as well as some helpful notes about the OFT format. You can find that stuff in my article, OFT emails, part 2: more info on this garbage format.
A good rule of thumb: never assume anyone you're working with (colleagues, clients) knows anything about this format at all. If you don't send them this info along with the OFT file, they may make a lot of wrong assumptions about how to use the OFT, what things to mark up, what things can or can't be fixed/tweaked, etc. It's always better to make sure they have this info before they start hassling you with tons of issues to address. It'll save them some time, and you as well.
Good luck out there, my dev friends. OFT projects can be a real nightmare when people don't understand the format. May the lord have mercy on your souls.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.