Email vs Web: Breaking the Code

You probably wouldn’t let your dentist perform open heart surgery and I’m assuming you wouldn’t trust a cardiologist to fix your teeth – both highly skilled medical professionals but importantly, each with specialist interests. So, if this makes total sense, why do so many businesses entrust their email HTML issues with web developers? Now, of course, that’s not to say that web devs have no idea about email or that they don’t have highly specialised knowledge in other areas of HTML development but they would be the first to admit that email HTML is a different beast altogether.

Recently, a client had previously employed a web developer to handle their template set up before calling on DR CRM to fix their code. On the face of it, the templates developed by said web devs could be set up and sent without apparent issue – great! Or was it? A simple light scratch beneath the surface was all it took to witness the horror show and soon, the whole code began to unravel like a knitted jumper caught on a rusty nail in an old table.  A tenuous link? Maybe… but talking of tables, that’s a great place to start when looking at why so many get email HTML development so wrong…

Turning the tables on standard coding

The challenge (consider it a ‘problem’ if you aren’t up for the challenge!) with email, is that there is no universal standard ‘reader’ and so what works for Outlook 2016 may not work for Apple Mail or even older and newer versions of Outlook! So we can’t just throw out older coding techniques because they are no longer in fashion, we also have to accommodate the old and the new and keep building and that means tables – lots of tables.

Tables hold the structure of your email together and so whilst web browsers can rely on CSS, many email clients ruthlessly strip out the code, leaving your email withering like a body without a spine. For instance, Gmail, Outlook, Lotus Notes, and many more email clients all have issues with floated elements, and are notoriously unreliable with margins and padding styles.  

Have you ever experienced spacing issues in your email? You’ve set table widths to match the images contained within it, you’ve used the right tags for spacing but you still can’t seem to get the thing to play ball. You’re not alone – email coders have perfected techniques which allow them to maintain consistency across email clients without breaking the code. There are many common problems and watch outs with email code which are often overlooked, here are just a handful…

Background colours and images:

Some email platforms make it seem like you can have it all – background image with text overlay? No worries! Looks great in the builder, not so good in Outlook. With email code, when you understand the limitations of the email readers, you’ll start to find solutions but ignore those limitations at your peril! Here’s a handful of useful tips to help with better rendering.

Spacing issues:

Nested tables could give you a helping hand here – even when padding and margins are supported, issues with spacing may still occur so it’s useful to have something that will provide consistency.

Background colour issues:

Some email clients will ignore backgrounds set on the body tag or style sheets. For this reason, wrapping a table around content and setting a bgcolour attribute on it is a nice little workaround.

Inconsistent cell widths:

Setting pixel width attributes in cells ensures greater control over your table elements. Using cellpadding on the table as well as via CSS can also cause issues – so choose your code wisely, test and test again!

Get Inline

Some email clients will remove the CSS from your code’s header. If you aren’t applying inline styles to your email HTML, you are basically relying on whatever the email client uses to render the email. Remember though, it’s important to cover all bases because there are certain styles that do not work so well inline—you’re unable to specify :hover states for links, for example, so it’s worth keeping the styles in the head as well as in line – Gmail for instance will strip out some inline CSS within the Gmail app in certain circumstances – so ensure you are using the right combinations of coding to ensure consistency across both email client and devices.  File size used to be a big headache and not so long ago, even email coders were reluctant to add extra elements because of it. Nowadays, with increased speeds and computing advances, the extra download time is outweighed by the benefits.

But it’s not even code!

With email code, you’ve also got to be able to read between the lines – literally! If you are new to email coding and are still reading, you may be starting to understand why this is quite a nuanced art. Here’s a couple of things that web devs don’t generally have to worry about…

Comments – in the world of web development, comments are words in between the code – so they shouldn’t affect how the code looks, right? Well theoretically that is true but within email templates, comments are useful and sometimes essential – eg for defining drag and drop blocks. So removing them may impact the entire functionality of your template.

The same can be said for whitespace – surely, as per web pages, it doesn’t matter how much white space there is, so long as there’s correct coding throughout? Well you guessed it, within email code, whitespace can cause all sorts of rendering issues—especially if you have whitespace between table cells.

Image is everything?

Research shows that up to 40% of email recipients never enable images at all. Adding to that, people who choose not to allow images and that’s quite a massive portion of your database that will never see your logo in their inbox, let alone your latest offer.

As marketers, we know the power of images and so I would encourage you to design your emails with the same creative flair that you would for your TV ads. Except, email is a great example of where technical know-how is just as important as creativity and when you know how to code to get the most out of your emails, you wouldn’t be derided for calling it an art form in itself.

Have a look at the table below, you’ll see why it’s important to consider coding without relying on images.

Email ClientImages displayed by default?
Yahoo MailYes
Windows Live MailNo
GmailNo
Outlook.comYes
AOL WebYes
Apple MailYes
Outlook 2007No
Outlook 2003No

In recent customer feedback surveys, DR CRM has been rated 5/5 across service, technical knowledge and customer support. If you would like support with your email marketing, get in touch today at drcrm.com.au/contact

DR