How to build email newsletters that look great in all versions of Outlook – with Mail Designer Pro 3.3

By February 13, 2017 Mail Designer No Comments

It’s a big day: today we’re rolling out Mail Designer Pro 3.3 – a big update that includes something we’ve been working on for a while… all-new Outlook support.

Just saying the word “Outlook” to a newsletter designer will send shivers down their spine: it has notoriously poor support for HTML standards and a lot of quirks that make it extremely tricky to design for. If that wasn’t bad enough, all versions since Outlook 2007 use Word’s engine to render HTML, so things have actually gotten worse over the years.

In the past we addressed these issues by adding workarounds to our existing HTML code. Extra style commands and table wrappers were added to the code that we write for all other email clients. However, this could occasionally still cause layout issues (e.g. extra spaces, slight misalignments…) and we were never entirely satisfied with the final result.

A New Hope for Email HTML
Last year we got together our email jedis and looked at different solutions. We decided to adopt an entirely new approach and make a bigger change. We decided to re-write our code to use dedicated code sections for Outlook.

How does it work?

Basically all existing code is hidden from Outlook entirely, so we can write nice clean code for all the other email clients, without extra Outlook hacks.

Then we take the content you’ve added and use it to write a second layout section, that is hidden from all email clients except Outlook. This section is tailored to all of Outlook’s quirks.

We do all of this automatically when you send or export your design – so all your content is included in both the Outlook and non-Outlook sections automatically.

So – does it work? In all our tests, the results were great: Designs are much more accurate, check out a Litmus preview:
https://litmus.com/checklist/public/f584679

With the earlier compatibility code, you’d see slight misalignments or extra padding. All of those issues can be avoided with the new code. This new technique also makes it easier for us to improve the code going forward, in case we run into any other compatibility issues.

Existing Designs are automatically improved
So what do you need to do? Nothing!

Whenever you open a newsletter design in Mail Designer Pro 3.3 or later, it’ll automatically be upgraded to use the new Outlook code with all compatibility improvements.

Detailed Outlook improvements:

  • 3-column layout blocks are always displayed with correct alignment
  • Line-height is correctly adjusted in all Outlook versions
  • A problem that could cause layouts to become misaligned has been fixed
  • An issue that could cause extra padding to surround an element has been fixed

Other Improvements

  • New Plain text export: When you export as a HTML file, the plain text version is now also included as a separate file
  • New If you’re sharing documents with colleagues, Mail Designer Pro now lets you know if a font was used that you don’t have on your Mac
  • When copy & pasting from Microsoft Office documents, we now prevent HTML elements being added inadvertently
  • We’ve fixed an iPad preview issue under macOS Sierra
  • You can now use multiple mailto links with advanced options in your newsletter
  • An issue that could very large newsletters to not upload to MailChimp correctly has been fixed
  • An issue with image quality has been fixed
  • A few minor issues with mobile background editing have been fixed

Want to experience hassle-free email design? Try Mail Designer Pro 3 free today. Mail Designer Pro is available for just $49,99. Owners of previous versions can take advantage of our discounted upgrade offer.