Shim when you’re winning

Posted on May 9, 2019 at 12:38 pm Written by

Recently we were engaged in a round of code trimming. This involves checking our email code for any deprecated practices – and any new exciting developments, but mostly it’s the former. We’re always looking for ways to streamline our code and make our file sizes smaller – all in the name of improving deliverability and load times. The smaller we can make the base code the smaller your emails will be after you’ve added your content.

Stone Age code

After a thorough round of testing we decided we could safely remove the marginleft and marginright attributes previously set on the body tag. These hark back from the Stone Age of web and email development and are no longer required by any readers. We wouldn’t want Stone Age code in our emails! No Sir! Iron Age and onwards thank you very much.

This removal of depreciated code has the positive effect of reducing spam scores. Not by much, but as one major retailer says, every little helps.

Another incremental spam score helper is getting your text to image ratio right. Due to the infinitely flexible nature of our templates, we sometimes worried that our Shim images (found in a lot of Custom Blocks, to keep Outlook honest) would upset this ratio. They’re the tiniest images known to man – angels tried dancing on one but kept slipping off – but spam scorers don’t care about the size, only the count.

spam only cares about the count.

These Shims, sometimes called Spacers, but probably never referred to outside of our team, are transparent GIF images of a certain height or width, used specifically for the Microsoft Outlook range of desktop apps.

Without shims, Outlook will often decide its own spacing between elements of a certain size. While this is sometimes OK, it can destroy a design. Shim images force Outlook to honour the sizes we’ve set.

I had a bit of a brainwave about these. It was a two-part brainwave in all honesty – one good idea led to a better one. I won’t confuse you with the first one though, as that was more about us saving time and bandwidth at our end. The final notion does both those things and improves spam scores. It also moves the focus to an Outlook-only solution, which feels good from a development point of view. Previously the shims impacted all readers, now, they’re Outlook-only shims.

What could replace shim images?

But how? If tiny images are needed to prop open cells for Outlook, what could I have possibly thought of that would replace these? Carefully stacked electrons? A tiny pair of opposed magnets? Harvest mice with sticks?

Surprisingly, none of these things.

The answer lies with one of the forerunners to the modern SVG (Scalable Vector Graphic) format. SVGs are images made up of code. Technically all digital images are made up of code, but they’re compiled into different formats. Don’t make me get into this now.

Microsoft’s VML format stands for Vector Mark-up Language. The Microsoft Word engine that is behind all modern Outlooks uses VML to create shapes and gradients, just like SVGs. If you’ve ever drawn a box or a speech bubble in Word, you’ve probably used VML.

VML shapes like speech bubbles.

We don’t make much use of VML images in our emails. They need fixed dimensions, which generally doesn’t suit a responsive template. They sit in Outlook-only conditional comments – meaning only Outlook can see them – and so need proper images as well for non-Outlook readers. For these reasons VML has been very much off our radar until now.

But I realised that both those downsides make VML images the perfect candidates for set-height, Outlook-only shim images.

If they’re a set height, Outlook must surely honour this. And the conditional comments mean they’ll only be seen by Outlook. Spam scorers only count “real” images – JPGs, PNGs and GIFs – towards their text to image ratios. Code-based VML or SVG (not widely supported in email readers) images are just read as code.

Testing confirmed this hypothesis, and I’m happy to report that all our Custom Blocks and Bespoke Templates from now on will benefit from this method.

Pros:

  • Reduced number of images per email, meaning your spam score is likely improved by a better text to image ratio
  • Reduced size of email – all those tiny images do add up – meaning less time to load on your recipients’ screens
  • Fewer requests – each image has to be downloaded from the server – meaning less time to load on your recipients’ screens
  • A cleaner appearance when images are set as “off” in a recipient’s email reader

Cons: None!

Follow Tom Scott on Twitter

Tom Scott

Digital Designer & UI Architect at NewZapp
@destaids

Get the latest Email Marketing updates & insights