Design tips for templates

Getting that stylish and perfect mailing is basically a simple matter, but due to varying CSS support in different mail clients, it's a good idea to be aware of some details. When we create the template for you, we are told that it is responsive and works well in all devices (desktop, mobile, toad etc). To make your mailing work well in as many mail clients and devices as possible, please refer you to the points below:

  • If you want a custom-made template from us, it's good if we get the dossier as a Figma project. This allows us to get fonts, sizes and margins directly from the dossiers. Or if you want to start from our Photoshop template.
  • When we receive the documentation from you, we will at this point inform you of any technical restrictions.
  • We will then communicate any corrections that you as a customer need to make to the dossier.
  • The maximum width of your email should not exceed 660 pixels. This works well in all mail clients.
  • For images to look good in smaller units, it is good if they have a maximum width of 640 pixels.
  • Only common 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%. Learn more about Web-safe fonts.
  • Because the templates are made in tables, it is good to start from a grid/grid, where each block fits independently of the block above or below.
  • Most mail clients are not compatible with background images, so use background colors instead.
  • The support for video in email is small and the risk that your mailing is classed as spam increases if it contains Flash and/or JavaScript. Instead, use an animated GIF image or link an image to the video player. For a detailed example, see our blog post about video in newsletters
  • Keep in mind that CSS3 and HTML5 parts, such as border-radius, box-shadow, or @font face, don't have any major support.
  • Most mail clients automatically block images and replace them with an empty box. So when uploading images to your mailing, do not forget to put an alt text on the image so the possibly blank box will get a descriptive text.
  • Text & images that are over another image do not work.
  • There is also the possibility to have darkmode in its template, this is an additional addition in the template. 
  • Don't let your subscribers have to load large emails. Therefore, consider the size of images. Some 100kb per image works fine. If you have any questions about templates and restrictions, please contact us at support@rule.se
  • The design material is sent to support@rule.se or uploaded directly in the app.

Need more help? Contact Us Contact Us