Why your email looks different in Gmail, Outlook or on a phone

The email you see in the editor is not exactly what every contact sees. Each inbox (Gmail, Outlook, Apple Mail, the mail app on a phone) decides for itself how much of your email it shows and how it draws it, and they don't all agree. Nothing is wrong with your email when this happens, and most of it can't be switched off from Leat. What you can do is design so that it doesn't matter.

These are the differences merchants run into most, and what to do about each.

Gmail cuts off long emails

Gmail shortens an email once its code gets too big, at around 100 KB, and ends it with a link such as "View entire message" ("Volledig bericht weergeven" in Dutch). Everything after that point is still there, and a contact who clicks the link sees the rest. Other inboxes don't do this, so the same email can look complete in Outlook and cut off in Gmail.

What counts is the code behind the email, not the photos. Images are loaded separately, so removing a photo barely helps. What makes an email heavy:

many sections, columns and blocks
lots of separately styled text: different fonts, sizes and colours inside one block
many empty lines and spacers
many links and buttons

A test email is slightly lighter than the real thing. When you send the campaign, every link is rewritten so clicks can be counted, which makes each link longer. A test that only just fits can be cut off when it goes out for real.

To keep it from mattering:

Put your most important message, and your main button, near the top.
Add the Webview tag near the top too, so a contact whose inbox cuts the email short can open all of it in the browser. See Seeing your whole email in the browser with Webview.
If an email covers several subjects, think about splitting it into 2 emails.
To shorten one, merge text blocks that follow each other and remove empty lines and spacers before you remove pictures.

Images don't always load

Some inboxes, Outlook and many work mailboxes in particular, don't load images until the reader clicks to allow them. Until then the contact sees an empty space, or the image's Alt text.

Fill in Alt text on every image, with what the image says: "Opening offer: free tote bag with your first purchase", not "poster.png".
Never put information a contact needs only in an image. Opening hours, the offer, the address and dates belong in a text block, even if they're on the poster too.
A design that is one big image is the riskiest kind of email. With images blocked, it's empty.

Dark mode changes your colours

Many contacts read email in dark mode, and most mail apps then recolour your email. Some leave it alone, some darken light backgrounds and lighten dark text, and how far they go differs per app and per phone. You can't turn this off from the editor.

A logo with dark text on a transparent background can disappear on a dark background. Use a version with its own light background, or a logo that works on both.
Text on a coloured background stays readable more often than very light grey text on white.
Send yourself a test and open it on your phone with dark mode switched on.

Outlook on Windows

The Outlook desktop app on Windows supports less than any other inbox.

Background images on a section aren't shown. Outlook shows the section's Background color instead, so always set a colour that your text is readable on.
Brand fonts and web fonts aren't loaded, and Outlook shows a standard font instead. Your email still reads fine, it just won't be in your own font.
Some versions show only the first frame of a GIF. Make sure that first frame works on its own.

Fonts

Gmail and Outlook don't load web fonts or your own brand fonts. The font picker in the editor shows this: fonts under Works in every inbox look the same everywhere, while fonts under Brand fonts and Web fonts carry the note "Won't load in Gmail or Outlook".

Where a font can't load, the inbox shows a standard font in its place, so lines can wrap differently and a heading can end up longer or shorter than in the editor. If most of your contacts use Gmail, pick a font under Works in every inbox for text that has to look right. Either way, leave a little room in headings and buttons rather than fitting text to the exact width.

Video

Email can't play video. A Video block shows a picture that opens the video when a contact clicks it. For a YouTube or Vimeo link, that picture is taken from the video itself. For any other link, contacts see a plain placeholder, so for those, use an Image block with your own still and link it to the video.

Phones

Most contacts read email on a phone, where the columns of a section are stacked on top of each other (unless you switch off Stack columns on mobile for that section) and the email gets much longer to scroll through.

Check the Mobile preview in the editor as well as the desktop one.
Hide on mobile and Hide on desktop let you show a block or section on one and not the other. A few inboxes ignore these settings and show both, so don't rely on them for anything that would look wrong twice.

The line next to the subject

Inboxes show a short line of text next to or below the subject. Set it yourself under Settings → General → Preview text. Leave it empty and the inbox picks the first text it finds in your email, which is often not what you'd choose.

Checking before you send

No preview shows exactly what every inbox will do, so check in more than one place:

Open the email in Webview to see the whole design from top to bottom.
Send yourself a test and open it in the inbox your contacts use most, on a phone as well as a computer. If you can, check a Gmail and an Outlook address.
A test email from the editor gets "[TEST]" in front of the subject and doesn't issue the voucher or gift card the email hands out. To see everything exactly as a contact will, send the campaign to a small list with only yourself on it. See How to send a proper test campaign.