Why is my background image not showing when I send a test?

Knak uses advanced email design techniques to ensure that background images are rendered on most email clients. According to our most recent tests, the only email clients for which background images were not shown, were:

  • Outlook desktop on Windows. Background images work on Outlook 2011 & Outlook 2016 on OS X, and on outlook.com
  • Lotus Notes 7
  • free.fr email client
  • T-Online.de email client
  • Xfinity / Comcast email client

For those email clients - and for best results when images are blocked - make sure that you set a background color for the row that works well in the absence of the background image.

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

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

https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/ 

There's not real fix to the problem right now apart from trying to make small changes to font-size and line-height. We are monitoring the issue to see if a solution arises but ultimately it needs to be fixed by Outlook at some point. Please be assured that it is only present in Outlook 2016 for Windows.

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 outlined here: https://help.knak.io/builder/button-issues-in-outlook


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.

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

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

Unfortunately we are not able to target spacing and padding for mobile only. Our best recommendation is to use equal padding around images and columns so everything is center aligned on mobile.

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.

Did this answer your question?