gap intelligence launched a new version of its Market Intelligence Reports (MIR) featuring an updated, sleeker, and minimalist design. The MIR facelift was a collaboration between two departments, the Prod Dev Team and the Research Group, and as the resident frontend dev, it was my job to implement its hot new (less orangey) look.
MIR before and after
The main challenge that I faced was working with an old code base and maintaining consistency across different email clients and versions. Still relatively new to coding, this was my first HTML email development project and I learned a lot along the way. I came across tons of little tips, tricks, and gotchas, but there were also some major takeaways.
Everything is a Table
Since there isn’t really a universally supported email standard, you can’t rely on the usual divs, articles, or sections to divide different parts of the email. The only standard is using tables and you have to nest as much as possible. Everything in the email is in its own <td>, to which inline styles can be applied. The MIR template is essentially one giant table with a lot of tables within tables within tables. It can get a little deep, but nesting tables is the best way to assure consistency in styling.
Tables on tables on tables, oh my!
CSS Classes Don’t Work…Sort of
While you CAN use stylesheets, many email clients don’t recognize chained classes, only one single class at time. It’s best to avoid stylesheets and use inline styles. You end up writing more code, but it makes it easier to know what styles are being applied where.
Explicitly Define as Much as Possible
Some email clients assume a lot and other email clients assume nothing, so you must define everything everywhere. For example, Gmail tended to add margins and padding to cells if they weren’t set to 0, while other email clients might ignore padding completely. In other cases, child elements will inherit from its parent in one email client, but they might ignore it in others. Be as specific as possible when defining inline styles and it will reduce formatting assumptions made by email clients.
MailChimp is your Friend
Once you’ve completed building the HTML template, you’re going to need to test how it looks across different email clients. You can do it the long and hard way by creating email accounts with different email clients and downloading their respective software OR you can use an email preview tool such as MailChimp or Litmus. I ended up using MailChimp, and its Inbox Preview feature allowed me to get an idea of what the email was going to look like for several different email clients including Gmail, Apple Mail, Outlook, and IBM Notes, as well as older versions. The service is not free, unfortunately, but it was definitely worth it and probably saved us from a lot of of email client feedback emails.
The collaboration between the departments resulted in a wonderful new design for our clients making the reports more visually appealing and easier to read. No matter what, the most important thing to remember when developing an HTML email template is to have patience. Rebuilding the MIR to give it a fresh face was a challenging and tedious process, but I’m very proud of the end result!
