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.
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 that is normally supported in other email software.
We want to focus on how to improve the look of your emails in Outlook. 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 displayed by default, non-functional forms, limited font support, and ignoring popular HTML tags.
For Outlook.com, it renders similar to Windows Live Hotmail. Outlook claims to block content from suspicious-looking senders and it’s not clear how it is determined who is suspicious and who is trusted.
We will help you avoid some of these pitfalls when working specifically on emails sent to Outlook addresses.
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, split the content into columns, and control the overall layout. Using a table will save you time and effort and ensure that the content of your emails is 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.
Have you experienced getting an error message "This message is too wide to fit your screen..." when you open your mail? This 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.
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 parameters some of your images may be stretched out - the best way to avoid that is to pass the width parameter in your IMG SRC tag and define the width in pixels there.
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 is important to use a few words as possible. The best way to overcome this image blocking is to get your email subscribers to add you to their safe sender’s list in their Outlook settings.
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.
Email marketing is likely a cornerstone of your marketing strategy. That is why it’s imperative to test your e
mails 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 a particular way. Email coding can be tricky. The best way to be sure that your email will look great everywhere is to test it.