An Animated GIF That Stops on the First Frame

Frame one is all some readers see

A newsletter opens with an animated image. The first frame is a photograph, the second a headline, the third the offer and the fourth the date it ends.

In Gmail, Apple Mail and the mail app on an iPhone, the animation plays and the reader sees all four.

In desktop Outlook 2007, 2010 and 2013 on Windows, the image stops on the first frame and stays there. Those readers see a photograph and nothing else.

Nobody tells the sender. The email looked fine on the phone it was checked on, and the readers who missed the offer simply do not respond.

Why Outlook stops

Since the 2007 version, Outlook on Windows lays out email using the same engine as Microsoft Word, rather than the engine a web browser uses.

Word shows an animated GIF as a still picture of its first frame. Outlook 2003 and earlier played animations; every version since has not.

Outlook also blocks images in many setups until the reader chooses to download them. Before that click, the reader sees an empty box and whatever alternative text was written for it.

So a desktop Outlook reader may see the first frame, or no image at all. Neither shows frame four.

Who sees which version

• Office workers reading at a desk in Outlook 2007, 2010 or 2013.
• Customers who are businesses, since their staff read email at work.
• Readers with images switched off, who see only alternative text.
• Phone readers, most of whom see the full animation.
• Webmail readers in a browser, who usually see it play.

The second matters most to anyone selling to other businesses. A list of office managers, buyers and supervisors is exactly the list most likely to open the email in desktop Outlook.

Make the first frame complete

The fix is a design rule: the first frame has to carry the whole message on its own. Offer, price, date and what to do next, all visible before anything moves.

The later frames can then repeat, elaborate or decorate. Steam rising from a cup, a product turning, a second photograph. Nothing in them should be information the reader needs.

Many animations are built to finish on the complete message, with the offer landing in the last frame for effect. Moving that last frame to the front fixes most of them.

Check it by opening the image in a program that shows a single frame, or ask whoever made it for a still of frame one.

Say it in text as well

The offer, the price and the date should also appear as ordinary text in the email, below or beside the image.

Text shows when images are blocked, reads aloud in a screen reader, turns up when a reader searches their inbox later, and stays sharp on any screen.

The image's alternative text should state the offer too, briefly, rather than describe the picture. "Free delivery until Friday" tells the reader far more than "animated banner" does.

A worked example

A vending machine operator runs snack and coffee machines in offices, warehouses and a few clinics across two suburbs, and emails office and facility managers once a month.

Last fall's newsletter opened with an animated GIF: a machine glowing, then a row of new snacks, then the offer of a fresh fruit fridge free for a month, then the date to book by.

Most of the list reads email at a desk, in Outlook on Windows. For them, the newsletter was a picture of a vending machine.

Replies came almost entirely from people who had opened it on their phones. The owner only understood why when a client mentioned seeing the machine and nothing else.

The next issue led with the complete frame: the fruit fridge, the words free for a month, and the date.

A few frames of the fridge being stocked followed, and the offer was repeated in text underneath with a link to book a trial.

Desk readers now get the whole message from the first frame. Phone readers get the same message with movement added.

Keep the file small

Every frame of an animated GIF is a full picture, so the files grow quickly. A large one loads slowly on a phone using mobile data, and phones are where most email is now opened.

Fewer frames, fewer colours and smaller dimensions all help. So does keeping the animation to one part of the email rather than its whole width.

A reader waiting for a heavy image to load is a reader scrolling past it.

Test before it goes

Most newsletter services can show previews in different email programs, or send a test to any address. Use one or the other before every send that includes animation.

The simplest test is a colleague with Outlook on a Windows computer. If they can read the offer without scrolling or clicking anything, the email works.

Where animation earns its place

Movement draws the eye, which is why it is tempting. It works best when it shows something a still picture cannot.

A product being used, a before and after, a simple sequence such as a fridge being stocked. One moving element in an otherwise still email is usually enough.

What it should never do is reveal. An offer that appears, a price that slides in or a date that flashes up at the end is information hidden behind time.

The counter-case

A list made up mostly of consumers who read on phones will see the frozen frame far less often. For a coffee shop or a clothing store, the risk is smaller.

Even then, the rule costs nothing. A first frame that carries the message is simply better design, because many readers glance at an email for a second before deciding whether to stay.

For a list made up mostly of businesses, consider leaving animation out altogether. Either way, put the message in frame one and in text.

Before the next send

1. Look at frame one on its own.
2. Put the offer and date in that frame.
3. Move the complete frame to the front.
4. Repeat the offer as text below.
5. Write alternative text that states the offer.
6. Keep the file small enough for phones.
7. Send a test to someone using Outlook.

Step four protects every reader at once. Whether the image is frozen, blocked or never loads, text in the email still says what the offer is and when it ends.

The same offer posted on the business's Facebook page meets different limits, covered in what Facebook counts as too promotional.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.