Why do my Outlook emails look different to what's saved in Marsello?
Marsello emails created with the drag-and-drop editor are designed to be consistent and responsive across most email providers. However, Outlook users may see their emails come through somewhat different to what's been saved in Marsello.
Outlook 2007 onwards uses Microsoft Word to render the HTML and CSS of emails. This approach to rendering differs significantly from another popular email provider as it's better suited for print design. This is why an email may look slightly off when opened in Outlook compared to what you initially designed and preview in Marsello or test send to other email providers
Common limitations in Outlook
Notable design differences do depend on the version of Outlook you are using. However, most differences stem from these common Outlook limitations:
No support for background images in divs and table cells
No support for CSS float or position
No support for text-shadow
Limited support for padding and margin
Limited support for CSS width and height
Issues rendering nested elements and background colors
With these limitations in mind, you can work around some of the most noticeable design issues listed below. However, you should not expect that your email will look uniform across all email clients.
Common differences and fixes
Image padding or margin is being ignored
Outlook ignores set padding and margins around images. As a result, any wrapped text will be pushed against the image. There are a couple of ways around this:
Use a photo-editing tool to add a border around your image that is the same color as your email background, then upload the image into your email. Because the padding is part of the image, Outlook cannot ignore it.
Incorporate the image into your email via an HTML block and add vertical space (vspace) and horizontal space (hspace) to the image's tag. For example:
You'll still want to set margins for the image because some email clients do not recognize "vspace" and "hspace" for styling purposes.
An animated GIF isn't working
Outlook does not support animated GIFs. Instead, it will display the first frame of the GIF in the email the recipient sees. Please make sure the most important information appears in the first frame.
Images aren't loading
This issue is typically due to the recipient's personal or business settings. Outlook is often configured to block automatic picture downloads for security purposes. This setting needs to change on the recipient's end for the images in your email to render properly.
Images are being clipped or rescaled
Some versions of Outlook have a maximum image height restriction of 1728 pixels. To prevent Outlook from automatically clipping the top or bottom of your image, make sure that the image you upload to your email has a height of under 1728 pixels.
If you cannot decrease your image's size and need its entire contents, the best alternative is to crop the image into sections and place them into multiple Image blocks in your email.
Images aren't the correct size
Outlook doesn't recognize the HTML that constrains images. If you use HTML to resize an image uploaded to an email, it may display at the original size when opened in Outlook. Try to resize your images to the desired width and height before you upload them to Marsello
A background image doesn't load
This issue isn't unique to Outlook, and there isn't a quick fix to force the background image in an email template to display. Always make sure to set a background color as a backup.
There's extra white space
White space is sometimes inserted above an image because Outlook renders HTML using Microsoft Word. This rendering technique is similar to the preview you see when printing content in that it is broken into a series of unique pages. If an image falls between what Outlook sees as two separate pages, extra space is inserted above the image to force it down to the next page.
Eliminating the extra white space requires reorganizing your content. Because reorganization can require extensive layout and content changes, consider making a copy of the email first. To create a copy of your campaign in Marsello, navigate to the applicable email dashboard, locate the email, and select Clone from the drop-down menu.
When reorganizing your content, you want to determine where Outlook is marking the page break in your content. If there is an image beneath the white space, try to move the image to another area in your layout and send a test email to see if this fixed the issue. Continue reorganizing and testing your email until the unwanted white space is eliminated.