While developing HTML email templates for Outlook, developers always faced issues with styling the HTML.
Outlook has a reputation for presenting emails in an inconsistent manner and for missing support for email marketing tools. Some of the Outlook problems have been resolved over time, while others remain.
So let’s see some common issues and how to come out of them.
- Outlook ignores margins and padding
- Images Resize issue in Outlook
- Font Stack Issue in Outlook
- Outlook ignores HTML item width and height
- Alignment issues in Outlook
- CSS background images are not supported
A brief description,
1] Outlook ignores margins and padding:
Providing spacing for HTML emails has been a tough challenge for email developers.
Many versions of Outlook will remove padding and margin in a variety of situations.
Desktop versions of Outlook don’t support the styling of <div> tags. That means any padding specifications contained in a <div> are pointless. Outlook only respects <table>s, so keep any spacing specifications to those.
2] Images Resize issue in Outlook :
When you give inline style to an image and define height and width, then it may end up with something that looks warped and ugly.
So if your images are not displaying in their native size (the size they were saved at), make sure to define the height and width using HTML attributes and render them properly.
Make sure to give height and width property width only digit not in pixel like width=”300px”
<-- This image will be resized to 300px in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" width="300" style="width:300px;" /> <-- This image will NOT be resized in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" style="width:300px;" />
3] Font Stack Issue in Outlook :
When specifying fonts in email, developers use font stacks to list the preferred typefaces that the client should render. The problem is, if you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman.
So here is some solution,
- Replace the stack using attribute selectors.
- Wrap text in a span.
- Add MSO conditional code.
- Specify a custom font in a media query.
You can also give an inline font style to your main <table>.
4] Outlook ignores HTML item width and height :
As we’ve already mentioned, Outlook doesn’t support styling inside of <div> tags.
When an email is rendered in Outlook, the <div> parts will take on the height and width of the content within them, even if you set a height/width for them in code.
The solution for Outlook HTML emails is to use tables instead. This has happened with a few different components, but the <div> condition is the most typical.
5] Alignment issues in Outlook :
Some desktop versions of Outlook also attempt to stack material in columns. As a result, the email is out of sync.
To solve the Outlook HTML email problem, developers can use what is known as fluid hybrid design for responsive emails. This includes using ghost tables, which are invisible to clients other than Outlook, and restricting columns to appear in the correct order.
6] CSS background images not supported:
To make backgrounds work in older versions of Outlook, you’ll need to use some Vector Markup Language (VML).
