How to Create an HTML Email in Outlook?

Inserting HTML into outlook emails can be stressful. But according to the studies [1], 5.1% of the customers are used outlook in 2013, 4.7% in 2010, and 20% of other customers are using different email types that include other email outlook versions. You can, therefore, not afford to ignore these figures.

Following are simple steps on how to easily insert HTML into outlook emails.

1. Add Alt Images

Some email clients block images, and Outlook is one of them. This is why it’s recommended that you add an alt text for images.

If the image is blocked, your recipient will see an empty box with a description.

When creating the alt text, use as few words as possible so that the recipient is encouraged to unblock the image.

For example, an alt tag saying “Follow Us on Twitter” sounds more confident than a “new image.”

If you want to increase the loading speed of your images through slicing, make sure there is no padding between the sliced images.

To do this add div{display:block !important} to your email’s <head> tag.

2. Ensure “Times Romans” does not replace your fonts

Outlook has a minimal number of fonts. So if you use a font that isn’t common in Outlook, it ends up being replaced by Times Romans.

To prevent this from happening, be on the safe side by using one of the following fonts.

  1. Tahoma
  2. Arial Black
  3. Courier
  4. Veranda
  5. Courier New
  6. Georgia

However, if you’ve got a particular font that’s crucial to your branding, you might consider forcing Outlook to use the mentioned fonts and your specific font as the fall-back.

Do this by using :

This conditional code prevents Outlook from ignoring your fonts and displaying your email in Times Romans.

3. Use tables to construct emails

Tables come in handy in controlling the email layout by setting backgrounds, splitting content, defining margins and padding, splitting content, and structuring your template.

This ensures that your email appears the way you design it, regardless of the version that the receiver is using.

Although Outlook doesn’t support divs that are used in HTML coding to divide content, fortunately, using tables prevents text wrapping, inconsistent spacing, and floating images.

Remember to keep things responsive by adding:

align="left”

This makes sure boxes appear neatly on top of each other on a small screen and next to each other on big screens.

4. Consider your email width

You may have opened an email at some point and received an error that your message is too wide for your screen.

To avoid this, use 550-600 pixels to make sure your email retains its design and appears correctly on small screens.

At times, the email client still ignores the max-width parameter, and your images are stretched.
Always ensure your IMG SRC tag is specific about the width of your image (pixels).

To target specific outlook users, apply specific widths for these versions.

For instance:

5. Use incline CSS

Although other clients are supporting embedded CSS, Outlook version hasn’t embraced it yet.
So if your email head reads CSS or is linking to a style sheet on an external media, there is a chance that your style will be ignored on Outlook.

Therefore, you need to incline your CSS, writing your styles, so they’re in line with HTML.
By integrating CSS with HTML tables, you can create templates that won’t be blocked by outlook email.

6. Hide some elements from Outlook

While you want to make sure all your customers get great emails, there are some exciting features you might not want to deny recipients using other email clients.

Fortunately, you can hide HTML elements and CSS styles from outlook with this simple code.
<! — [if !mso]><! — →

<! — <![endif] →
And for hiding elements from Outlook use.
<table style=”mso-hide:all;”></table>

Use the trick carefully, as you might need to use it on multiple tags based on the number of elements you’re using.

7. Test your emails

Email marketing is the stronghold of every business’s marketing. Therefore, it’s crucial you get it right.

Test all your emails displaying HTML differently, not just on Outlook to make sure your email campaign goes well.

Read more about HTML emails at https://www.enginemailer.com/create-html-email.

Wrapping Up
You can not afford to ignore the Outlook recipients on your email marketing campaigns. The only option is to learn and get used to HTML formatting for Outlook emails.

With a few hacks, you can overcome all the challenges and deliver quality emails to all recipients.

References

  1. https://help.campaignmonitor.com/email-client-usage-reports