|II.||Why do emails appear incorrectly?|
|III.||What we do|
|IV.||Why do emails appear correctly Preview and Send and online but not in the inbox?|
|V.||Tips for creating consistently rendered emails|
- Email clients - These are dedicated applications installed on a computer that allow you to send, receive, view and organise emails. Common email clients include Outlook 2010, 2013, 2016, 2019, Thunderbird, Apple Mail and Lotus Notes.
- Web-based email clients - These are email clients that are not installed on your computer but instead run in the browser. Common web-based clients include Gmail, Hotmail and Yahoo mail.
- HTML - This is the technology that is used to structure content on the web.
- CSS - This is the technology that is used to style content on the web.
- Rendering engine - This is the technology that an email client uses to interpret HTML email and display it on your screen.
Why do emails appear incorrectly?
Many popular email clients do not have rendering engines that are capable of effectively rendering the complex visual layouts that are now being constructed in HTML email. Whilst web browsers (Internet Explorer, Chrome, Firefox, Apple Safari) have improved their technology to keep up with evolving HTML and CSS specifications, email clients have not. This means that HTML emails have to be coded as if we are back in the 90's. e.g. visual layouts must be constructed using tables.
In addition to this, each of the popular email clients have their own rendering engine. This is to say that there is no guarantee they will treat one email the same way; so the same email viewed in Outlook and Thunderbird could have slight differences. For example, the rendering engine used by Outlook is the same one used to display Microsoft Word documents (whereas previous versions of Outlook relied on Internet Explorer to render HTML emails). This change means that special attention must be paid to specific types of content in order to ensure compatibility in Outlook 2007/2010, and some content is not supported at all.
Rendering in Popular Email Clients and Applications
Designing and coding an email that renders consistently can be very time consuming. It is best to understand which email clients and applications your recipients use most and tailor your efforts to those.
- Outlook 2007/2010, Lotus Notes and Gmail all present significant challenges for rendering HTML emails.
- Unlike all other email clients, Outlook 2007/2010 use Microsoft Office Word to render HTML emails, which can often result in layout, formatting and other issues.
- Lotus Notes can be inconsistent and extremely confusing in the HTML it supports. Group tables inside a larger frame so that they will be displayed together.
- Gmail strips all CSS styles and can display fonts differently to how you set them up. Hyperlinks are also always displayed in their own shade of blue rather than the color set by the template.
- Hotmail also uses its own shade of blue for links rather than the default color set by the template. More space than normal can sometimes be added below a paragraph (<P>) tag.
The following elements are not supported in Outlook 2007/2010:
- Animated GIFs (only the first frame will display)
- Flash content
- Image maps
- Background images (including gradients and other patterns behind text)
- Forms within the email body
- Float or position commands
- CSS (limited support only)
- Tables or images longer than 1700 pixels in height (can result in strange gaps and spaces because Outlook inserts a page break)
- Margins and padding
- Manual line breaks that have been inserted into a column or table by repeatedly pressing Enter.
What we do:
We work to ensure the default content in all the Templates we provide is setup to be compatible with Outlook 2007/2010.
Additional detailed information from Microsoft can be found here.
For more information on the Outlook rendering engine read here.
For a full overview on rendering engines used by different email clients read here.
Creating email using Dreamweaver
The problem with Dreamweaver is that it creates HTML for web browsers, and as we have mentioned already the HTML needed for email clients is very different. This will mean HTML created by Dreamweaver is not appropriate for email and can cause error when rendering. For more information see a useful article here.
Why do emails appear correctly Preview and Send and online but not in the inbox?
As mentioned above the reason for this concerns the difference in the rendering engines. The rendering engines used by email clients are significantly behind the rendering engines used by web browsers. This is true even for companies who create both an email client and a web browser (e.g. Microsoft web browser Internet explorer uses a different rendering engine to its email client, Outlook). Due to this the support for even simple CSS varies considerably.
To ensure your email looks the same regardless of which email client or application renders it, it is best to stick to simple layouts and tables. Click here to view additional design tips.
Tips for creating consistently rendered emails
If your email is not rendering correctly, the first thing we recommend is sending a Campaign using the default content of the Template to see if the issue occurs there.
If the issue does not occur with the default content, then it can be attributed to something specific in your content – generally incorrect or invalid HTML code somewhere within the Campaign's content.
This incorrect/invalid code is usually the result of one of two things:
- A buildup of Campaign content caused by Campaigns being copied and edited over and over again.
- Invalid HTML that was pasted into the Campaign when text was copied/pasted from an external source (e.g. website, Word document, another Campaign, etc.).
To avoid these issues, we recommend taking these steps:
- Start a brand new Campaign from scratch.
- Copy and paste all the text you need to use in your Campaign into a simple plain text editor, such as Notepad.
- Copy and paste the text from Notepad into the editable area in your new Campaign.
- This will remove any extra/unnecessary formatting and HTML code so that your Campaign will display properly.