Font selection - using a web safe font will ensure your recipients always see the design you want them to see. If you're using a specialized custom font be aware that not everyone will be able to view it. Keep the number of fonts used to a minimum as too many will increase load times.

Use global fonts - Knak allows you to define a font at the brand level which you can then build with by using the 'Inherit font' in the font section menu. That allows you to easily change the font in one place rather than in every email & module.

Font size - The suggested font size on a website should be responsive to the screen size that displays it. In general, a font should be 12-16pt on a mobile screen, and 16-20pt on a desktop computer screen.

File size - images can add lots of weight to your email which is a bad thing for email deliverability so keep the image file size as small as possible. Most image editing programs like Photoshop have an option to export a web friendly (smaller file size) version of an image which we recommend using. We recommend keeping the total file sizes of all images in an email under 1mb total. That could mean 10 100kb images or 2 500kb images.

File type - Image formats that are supported in email:

Alt text - you should assume that some email recipients will have images blocked by default. Make sure you set relevant alt text to account for that. And ensure your ratio of image to text isn't too high so the email still works if images are blocked.

Animated images - we love animated images and fully support them in the Knak editor. Again keep the file size as small as possible. Keeping the number of frames you're using to a minimum will generally help here.
Please note that not all email clients support animated gifs, in places where there is no support the email client will display the first frame of the animation. for that reason we suggest making sure the first frame works as a static image.

Image dimensions - we recommend using an image with a width that's twice as wide as the content block you're putting it in. That will ensure crisp 'retina' rendering on all devices. Never use an image that's smaller than the content block you're putting it in as that will result in stretching and blurring. Knak will show your email width in the Settings. For full width images, you want your image to be twice as wide. For example, if your email is 600 px, you'll want an image width of 1200px. If you are using a number of small images in one block, divide the email width by the number of images.

For example, if your email width is 600 px and you are uploading a block of 4 images, each image would take up 150px, you'll want to upload an image that's at least 300 px wide.

Once uploaded, you can modify the width of your images for mobile and desktop as needed.

PPI - a PPI value of 72 or higher is recommended for images used in emails.

Videos - always host the video somewhere else and display a link to the video in your email. Using a screenshot of the video with a play button overlaid over the top is a good option here. 

Placeholder images - Instead of loading multiple images into your account for placeholders, head over to https://betterplaceholder.com/ and just grab a url for the size you need. Enter the dimensions, choose a file format and press update preview. Copy the URL into the image url section and keep your image library clean.

But, in general it's hard to provide a percentage of images to text ratio, as it heavily depends on the context. But, generally we would recommend that images and text are used for their own purpose, and instances of Text should also be used for their own purpose, and as a result should not be baked into images!

Why? Images won’t load for everyone (where recipients have images turned off for example), or they can also load slowly, but most importantly, they are also not good for accessibility.

Regardless though, and important piece to always remember is that images should also not be greater than 1mb each, and failure to do so might mean a reduction in load time due to strain on the recipients network.

Keep it small - emails with lots of weight will see deliverability issues. Gmail will clip the end of any email that goes over 102kb and other clients may strip large images or reject the email altogether.

Keeping the number of sections you use to a minimum will help with reducing file size. Only start a new row if you need a different column layout.

Padding types - Knak allows you to set padding on a piece of content (text, image etc) and also on the row or column it's placed in. Using either type is fine, we recommend using the same type throughout your email to make editing simpler.

Padding consistency - Using the same padding on each side of an object will ensure it looks good on mobile as well as desktop. Uneven padding might not work so well when stacked for mobile.

If you have and email addresses, phone numbers or physical addresses as text in your email, make sure you add a link to those. If you don't many email clients such as Outlook will most likely add their own link which will generally be blue. Adding your own link allows you to control the link styling.

Text in your email:

How it may look when sent:

It goes without saying that your emails should always include an unsubscribe link which works and is easy to find. Consider adding 'forward to a friend' and 'view as webpage' as well. An email that's forwarded via an email client's forward button will likely not render well. A forward to a friend link will perform better.

To stack or not to stack - Some multiple column designs might not look great when stacked, to avoid that use Knak's 'do not stack option'

Stacking order - switching the stacking order can improve mobile flow, Knak allows you to switch the stacking order based on your design needs.

Mobile specific designs - Knak allows to you completely hide any piece of content on desktop or mobile. So you can have duplicate content sections to allow separate designs for mobile & desktop.
A word or warning, including lots of duplicated content in your emails will add extra weight so use it wisely and only where you need it.
​

Module categories - create your module categories before building modules so you have those setup and can assign to each module while its being built.
​

Clone for consistency - if you have a specific layout (alignment, padding, spacing etc) a good option is to build one module and then clone that to create additional modules. That way your layout will always be the same.
​

Build from modules - If you use modules to create your themes you can easily update multiple themes by selecting 'apply to themes' on any module. That will update each theme the module is used in with any changes to the module.

Define your brand attributes - Use brands to preset things like URL parameters, default from name/email & reply to email and your main colors. That way you don't have to set those each time you create an email.

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