Skip to main content
Email Rendering FAQs

Questions about email rendering

Felix Higgs avatar
Written by Felix Higgs
Updated over 4 months ago


I'm seeing white horizontal lines in my test email?

Unfortunately there is a known issue with Outlook 2016 and Outlook 2019 where Horizontal lines might show at random in your email:

Unfortunately there isn't a proper solution for this issue, but we have found some ways to help mitigate this issue as shown in this help document: https://help.knak.io/en/articles/9421305-outlook-issue-white-lines

Why is the font I'm seeing in my email account is different from the font I see in Knak?


In Knak we make use of custom webfonts to help our clients get as close to their brand guidelines as possible in their email content. These custom webfonts always have a fallback "web safe" font that is similar in style to the custom font. This is because not all email clients will be able to render the custom web font and will show the fallback instead.

Custom web fonts aren't supported everywhere but here are the email clients where they are supported:

  • Apple Mail

  • iOS Mail

  • Google Android

  • Samsung Mail (Android 8.0)

  • Outlook for Mac

  • Outlook App

My email appears broken emails when forwarding to someone else.

When an email is being forwarded, some email clients make changes to the code of the forwarded message. This can include stripping out certain HTML elements, wrapping your email in a blockquote, or inserting additional classes to your code—all of which can break your design and make the email less functional for the recipient of the forwarded email. 

Knak emails utilize the Forward to Friend token {{system.forwardToFriendLink:default=edit me}} . This will insert the necessary forward link for your emails. This prevents Marketo from adding an ugly line of copy at the very bottom of your emails and will optimize your emails when being forwarded.

My rounded CTA buttons show as square in Outlook. Why?

Knak builder makes use of a coding technique called VML buttons in order to ensure your buttons look great across all the email clients, including Outlook. This technique essentially creates two versions of the button. The first uses a conditional comment to target Outlook desktop clients and uses VML markup in Outlook specific code to style the button (round corners). 

Some customers might not be able to use this VML version of the button due to using an ESP that doesn't support VML tracking (Eloqua) or due to wanting to avoid the issues with button code manipulation.


If you're not seeing rounded corners on your buttons in Outlook 07/10/11/13 it is most likely due to one of these scenarios. Feel free to reach out to us using the chat to confirm this. In these cases the corners of the buttons will always be square and only the link of the email itself will be clickable.

My image is rotated sideways in Outlook. Why?

This issue can occur with photos taken on smartphones. Some smartphones save landscape (wide) photos as if they are portrait (tall) and note in the image metadata that the photo is ‘rotated 90º’, or vice versa. While all modern devices and email clients will display the image correctly, Outlook for Windows cannot read the rotation information in the metadata, causing the image to appear sideways.

Opening and re-saving the image will permanently apply the correct rotation to the image to solve the issue.

You can quickly do this in Knak by clicking the Crop / Edit icon to open the image editor (shown below).

Without adjusting anything, simply click Save. After saving, the image will be fixed.

Alternatively, you can open the image in an image editing program and ‘export’ or ‘save as’ a new version of the image. This will ensure the correct rotation is built into the new version.

You could also use an online image optimization tool to process the image, as they will permanently apply the correct rotation to the optimized image.

Can I have Videos and GIFS embedded in emails?

You are able to upload animated image such as .gif in knak. However some email clients do not support the animation and will display only the first frame of the GIF. You should ensure the first frame is relevant to the content without the animation.
Here is an interesting articles with more details: https://litmus.com/blog/a-guide-to-animated-gifs-in-email

For information on adding a video click here: https://help.knak.io/en/articles/3292868-adding-a-video-to-your-email

Can I control the padding and spacing on mobile devices specifically?

Yes, you have the ability to change the padding and spacing on mobile devices by clicking on the desktop and mobile icon.

The CTA buttons in my columns are not aligning properly.

In order to render correctly on mobile, the content of each column should be under the same row (image, text, button). In order for the buttons to align, the paragraph length should ideally be the same in all 3 columns and you can use line spacing and play with padding to align them.

Long links and text should be avoided as Outlook does not support them. They will cause rendering issues as the text will not wrap properly.

For links, a button with a link or a text link with shorter 'Text to display' would resolve this issue. A non-breaking space could be added to a longer text to help render the email correctly.

Autolinking URLS

If you are experiencing a plain text link being autolinked after you send out your email, this is because some mail clients autolink (and color) plain text links. We can only control link colors for links added in Knak, and links added in the MAP after export.

For this reason, URLs should always be linked and styled as desired in Knak to avoid any of this undesirable behavior. It's best practice in emails to always link what you want to be linked to control the styling, and to make sure it gets tracked.

If you want it to look plain text and you want to avoid an autolink added by the mail provider: add it as a hyperlink in the text box, uncheck 'Underline links', set the link color in the editor the same as your text color.


If Links are being directed to a broken page​

If your links are being directed to a broken page and you use global link parameters, check if there is a question mark in between two link parameters. This is likely causing it to break. To fix this they should go to link review and update the '?' to an '&' (e.g. html?node to html&node)

*Important note* Make sure your links always have the "https://" in the beginning of your link, otherwise the page will not display for viewers and instead will display the error below

Why is my GIF distorting in Outlook?

Sometimes GIFs can display differently than expected through MS Outlook 2019. The reason this happens is that Outlook will stubbornly render the GIF at a fixed height of 600px, no matter what the email's width is.

Our recommended work around to combat this issue is to create the gif with a 1:1 ratio. This should stop the GIF from stretching and distorting the image.


Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com

Did this answer your question?