Example 1 - Header with banner graphic and navigation bar (text links)
In this example, the header contains a banner graphic and a navigation bar with text links. The banner graphic and the navigation bar are used for both the desktop and the mobile view. In this case, the banner graphic is scaled by the Advanced Template depending on the device. In other words, the size of the banner graphic adjusts automatically to the size of the device display. In this scenario, you do not need to configure any settings in connection with the mobile view.
The font size does not generally decrease in the mobile view, as text would otherwise no longer be legible. For the navigation bar comprising text links, this means that it wraps when it goes below a certain width.
Desktop display
_4.8.11_1.0_de_mobile_optimierung/c_einfacher_kopfbereich_desktopdarstellung_de.png)
Mobile display
_4.8.11_1.0_de_mobile_optimierung/c_einfacher_kopfbereich_mobile_darstellung_de.png)
Mailing editor view
_4.8.11_1.0_de_mobile_optimierung/s_advanced_template_kopfbereich_beispiel_1_de.png)
Note If you use optional banner graphic elements (left/right) in the Banner element (header), you should always construct the navigation bar using images. Background: The various email clients interpret browser font sizes differently. When using optional banner graphic elements in combination with the navigation bar (text links) element, this will lead to a ‘slipping’ of the optional banner graphic elements.
Related topics
