Email clients often lag behind when it comes to embracing modern HTML/CSS and JavaScript. When the environment varies from one recipient to another, it makes it difficult to guarantee a standard email experience. However, it is not a good idea to allow the combined limitations of all email clients to restrict what we can do, or force us to remove many of the features that end-users expect and enjoy. Here is how to think about client compatibility.
Know your audience
When crafting your emails and fine-tuning your designs, the main rules is to proof the emails in those devices that your audience will be using. 65-75% of consumers experience marketing emails on their phones, so optimizing communication for small screens is key to impact.
When it comes to email clients, the most common for reading marketing emails are:
- Gmail (50–60%)
- Apple mail (30–40%)
- Yahoo mail (5–7%)
- Other Android (2–4%)
- Outlook desktop (0.2–0.5%)
- Other clients (0.5%)
(Source: Engage emails February 2024, numbers differ across market & audience.)
Don't proof with your company email client
When proofing emails, avoid using your company email account. Companies often use the Outlook desktop client, which has limited functionality and a mail server that can append additional content (for example, “Caution: This email originated from outside of the organization”). Instead, use devices such as an iPhone or Android smartphone, with the Apple Mail or Gmail app.
Technical limitations
Here you can see the technical limitations when it comes to various email features.
Text
| Text feature | Limited support in: | Details |
|---|---|---|
| Custom font or Google font | Gmail, Outlook on Windows/Android | Font will be replaced by system font that can be declared in the font family field. As fonts can vary in style, the text may take up different space. |
| Blue links added | All clients | Clients auto-detect addresses, phone numbers, dates and make them clickable blue links. This to help user e.g. call a number or add a date to Calandar. What’s auto-detected depends on the client. |
| Long words | All clients | Longer words than the text area can push the layout apart as clients do not break line. |
| Right to left languages | All clients | As clients do not handle all adjustments automatically the module layout needs to be adjusted for the marketing groups. |
Column
| Column feature | Limited support in: | Details |
|---|---|---|
| Overflow | Outlook Windows pre 2025* | When columns take more than 100% of the row width they will not break into a new row. Especially important when using Repeater on a data source. |
Image
| Image feature | Limited support in: | Details |
|---|---|---|
| Background image | Outlook Windows before 2025* |
Image might be misplaced, try using: center, top position and no repeat. It's not possible to combine background images on both wrapper and row element. |
| Image updated | Apple mail, Gmail, Yahoo | When email is received the images are downloaded and will not be updated. Impacts use, for example, of countdown timers. |
| WebP file format | Outlook Windows pre 2025* | No image will be displayed. |
| Images not displayed | Outlook desktop | Default configuration is that user need to click a button to display external images in the email. |
Button
| Button features | Limited support in: | Details |
|---|---|---|
| Click area | Outlook Windows pre 2025* | Only the button text will be clickable. |
Styling
| Styling features | Limited support in: | Details |
|---|---|---|
| Rounded corners | Outlook Windows pre 2025* | Element, for example a button, will have sharp edges instead of round |
Dynamic data
| Dynamic data features | Limited support in: | Details |
|---|---|---|
| Data field empty | All clients | Element field or text will be left empty if not a fallback value is declared. |
| No items | All clients | Repeated elements (and its children) will not be displayed. |
| Number of items | All clients | The number of items in a repeater will change the layout e.g. adding new columns or rows. Be sure to think of the cases of no items or odd number that may leave empty space. |
Other
| Other features | Limited support in: | Details |
|---|---|---|
| Email cut in half | Gmail, Outlook mobile | If email file size is more than 100 kB Gmail will truncate the email. Same goes for Outlook but instead it will truncate if email is too heavy to render. Recipients need to click on a button to continue reading. |
| Forwarded email | All clients | If user forward the email the styling will not be fully preserved. |
* The new version of Outlook for Office 365, featuring enhanced HTML/CSS capabilities, will begin rolling out in January 2025. Its implementation will vary according to the specific Office 365 plan, and organizations or individuals can decide the timing of their upgrade.
For more details on client HTML/CSS capabilities, visit https://www.caniemail.com.
View your email in all email clients and devices
If you like to see how your email is perceived by different email clients and devices, we highly recommend using a tool for that. For example:
Article last reviewed
Comments
0 comments
Please sign in to leave a comment.