How to design emails for Outlook recipients
Outlook is one of the more popular mail clients for receiving emails however it can be one of the more difficult inboxes in regards to how your email is displayed. Here are some tips on how to design your emails so they render as you expect them to in Outlook inboxes.
Outlook is known for not displaying HTML properly and this is due to older technology. Since the Outlook 2007 version arrived, the HTML rendering engine is based on Microsoft Word. This older version causes a large number of problems when displaying HTML and CSS content that is normally supported in other email software.
We want to focus on how to improve the look of your emails in the Outlook client as it currently is. As per Lauren Smith of Litmus; recent versions of Outlook - 2007 to 2013 have multiple issues that can affect how your email is displayed. Some of these issues include blocking images display by default, non functional forms, limited font support and ignoring popular HTML/CSS tags like max-width. Another version, Outlook 2011, known as Outlook for Mac - runs on OS X and uses WebKit to render emails. Outlook 2011 has great support for HTML and CSS, Animated GIFs, background images, HTML5 videos and web fonts.
For Outlook.com, it renders similar to Windows Live Hotmail. Outlook.com claims to block content form suspicious-looking senders and its not clear how it is determined who is suspicious and who is trusted. Forms are still displayed but not functional just like the earlier version of Outlook.
Since most problems occur on Outlook 2007 - 2013 in this article we will focus on this version of Outlook. We will help you avoid some of these pitfalls when working specifically on emails sent to Outlook addresses.
Use Tables
In an email, tables are used to structure the layout of the template, to center elements, to style the text, to define padding and margins, to set backgrounds, to split the content into columns and control overall layout. Using a table will save you time and effort and ensure that the content of your emails are delivered as you designed them to all email clients. Most of the time, Outlook doesn’t handle divs (this is the content division normally used with HTML coding) well. Using a table solves common issues such as floating images, lists, text wrapping and spacing inconsistencies.
Be mindful of the Width
Have you experienced getting an error "This message is too wide to fit your screen..." when you open your mail? That is a notification we don't want you to experience. To avoid the wide message warning, your email should be less than 630px if you want your images to be properly displayed. In a program like Outlook, many users with a wide-screen will have their reading panel on the right instead of under the mailbox. Although this space can easily be made larger or smaller by the user, it will often not be much larger than 600 to 700px.
Fixed-width Layout
As email marketers, we have to think about how our recipients open their mail and what devices they are using. As generation evolves, it will always benefit us to think about mobile-responsive design.
Fixed width layouts are where the width of the entire page is set to a specific value. If you are to use a fixed width design, make it better to have it at 580px or 680px for a browser and no more than 480px for a mobile device. This will ensure that you are giving the subscriber a quality mail experience.
Since Outlook ignores max-width parameter some of your images may be stretched out - the best way to avoid that is to pass width parameter in your IMG SRC tag and define the width in pixels there.
Use ALT Text
Outlook is known for blocking images so we strongly recommend you to use ALT texts. ALT text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell website viewers the nature or contents of an image. The ALT text appears in a blank box that would normally contain the image. When using alt text, it important to use a few words as possible. If the alt text is too long this might take up too much space to fit inside the image area. The best way to overcome this image blocking is to get your email subscribers to add you to their safe senders list in their Outlook settings. Once you're recognized as a trusted sender, your images will render in the email automatically.
CSS
We mentioned that Outlook does not accept many CSS tags. We prepared the complete breakdown of accepted CSS tags - feel free to use them to implement the proper style.
Limited Font Support
The list of fonts supported by Outlook is short. If you try to use a font that is not accepted by Outlook, it will change to Times New Roman. If this keeps happening please use one of the safe fonts: Arial, Arial Black, Courier, Courier New, Georgia, Tahoma or Verdana.
Test your emails
Email marketing is likely a cornerstone to your marketing strategy. That is why it’s imperative to test your emails to ensure that you are giving a quality experience to your subscribers. Email clients and mobile devices display HTML differently because each client renders HTML in its particular way. Email coding can be tricky. The best way to be sure that your email will look great everywhere is to test it.
Related Articles
How to design emails for Outlook recipients?
Outlook is one of the most popular email clients for receiving emails however it can be one of the most difficult inboxes in regards to how your email is displayed. Here are some tips on how to design your emails for Outlook. Outlook is known for ...Check out our few useful tips on how to send emails to an old list
Has your subscriber list been sitting in a corner collecting dust? Thinking about sending to it to see who might respond? Read this before you do. What is an old list? Things move fast in the email world. That list you built over the last few years ...Delivery Guide
How to ensure the best delivery. Email deliverability is a broad topic. Trends change; but there are a few things to always consider which will help you with your campaigns. Whether you are just starting with email marketing or you are here to ...List-unsubscribe in Sales-Push.com
This article will help you to understand list-unsubscribe in Sales-Push.com Whether you are using SMTP Relay, HTTP API, or the User Interface, you can add an unsubscribe link to your emails. Unsubscribe links are generally required in all emails. You ...Discover tools that email marketers love
Making a big step when looking for a new service might need some research first. Let us help and show you the features that EmailPush offers! Below we present you a set of tools that might be useful for email marketers, like yourself. Email Designer ...