In this article, we will answer some of the more commonly-asked questions about our Email Designer.
If you don't see the answer to your question, you can always contact our friendly support team or Account Manager, who will be happy to help!
- Why does a white line appear on my emails in Outlook?
- Can I send an HTML email using pre-built code in Bananatag?
- Why do my emails look different across different clients/devices?
Why does a white line appear on my emails in Outlook?
A somewhat frequent issue seen by users of Outlook 2016 & 2019 for Windows, is a 1px horizontal white line spanning across their email template. The line may also take on a different color depending on the template/email background color.
Despite the issue being widely reported, unfortunately a simple fix is not yet known. A quick Google search can produce many articles and forums with suggested fixes and conversation regarding the issue, but Microsoft's official statement on the issue is currently "this is actually a known issue, and still under investigation."
Note
This problem doesn't happen in Outlook 2016 for Mac because that client doesn't use MS Word for rendering, whereas Outlook 2016 for Windows uses MS Word as its rendering engine and that’s where the problems occur.
Can I send an HTML email using pre-built code?
Yes! However, although its possible, we don't recommend it.
Outlook is very strict (and often fussy) with what formatting it will accept, often causing sent emails to be received looking far different than they did when being composed. We've shaped the Bananatag Email Designer to be as friendly as possible with the Outlook restrictions so emails are being sent and received with no formatting surprises or blemishes.
We recommend building out your newsletter using the Email Designer tool. With all the content blocks and customizations available, it's very easy to replicate your existing HTML template within our designer.
However, if you'd prefer to use your own code, here's how:
STEP 1: Login to your Bananatag account
STEP 2: Select Create
STEP 3: Click on Email Drafts
STEP 4: Select + New Email Draft
STEP 5: Choose to create the draft From Scratch using Rich Text - Text-based emails
STEP 6: Paste your HTML into the blank email draft
STEP 7: You can Send Test Email to test how your email will look when received
STEP 8: You can select Save to save this design as a draft or select Save as Template to save this design as a template for future use
STEP 9: After saving, you can send the draft or template directly from your email client
Why does my email appear differently across different clients/devices?
We work hard to ensure our email designer is compatible with as many different email clients, or devices, as possible. Individual differences and features across these clients, however, mean that sometimes things will look or act a little different.
This section outlines the fonts, features, and CSS elements that are supported by the most common email clients.
What fonts do you recommend?
Many fonts are designed to be 'web safe' while some fonts are specific to the operating system; not counting fonts that are entirely custom. When sending to users across multiple platforms, you may see some of your font selections adjust based on which fonts are supported on the mail client or operating system.
Below are a list of "Web Safe" fonts - they are usually compatible with most (if not all) platforms:
Sans Serif
Serif
*-Not currently supported through the Bananatag Email Designer
*--Support for this font may vary between specific versions or builds of the mail clients
Why don't Table of Contents links work on my email client?
The Table of Contents feature contains anchor links, which 'jump' to the heading when clicked on. They are a great way to quickly navigate through the email and provide for a helpful way to bring the recipient to a specific spot on the email. However, each email client (mobile or desktop) treats anchor links differently.
The two main anchor links that our customers use are:
- Name Anchors: <a href="#anchorname">...</a> & <a name="anchorname">...</a>
- Back to Top Anchors: <a href="#top">Back to top</a>
The following table shows the different email clients and their treatment of anchor links:
* Anchor links are disabled as of iOS8
In the Internal Communications space, 90% of the email clients deal with anchor links just fine. Which is great news for Communicators!
Supported Email CSS/Styling Guide
Not all mail clients are designed equally. As such, many will enforce their own styling parameters or will support/not support certain CSS styling elements commonly used on the web.
Here's a breakdown of some of the most common styling elements and which mail clients support them:
