haley marketing logo
Search
Close this search box.

When one petite pixel caused a huge email headache

Share this:

Any email developer will tell you that developing emails can be a real pain.

Due to how old some email clients are (looking at you, Outlook 2003, 2007 and 2010) or new email clients that use antiquated HTML (cough, cough, Outlook 2013, Outlook 2016 and Gmail), there are a lot of different factors that developers have to account for, and getting an email with a modern design and features to look exactly the same across every client is an impossible task. Despite all of that, we have emails figured out and can create mailings that look good and work well across the board. A lot of testing and refining goes into those emails to make sure that is the case, but what happens when an email breaks and the cause was something that you couldn’t test for?

As you may know, Haley Marketing Group is currently conducting a survey of the staffing industry to find out what works and what doesn’t in staffing sales and recruiting. We want to know what the best methods are for staffing firms to generate leads and attract great candidates, and then we want to share those results with you. However, we need the staffing industry to respond first. One way in which we tried to reach people was through an email.

This was the email that we designed and how it appeared on non-Microsoft Outlook desktop clients:
SurveyIM

This is a sample of how it appeared in our tests without the tracking pixel:
SurveyIM-InitialTest

This is how it was meant to look on an iPhone 5/5s:
SurveyIM-CorrectMobile

And this is how it actually looked on an iPhone 5/5s thanks to a very strange display bug caused by one single pixel:
SurveyIM-MobileError
Note all of the extra space on the right half of the email.

So, what happened?

Unlike Haley Marketing’s normal mailings (like the Idea Club Newsletter), this email was not sent through HaleyMail but instead through our CRM which then attached a tracking pixel to the bottom of the email. That pixel, combined with the “max-width” value on the email’s outermost container table (yes, emails still have to be built in very old-school HTML tables), caused something in the iPhone’s rendering engine to flip out and squish the email content to half the width of the already-narrow iPhone screen.

We weren’t alone

We weren’t the only ones to have this issue. Email on Acid, an email testing service, experienced this exact same issue with one of their recent mailings. Their email service provider also added a tracking pixel to their email which caused the email to render at, you guessed it, half-width.

What next?

Well, we learned some lessons here, including that something as small as a single pixel can completely break an email. We also picked up something new to test for when we build emails, something that had never been an issue in our mailings before, but adding it to the testing process going forward could save a potential headache.

This was one of those cases where the smallest possible thing on the screen (one square pixel) that should have had no effect on the rest of the email ended up causing a big issue. For this particular mailing, which was segmented into a number of batches, it was caught relatively early in the process and corrected for the rest of the emails.

The biggest lesson here? You should test, test, and when you think everything looks ok … test again. Emails are temperamental at best and the smallest thing can break them. It’s important to be wary of what can go wrong, learn from it when it actually does break, and have a plan to prevent it in the future.

Content Marketing = More Placements! FIND OUT HOW

Share this:

Hey you! Don’t miss out…

WEEKLY INSPIRATION

Get our best marketing tips—one idea a week. You’ll also get invites to our webinars, and exclusive offers on our products and services.

You may also like