Things to keep in mind when designing email templates
Creating a nice and perfect email can seem like a simple thing, but due to varying CSS support in different email clients, it can be good to be aware of some details. To make your email work as well as possible in as many email clients and devices as possible, our design tips for newsletter templates are worth considering. Let yourself also be inspired by different examples of newsletters and how you can convey the same unique and stylish feeling as on your website, in your emails.
When you become a Rule customer you get a free customized newsletter template. You design the template according to the desired branding and layout. We then make sure to create the best possible result according to technical conditions. If you then want to make changes to your basic template, or want more templates, we will arrange it in no time. The possibilities with newsletter templates are many and they can be easily adapted to holidays and specific occasions, if desired.
- If you want a customized newsletter template from us, we prefer to get the material as a Figma project. This means that we can get fonts, sizes and margins directly from the data. It is also possible to start out from our Photoshop template if you prefer.
- The maximum width of your newsletter should not exceed 660 pixels. Then it works well in all email clients.
- For images to look good in smaller devices, it is good if they have a maximum width of 640 pixels.
- Only standard web fonts such as Times New Roman, Arial and Verdana are supported in text. You can use Google Fonts, for example, but the support is not 100%. Read more about web-safe fonts.
- Since the templates are made in tables, it’s good to start from a grid, where each block fits independently of the block above or below.
- Most email clients are not compatible with wallpapers, so use background colors instead.
- Support for video in email is limited and the risk of your email 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 about video in newsletters.
- Keep in mind that CSS3 and HTML5 elements such as border-radius, box-shadow or @font face have no major support.
- Text & images over another image do not work.
- Most email clients automatically block images and replace them with an empty box. So when you upload pictures to your email, do not forget to put an alt text on the picture so the possibly empty box gets a descriptive text.
- Do not let your subscribers have to load large emails. Therefore, think about the size of images. Some 100kb per image is optimal.
