Recently, I sent out a newsletter and was dismayed to discover that MS Outlook had rendered it horrifically!

It was AFTER I’d sent it – so I was mortified and a bit frustrated.

I posted a snide comment on Facebook and then tweeted an image of that snide comment..

And on Facebook #Microsoft @Microsoft Fix it you you dingbats! #digitalmarketing @MailChimp pic.twitter.com/aJRdp6Wc2S

— Matthew Moran (@matthewmoran) March 16, 2015

Can you sense my frustration?

Mea Culpa – accepting blame

The truth is, it’s my fault for a couple of reasons:

• Outlook is known to be problematic, but I didn’t test how it would appear before sending it out
• I was lazy with my image sizes

I’ll still maintain that the MS Outlook formatting is problematic because it does ignore your styles that seem to work on any/every other client. But… either way, we are about fixing problems and this won’t be the first time we’ve worked around a vendor’s design challenges.

The newsletter in various clients

Here are screenshots of my newsletter in Gmail, mobile-Gmail, and then Outlook. See the problem?

 

 

 

Image Size Fail

This is what I did wrong. I had images for my newsletter. They’d been created for my blog/website. The images were 1210px wide and 1000px high/tall.

I uploaded those images to MailChimp as is. I inserted them into my newsletter and set the image width property to 550px – so it appeared correctly in the MailChimp editor.

Then I edited the HTML of that section and changed the image style – removing the width and height properties, removing the height reference in the style property, and leaving just the width reference in the style property.

I made the width of the style property 100%.

Original image HTML

Here is the original image HTML with the areas to edit/delete highlighted.

<img align=”none” height=”309″ src=”https://linktoimage.jpg” style=”width: 550px; height: 309px; margin: 0px;” width=”550″ />

Modified image HTML

Here is the modified image HTML.

<img align=”none” src=”https://linktoimage.jpg” style=”width: 100%; margin: 0px;”/>

What’s wrong with that

The image that I used was/is actually 1210px by 720px

That’s lazy – and less efficient for people who don’t have high-speed Internet. But, I generally don’t worry about the speed of people’s Internet connection these days. Even 3g cellular downloads the images fairly quickly.

The problem is that Outlook (and possibly other clients) ignore style settings. This means the image renders at it’s full-width. 1210px!!! That breaks the formatting in the client.

Making MailChimp work on “enough” clients

But in the end, frustration notwithstanding, we are about solutions. Here is what we did to solve this problem. I use MailChimp, but I suspect you need to consider similar tactics with Constant Contact or any other email system.

First, here is the Goal:

• Uniform format and delivery
• Mobile ready/friendly format

To accomplish this, do the following:

• Make all images the same width. Either, the maximum width of your newsletter template for a computer (not mobile) client. Or the maximum size in the text area of the newsletter template. (I’ll explain more below).
• Modify the HTML of the inserted image to use a style of “width=100%;” (or whatever percent you’d like the image to take) and remove any height references. If not, an image that is 564px – see below – will render incorrectly on a cell-phone. Percentage solves this issue in “enough” clients to satisfy me.

Additional considerations for making e-newsletter mobile and client friendly

Everyone is mobile (almost) – use single column emails

Depending on what you read, about 65-70% of all email is opened mobile first. Why battle this. Your multi-column, complicated, side-by-side newsletter is probably too small to read and will be deleted by the bulk of people who open it on mobile.

You’re losing eyes and losing at the game.

Use a single-column, mobile-friendly template. We use the standard MailChimp single-column template.

Know your working width

MailChimp’s single-column template is 600px wide on computer/full-clients. But it has a default padding left and right of 18px… that makes the working width 564px.

So… make your images 564px wide and you are golden on Outlook and other clients. Or, you can use the MailChimp HTML CODE block to create a full-bleed, margin to margin – no padding – image in your newsletter. I’ve provided an image of that below and a video that shows how to accomplish this.

I apologize for the abrupt start to the video below. 😉

If you find this helpful, consider using the share buttons below and share it on your social networks, Twitter, etc. And if you have questions, email me or ask Pulse on Twitter.