My campaign looks correct in Preview and Send. Why doesn't it look right once it's sent?
Designing and coding for email is completely different than designing and coding for web page design.
This is because each email client and application renders HTML differently. Support for even simple Cascading Style Sheets (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.
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 uses Microsoft Office Word to render HTML emails, which can often result in layout, formatting and other issues.
- Gmail strips all CSS styles and can display fonts differently to how you set them up. Hyperlinks are also always displayed in its own shade of blue rather than the default color set by the template. The Gmail app on mobile devices also strips CSS styles so the media queries used to allow content to be responsive do not work in that environment.
- Hotmail will sometimes add more space than normal below a paragraph (<P>) tag. Hotmail also uses its own shade of blue for links rather than the default color set by the template.
- 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.
Additional Tips for Email Rendering
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 in the campaign content.
This incorrect/invalid code is usually the result of one of two things:
- A build up of campaign content caused by campaigns being copied and edited over and over again, or
- 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:
- 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
Please note that our support team is limited in the assistance we can provide for issues related to how a specific email client or application renders HTML content.