[EN] Design specifications

Your individual newsletter design

Would you like to create your own newsletter design that is perfectly tailored to your company's corporate design? Excellent decision – this will not only set you apart from your competitors in the email inbox, but also create the optimal recognition value for all your marketing activities.

In this whitepaper, you will find the most important tips and tricks on how to prepare your new newsletter design so that we can implement it according to your wishes and requirements.

If you follow the specifications of our template experts, it's child's play in the eworx Marketing Suite and you can start sending your individual newsletters in no time. Before you get started, however, you have one more important decision to make:

Have you already decided between the mobile-first or desktop-first approach?

Take a look at your newsletter statistics to see which devices your readers use most often to open your newsletter.

Is your focus on desktop clients?
Then please send us a desktop design for your newsletter; a mobile design is not absolutely necessary. We implement mobile standards directly in the template creation process.

Does your subscriber group open more on mobile clients?
Then please send us a mobile and a desktop design.

If you have any questions, please feel free to contact us directly.

In which format should the newsletter design be delivered?

• Photoshop
• XD
• Figma
• InDesign

The design should be delivered in a format that allows us to extract the font sizes, all colours and image sizes directly from the file. Please ensure that pixel values are used.

We also accept HTML files, but all text must be contained in the file as such.

The following formats are not supported:

• Illustrator: The information in the file is vector-based and therefore not suitable for use in newsletters.
• PDF: The information is not suitable for use in newsletters as the file is optimised for printing.

How wide should the newsletter be?

Depending on where the focus lies, this decision should be reflected in the maximum width of the newsletter design.

For a design primarily intended for mobile clients, a maximum width of between 600px and 660px is recommended.

For a design intended for desktop clients, the width can vary greatly. Most newsletters have a width between 660px and 780px.

What font sizes should be used?

Based on current accessibility guidelines, the following font sizes are recommended:

• Headings from 16px
• Body text 14-16px (the recommended line height here is 1.5 times the font size)
• Lead out Minimum 12px

In general, font sizes below 12px should not be used, as the newsletter may otherwise be declared spam and the text will be difficult to read.

Which fonts can be used?

In newsletters, you should use web-safe fonts (e.g. Arial, Verdana, Georgia, etc.), as these are installed as standard on most devices. If you want to use a web font, we recommend using Google Fonts.

Other special fonts used in your company's CI can also be used in our templates if you provide them to us.

Some email clients do not support web fonts or special fonts (e.g. Gmail, GMX/Web.de). In this case, the email client will use a web-safe font predefined by us, also known as a fallback font.

A fallback font will also be used for clients that do not have the special font installed.

How should the newsletter be structured?

The visual structure of sections should be aligned. Text and images should start and end at the same height. Using the programmes mentioned above, this can be visually represented very well with ‘guidelines’ and the spacing can be measured.

Can I integrate videos into the newsletter?

It is not possible to directly embed a video in your newsletter so that it starts playing directly in the email client when clicked.

However, we can activate the video function for individual image placeholders on request. Further information on the video function can be found in this white paper.

As a second alternative to the video function, you can insert a thumbnail (preview image) of your video with a play button and link it to the desired video. Or use the video function via the image placeholders.

Is it possible to integrate background images?

In principle, it is possible to integrate background images into the newsletter. However, there are some restrictions regarding email client support.

Restrictions in Outlook:

• Excessively high image quality causes long loading times
• Too many background images cause long loading times

Mobile display of background images:

Background images can be displayed in various ways on mobile devices. It is important to choose the right one for you. Our design experts will be happy to advise you.

The following display options are generally available:

Text below image: A very common method – especially in the header area – is to place the text below the image on mobile devices. This allows the background image to be shown in its entirety.

Text in image: There are two options available for displaying text in the background image on mobile devices.

Text positioning adapts to image size:

The text position is calculated proportionally to the image size. The display is therefore similar to the desktop view. However, as there is only one calculation for all mobile devices, the background image may be cropped at the bottom up to a certain screen size.

Our recommendation: Image section is adjusted to the width of the screen:
Instead of a calculation, there is a fixed image height. As the screen width becomes smaller, an image section is displayed. This option is mostly used in current newsletter implementations. Furthermore, there is the option of setting so-called ‘focus points’ (left, centre, right).

Are transparencies supported in newsletters?

Transparency in newsletters can be implemented using CSS, but it is not supported by all email clients (this applies to all versions of Outlook up to Office 365 and GMX/Web.de).

If the transparent colour is not supported, the corresponding solid colour is displayed instead.

Can CSS be used in newsletters?

Email clients only support a limited range of CSS properties. The following properties are not supported globally:

• Hover effects
• Rounded corners
• Shadows
• Animations

Is there a way to integrate JavaScript into the newsletter?

No, unfortunately this is not possible, as most mail clients do not support JavaScript.

Another argument against integrating JavaScript is that it increases the likelihood of emails being classified as spam.

Our recommendation
Instead of JavaScript animations, use animated GIFs.

The following clients do not support animated GIFs

• Outlook 2007-2016

On these devices, the first frame is used as a still image.

If you have any questions, please feel free to contact us.