Hatchbuck templates are designed to look great in all email clients. However, you may notice that Outlook displays your emails differently than they were designed.
Versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML emails.
This results in:
- No support for background images in divs and table cells
- No support for the CSS float or position
- No support for the text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
Because Microsoft Word is meant for print design and not HTML, your email will result in varying displays. This includes images that look misaligned or resized.
To correct the image issue, you need to specify image sides using HTML width properties. For example, using <img width="100" src="google.com/image.jpg" /> instead of <img style="width:100px;" src="google.com/image.jpg" />.
For more information about other versions of Outlook and more details, check out this article from Litmus.
Downloading Images in Outlook:
To quote the Microsoft Office help center, "To help protect you from junk e-mail senders, Microsoft Outlook is configured by default to block automatic picture downloads from the Internet."
You can unblock picture downloads for a single message by clicking on the InfoBar and selecting to Download Pictures.
You can unblock image downloads for all messages by going to Tools > Trust Center > Automatic Downloads. Clear the "Don't download pictures automatically in HTML e-mail messages or RSS items".
You can even specify to unblock all images from a specific domain (like your own, for instance). Here's how:
1. In an open message that was sent from that e-mail address or domain, right-click on one of the blocked items
2. In the shortcut menu, click "Add Sender to Safe Senders list" or "Add the Domain @domain to the Safe Senders list".