Introduction
To ensure optimum compatibility, certain best practices must be followed, particularly when editing content using drag & drop.
Specific restrictions for drag & drop components
Specific restrictions apply to certain components:
- Carousel: Restrictions imposed by some e-mail services prevent the rotation of images in e-mail opened from a computer. In this case, only the first image is displayed. On mobile, only the native application is compatible.
- Accordion: The accordion is compatible with native Android and Apple mail mobile messaging services. On other mobile messengers, accordion elements are all open by default, with no open/close interaction.
- Menu: This option is compatible with iOS messengers only. On other messengers menu items are displayed next to each other, without the menu icon.
- Video: This option is compatible on mobile only with iOS mailbox. On other mobile mailbox, videos are not displayed.
Drag & drop fonts
The display of fonts in emailing is restricted compared to the Web.
The reasons for poor font display in an email are :
- If the font used in the recipient's email is not installed on their device,
- If the email client blocks the display of a certain font.
However, there is a way to avoid this undesirable effect by using so-called "secure" fonts. This list corresponds to fonts installed on all computers and mobiles, and authorized by all e-mail clients.
- Arial
- Courier New
- Georgia
- Times New Roman
- Trebuchet
- Verdana
Other fonts are identified as "non-secure" because, depending on the e-mail client and the presence of the font on the recipient's device, they may display a fall-back replacement font (this replacement font is often Arial).
An example of Factorly's non-secure fonts:
- Geneva
- Palatino
- Tahoma
- Ubuntu
- Lucida Sans Unicode
- Avenir
If you've integrated a new custom font, this new font will then be displayed in its proper form in the drag & drop area, in the preview and on any web page.
However, it is possible that the font does not display properly on an email (we recommend testing proofs to be sure). In this case, the reasons for the poor display may be that the font is not installed on the device or that the email client is blocking the font.
Recommendations for optimizing compatibility
- Recommended design width between 600 px and 800 px.
- Rectangular corners are preferable, as Outlook does not support rounded edges.
- Fill in the alternative text of images with relevant, eye-catching text, to encourage people to download images if they are blocked by certain messaging systems (Outlook 2007, Hotmail...).
Conclusion
By following these best practices for Drag & Drop components and font selection, you can significantly improve the compatibility of your emails.