If you are currently doing email marketing, then you’ll probably already be aware that Microsoft’s Outlook email reader is always the problem child - your beautifully crafted emailed can look a little weird in Outlook.
If you are new to email marketing, then you should also find this video useful. We are going to outline the main areas that Outlook struggles with and what to do to ensure your email renders correctly in this problematic email reader.
The reason why Outlook struggles to render some email designs is that the framework for it is very old, whilst it continued to have face list updates, the engine that powered it hadn’t really changed since the days when the little paper clip man used to appear when you hit the help icon.
So lets’ get started with our Outlook checklist, what should be avoided and how to fix the things that are fixable.
Fonts
In order to make your design stand out, or to reflect your corporate branding, you might want to use a font that isn’t Times New Roman. The ability to use different fonts in email always used to be a bit restricted, however in recent years the major email readers such as Apple-mail, Gmail and Yahoo have increased the number of fonts that they’ll render. These browsers also allow you to set a fallback font - this means that if they don’t support your first choice of font, then they will display a fallback web safe font.
Unfortunately, good old Outlook doesn’t support this. If they don’t support your first choice of font, previous versions of Outlook will also ignore your selected choice of fallback font. Outlook will automatically display Times New Roman as the fallback font.
This means that if your target audience are mainly using Outlook to read their emails, then you’ll need to stick to the family of web-safe fonts. These are Arial, Verdana, Georgia, Times New Roman & Courier.
Background images
The use of background images is a great way to add depth to a design, or to place text over the top of an image. This technique has been used in web design for a long time - over recent years the updates to the major email readers have made it possible to do this with your email marketing.
All of the browsers apart from one though, by now, you can probably see a bit of a theme developing here. Alas, the problem child that is Outlook still won’t let you do this. If your email comes through with no background image and just a plain white background, then this is the issue.
If you are using background images, then it’s really important to make sure that you select a background colour. This means that Outlook will then select the colour instead of just a plain white background. Often, if you are using tex over the top of an image, then white text is used to stand out. Remember though, that good old Outlook will put your white text over a white background - this is why you need to select a secondary colour to use on place of the missing background image.
Animated images
Movement in your email marketing is a great way to make your design really come to life, it can really add that wow factor and bring your email to life.
With email marketing, this animation is done by using an animated gif file, basically this is a series of flat images that when they run as a sequence they create - in the same way that a flick book used to.
True to form, Outlook, doesn’t of course support this - Outlook will just show the first image in the sequence as a flat image and will not process the sequence of frames.
This means that if you are preparing an image for animation you’ll need to make sure that the first frame makes sense on it’s own. So for anyone using older Outlook versions, the flat image that they’ll see, will make sense as a part of your overall email design.
Media Queries CSS
Nowadays, we all look at websites and emails on a variety of different devices, anything from 5 inch smart phones, through to 32 inch wide screen monitors. This means that when we are designing for a digital environment, we need something that can customise our design for a variety of viewing platforms.
This is how media queries are used, they are basically a command that will rescale elements of your design according to the size of the screen of the viewer. This is great, it means we can make sure that everybody receives your visual message in exactly the way that we’d like them to seem.
This would be everybody apart from people using Outlook though, as I’m sure you can predict, yes, our friend Outlook doesn’t support media queries. Versions older than the very latest will just ignore your media queries and will show your viewer a version of your email that is not as intended.
This is a tricky one to cater for - as media query are a really powerful tool for creating fluid designs. Lots of modern designers are of the mindset that people using Outlook are quite used to everything looking a bit weird and therefore your email will just be one of a whole inbox of other emails that look a bit weird. If you don’t want to follow this ethos though, the alternative is to make sure that the native version of your email looks correct in an average sized screen. You can do this by using fixed pixel widths of your blocks instead of percentages.
Summary
If you are designing emails - then unfortunately the perils of Microsoft’s Outlook is something that you’ll need to be aware of. Many a decent design gets turned into a jumbled mess by Outlook. If you follow our quick tips then this will help to control the bizarre quirks of Outlook.