Outlook, in particular, is a bit notorious for breaking email styling! Though we cannot fully control what renders in a subscriber's inbox, here are a few tips on how to avoid the unexpected email stylings below.
Spacers Displaying Lines
Problem:
Spacer blocks will display as lines regardless if you've turned the line off or not.
Fix:
Use Vertical Spacing within elements instead of separate Spacer blocks.
Multi-Column Layout Issues
Problem:
If you are using a multi-column layout of icons or images, the image sizing usually breaks in Outlook.
Fix #1 (recommended option):
Toggle on the “Set this image to use the original height and width” option.
This will require that the image is in the appropriate dimensions so this may take a few tweaks to display correctly.
Fix #2:
Combine all of the individual icons into one image instead.
Keep in mind: With this method, all the icons will redirect to the same page when clicked.
Images Displaying Larger Than Expected
Problem:
Whenever the Image Sizing slider is not at 100% in the Visual Email Builder, it will display larger than expected in emails.
The most common example is logos in headers. See example below:
Fix #1:
Add a Spacer column on both sides of the image.
Make sure you unstack the content on Mobile as well.
Fix #2:
Turn the “Set this image to use the original height and width” on if the image is in the correct dimensions. This will require that the image is in the appropriate dimensions so this may take a few tweaks to get to display correctly.
For logos, something around 200px x 100px should work!
Full-Width Images
Images that are supposed to be full width in emails, should always be either 600px or 1200px wide exactly and at 100% image size in the Visual Builder (1200px is best if you want the image to display nicely on high-res screens.). If the image is not at this width and not at 100%, it will not display correctly.
Links Not Displaying Correctly
All links must have "https://" preceding the link or they will display the full link instead of a hyperlink.