The balancing act is to ensure that the mailing looks good on every device, whether it is a smartwatch or an 80-inch TV. To avoid having to create a separate design for every possible device, a responsive design with flexible adjustment in terms of size and image formats is necessary. This can be achieved with media queries.
Media queries are CSS3 commands that query the characteristics of the device and adapt the mailing to the conditions. In principle, most mobile mail clients support media queries, but there are always exceptions, such as Microsoft Surface.
Often just a few media queries are enough to achieve an optimized display. The most important points are:
Flexible adaptation of the layout to the window or screen width
Automatically adjust the size of images depending on the window or screen width
Converting a multi-column mailing layout into a single-column layout, depending on the window or screen width
Converting web links into buttons
The media queries are only queried when a mailing is loaded austria phone number data and are therefore adapted ad hoc to the end device. As can be seen in the example, the layout adapts to the respective conditions.
Ensure the quality of the mailing
In the best case, the content of the respective mailing adapts perfectly to the corresponding conditions, but as the saying goes - trust is good, control is better. Many email marketing applications offer integrated preview functions for typical screen sizes. In EMM, for example, the following are available:
Desktop, tablet portrait, tablet landscape, mobile portrait, mobile landscape
However, this selection only gives a taste of the actual display. In addition to the screen size, browsers and email clients should also be taken into account. Here you can either test it yourself using different devices and browsers or you can use an inbox preview, which is also integrated in the EMM. This is of course the more convenient option. The inbox preview takes the most common operating systems and browsers into account. This quickly shows whether there are any problems with certain options.
In our experience, Microsoft Outlook, for example, is one of the most common problem children - it looks good everywhere, but not in Outlook. The problem here is that Outlook uses Word as the basis for outputting the mailing and not Internet Explorer or Edge, which can lead to display problems. It can happen that certain CSS commands are not executed or images are not loaded. At this point, it is unfortunately necessary to put additional effort into the responsive design in order to minimize sources of error.