Design options
The basics of the design of e-mail templates refer to the template size, layout, branding and, if necessary, custom code templates.
How large an e-mail template should be is not directly clear. Here the opinions differ. However, most e-mail tool providers use settings that have a width of 600 pixels (px) to 800 px. For example, a format of 600 px in total width and a 300 px column width has proven to be best. The main advantage here is that the display is positive both in the desktop applications of the e-mail clients, in the browser, and on mobile devices. The 300 px column width guarantees a clean break of the content on most end devices. Even when using mobile devices, where the total width is scaled by up to 50 percent, the quality remains acceptable. However, the use of 600 px to 300 px rasters is not appropriate for the new iPhone generations, especially the Plus variants, as the screens of these devices use widths of over 300 px.
Adjustments to the templates, so that users of these models also receive the optimal presentation of the e-mails, are only worthwhile for larger distribution lists. For companies such as Adidas or Nike, for example, which have distribution lists with several million e-mail addresses, the creation of a template for such end devices is definitely worthwhile. However, this is rather the exception and is out of the question, especially at the beginning of e-mail marketing and the associated, significantly smaller distribution lists, due to the cost-benefit ratio. The optimal template size for your own e-mails can also be obtained by analyzing the e-mail clients used and by running several tests on different display sizes.
The template layout usually depends on the two factors “mailing task” and the size of the template.
- On the one hand, there are single-column templates, which are used especially for the presentation of individual topics such as announcements or longer articles. The single-column design allows the reader to look at the mailing in a linear fashion, which increases attention and makes it easier to read. The disadvantage, however, is that, depending on the amount of content, the e-mail can be very lengthy and the reader has to scroll a lot.
- Multi-column layouts are mainly used to display products or several articles. This makes them particularly suitable for newsletters on websites with considerable content by using them as a traffic source for these websites. Before using multi-column layouts, you should test extensively whether the e-mails are displayed according to your own ideas. A multi-column layout can be problematic, especially on mobile devices. Even a three-column layout can lead to undesired effects on the alignment of graphics. When displaying on desktops, the colors and texts must be coordinated to avoid visual confusion.
There is also the option of programming an e-mail template in HTML (Custom Code Templates). Especially the creative design potential is almost unlimited. This is reflected above all in the high price, as custom code templates are mainly concerned with the integration of graphic details in inline CSS (Cascading Style Sheets = “language” for electronic documents) and the optimisation of mobile presentation on various e-mail clients.
The branding of the company’s own e-mails is an important pillar, as are the preceding design options in e-mail marketing. The e-mails sent should have the same branding as your own website, Facebook profile or other advertisements. This increases the recognition value enormously. For example, the company logo can adorn the header of the e-mails and the company colours determine the colour scheme of the e-mails. But also the image and text language should match the corporate design of the company in order to create a consistent appearance throughout.
Campaign Monitor and the Design School offer some inspiration for ideas in the area of template design possibilities, which can be examined more closely at https://bit.ly/OMREmailcampaignse and https://bit.ly/OMRDesignschool. Further suggestions can be found at https://reallygoodemails.com/.
The necessary distinction between mobile and desktop templates
It makes a difference whether e-mails are accessed on mobile devices or via the desktop. In most cases, the image that the user receives via a desktop is, as already described above, different from the image received via a smartphone. The correct break of elements as well as the alignment and scaling of images is not automatically given. For this reason, some e-mail tool providers have already developed “What You See Is What You Get” editors. This opens up the possibility of designing different templates for different views.
Of particular importance is the font, but also the font size. For templates that are used on a desktop, font sizes of 14 px to 16 px are usually used, as this ensures good readability. For a smartphone, this view would be too large, which is why an adjustment is necessary.
Adaptation is also indispensable for font elements on graphic elements or buttons, since the views differ greatly between large screens and mobile devices, for example. If no adjustments are made for mobile devices, scaling can lead to complete illegibility of the image content.
In addition, it can make sense to rectify or completely remove certain elements such as a large number of images or detailed navigation for the mobile view by deactivating them. Otherwise, it can lead to the mobile view quickly becoming overloaded. Examples of successful mobile and desktop templates are the online shops REBELLE and NAU Clothing.
The template and the CTA
The aim of the mailing is to ensure that the customer actually makes use of the offer submitted to him. One of the prerequisites for this is, of course, that the customer can see at a glance how he can do this. The CTA must therefore not get lost in the rest of the template design.
In most cases, e-mail templates are designed as a complete product, but it is ignored that the user can never see the newsletter in its full size. In most cases, the user only sees the top 20 percent of the e-mail. For this reason it is all the more important how this relatively small area is designed. It should be ensured that the reader of the e-mail actually understands the offer presented to him. In addition, the user should be encouraged to convert directly by positioning the CTA in a sensible way, and interest should be aroused in remaining in the e-mail. It makes most sense if the user encounters the CTA immediately after opening the e-mail. An example of a successful positioning of the template is the newsletter of the company Home24.
Of course, there are also users who do not go straight to a conversion as soon as they see the CTA button. These users would like to receive more information in advance, before they are even ready for conversion. For this reason, the CTA should not be available exclusively at the beginning of the e-mail, but also elsewhere in the newsletter. Possibilities for additional placements of CTA are for example after reading the introduction, after viewing the offered products or articles or also at the end of the e-mail.
Tools for the template design
As already mentioned above, testing is an important tool for an optimal template design. Since each e-mail client analyzes, interprets and reproduces the sent templates differently, it is all the more useful to be able to detect any unpleasant sources of error before sending them via an e-mail distribution list and thus avoid them. The Litmus service can be used to check the optimal representation of your own template design on various e-mail clients. This service is used to test the HTML of the created templates using virtual e-mail inboxes of the most popular e-mail clients. This gives the user a realistic picture of the e-mail rendering. This service can be found at https://litmus.com/email-testing.
