Why does my Gmail email look different?

If you’ve noticed that your newsletter looks different in the template editor of FreshMail Designer than it does in email service providers, we’re here to tell you that what you see is quite normal and expected. Let us explain.

So why does it look different?

Various email service providers interpret HTMLFormat HTML + TXTWiadomość, która zawiera format HTML i TXT. Programy pocztowe, które nie będą mogły odtworzyć wiadomości w formacie HTML, wyświetlą ją w formacie TXT. Należy pamiętać, że wyświetlenie wiadomości w formacie TXT uniemożliwi zraportowanie jej w kontekście otwarć. code in different ways. For example, Outlook and Gmail don’t display graphics in messages and Outlook displays rectangular buttons instead of circles.

It’s usually impossible to completely avoid these small differences in the appearance of your newsletter in different programs but it is definitely within your power to limit how significant they are. In FreshMail, this is aided by something called “graceful degradation”.

It works on the principle of always making your email legible for subscribers, no matter if they open it in Gmail, Outlook or on a smartphone application. The idea is that the most important thing is ensuring that it’s easy to read your message regardless of what program is used to open it although some elements may be reformatted in the process.

How email inboxes support CSS attributes

FreshMail issued a CSS report to make it easier for a single template to display properly for every subscriber no matter what program is used to open it.

On the basis of the CSS report we can identify three subgroups of email service providers:

Group 1 - everything works the way it should - iMail (Apple) and Thunderbird

Group 2 - almost everything works the way it should - Gmail

Group 3 - styles and details get lost - Outlook (with the exception of Outlook 11)

The undisputed leader in supporting CSS attributes are desktop programs installed Mac computers - Apple Mail, Outlook 2011, Mozilla Thunderbird and native mail applications for iPads and iPhones.

Some time ago, marketers and coders tried to design newsletters for the most simple version of Outlook with the intention of creating a message that would display the same everywhere without errors. This is a bad idea today because it doesn’t allow marketers to use all the possibilities that we see in current trends in email marketing.

Which elements of a newsletter display differently in various email service providers?

External fonts

Newsletters contain universal fonts, characters that are installed in 99% of all the computers in the world. Using them means that you can be sure that your design will appear the same in all email service providers.

In FreshMail, these are the first 14 fonts that you can select when designing your newsletter.

But what about if you want to use a different font?
The first group displays all characters. 

In the second group, we find characters that are changed to other fonts when displayed. It can be a random font or a similar one.

The third group uses a defined fallback. In FreshMail, suitable fallbacks are automatic and that’s why different email service providers display the message differently but correctly.  

Remember that if fonts are changed, spaces between lines and letters may also change.

Rounded corners

Sometimes you want to use CTA buttons in your design that have rounded corners. Gmail supports them but Outlook doesn’t and so they appear as rectangles.

In the case of Outlook, FreshMail adds a conditional code that creates a separate button that is slightly rounded off.

Background picture

Sometimes designers want to place text of the message on top of an image to make the message visually compelling. You have to remember though that graphics are not automatically downloaded in email clients and unless your subscriber manually does so, he will not see anything that you wanted to communicate in the message.

The solution to this problem is to use the background image. Therefore you will set apart the text and the graphic into a separate element so that the copy is always visible. Still, the background images aren't supported across all email clients

• The first group displayed background images without a problem.
• Outlook and Gmail don’t display background images

Gifs and video

If you want to attract the attention of subscribers with something a little out of the ordinary and present several products without extending the newsletter or tell a story, then an animated GIF or video might be just what you need.

Embedding a video in a newsletter is not as simple as with a static graphic. There are not defined protocols or standards and unfortunately many email clients make it difficult to send full video clips in emails.

You can use fallback files and load a replacement in the form of a GIF animation or a static image. This makes you sure that for every individual recipient the email will be displayed correctly.

GIF files are supported by most email service providers but there is a problem with Outlook, which displays just the first image from GIFs, and so be sure to prepare a fallback picture.