Newsletters design advice
To think about when designing newsletter templates
Creating this nice and perfect email is basically an easy thing, but due to varying CSS support in different mail clients, it may be good to be aware of some details before you start designing. In order to make your mail template work as well as possible in as many mail clients and devices as possible, the following points are worth taking to account.
- If you want a custom template from us, it’s good if we get the design base as a Photoshop file. This allows us to get fonts, sizes and margins directly from the PSD file.
- The maximum width of your email should not exceed 660 pixels. This will work well in all mail clients.
- For photos to look great in smaller devices, it’s good if they have a maximum width of 640 pixels.
- Only regular font faces like Times New Roman, Arial and Verdana are supported in text. You can use Google Fonts, but the support is not 100%. Read more about web-safe fonts.
- Because the templates are made in tables, it is useful to use a grid when designing your template.
- Most mail clients are not compatible with wallpapers/background images, so use background colors instead.
- The support for video in email is limited and the risk of your mail being classified as spam increases if it contains Flash and / or JavaScript. Instead, use an animated gif image or link an image on the video player to the video. For a detailed example, see our blog post on video in newsletters
- Keep in mind that CSS3 and HTML5 components such as border radius, box shadow, or @font face have no greater support.
- Most mail clients automatically block images and replace them with an empty box. So when uploading images to your emails, do not forget to put an alt-text on the image so that the optional blank box gets a descriptive text.
- Text & images that reside over another image will not work.
- Do not let your subscribers have to load large emails. Therefore, consider the size of the images. Some 100kb per image is optimal.