[EN] Important Notes

Notes on creating your Razor template

Here you will find answers and solutions to the most common questions and problems encountered when implementing a template.

Tables

Attributes

Tables should always contain the following attributes to prevent unexpected behaviour in clients.

<table width="..." cellspacing="0" cellpadding="0" border="0">
	...
</table>

Widths

The widths of tables, cells and images must always be set using HTML attributes and not CSS properties, as CSS is not sufficiently supported.

<table width="100%">
	<tr>
		<td width="50%"> ... </td>
	</tr>
</table>

Outlook

The layout must be divided into individual tables when sending, as Outlook uses the Word engine and individual elements (tags) must not exceed 2000 pixels. It is recommended that the individual sections be created as separate tables and the introduction and conclusion as separate tables, which in turn must not be encapsulated in a table.

Spaces

Spaces (‘spacers’) should not be created using images in cells or padding, but rather using a cell that contains a ‘non-breaking space’ ( ). The cell also requires the following style attribute so that the height and width of the spacer can be set using the HTML attributes width and height.

The height of the spacer cannot be less than 10 pixels, as it would be ignored in Outlook and considered hidden text by many spam filters, which would increase the likelihood of it being marked as spam.

<td height="20" width="20" style="font-size: 10px; line-height: 10px"> </td>

Images

General

Images should only be influenced via a parent element to simplify the handling of the source code and the configuration of the template in mailworx.

Links

All images require the attribute border=‘0’, as otherwise Internet Explorer or Outlook will display a border around the image when linked.

In addition, the following selector can also be included in the style tag:

img {
	border: 0 !important;
}

Scaling

If images are to be scaled proportionally in the mobile view, they must be given the following properties: max-width: 100%; height: auto !important;
Resetting the height is necessary so that the images adapt to the width of the parent element. This can also be reversed and used to adapt to the height using: max-height: 100%; width: auto !important; However, this is not common practice.

/* Proportionales Skalieren eines Bildes */
[class*=scale] img {
	max-width: 100%; 
	height: auto !important;
}

For images that contain a shadow at the bottom of the template, the following properties must be applied in the mobile view so that they are displayed distorted rather than proportionally: width: 100% !important;

/* Verzerren eines Bildes, um die Höhe zu erhalten */
[class*=skew] img {
	width: 100%; 
}

Mobile optimisation

Hiding

Content can be hidden in the mobile view using media queries and the CSS property display: none;

This is not possible in the desktop view, as many clients do not allow this for security reasons.

Two-column layout

If two columns are to be displayed one below the other in the mobile view, it is not possible to set the content across the two columns to the same height if one element contains more content than the other.

Example:

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1 and Cell 3 cannot be automatically aligned if the mobile display must look like this:

Cell 1

Cell 2

Cell 3

Cell 4

Break tables

To display the columns of a table one below the other (break them), this code should be used in a media query.

This prevents child tables from also being broken and thus dissolved.

[class*=break] > tbody, [class*=break] > tbody > tr, [class*=break] > tbody > tr > td, 
[class*=break] > tr, [class*=break] > tr > td {
	float: left;
	width: 100% !important;
}

Avoid widths in pixels

Widths in pixels should be used very sparingly and with caution, as they only complicate mobile optimisation of the template unnecessarily.

The much more stable option is to give only the main table a fixed width, which is necessary to ensure that the newsletter is displayed optimally in the desktop view. For mobile devices, the width can be overwritten to 100% using media queries.

For all other widths in the newsletter, only percentage values should be used for the desktop version as well, since the newsletter is automatically adjusted when the width of the main tables is changed, if the content allows this.

Minimum button size

Clickable content should have a minimum size of 40×40 pixels for the mobile view so that it can be used easily and comfortably with your hands.

Example:

Mobile newsletter templates