Hybrid Templates Guide

Cover the largest number of mobile and desktop clients with hybrid designs

 

Hybrid design for your e-mailing template

Since e-mailings and newsletters are increasingly accessed on mobile devices, the display on smaller viewports should be given high priority. At the same time, of course, the optimal display of the mailing for desktop screens must be ensured. Hybrid programming technology makes exactly this possible: a clearly structured, mobile-oriented layout covers the largest number of mobile and desktop clients. At the same time, all size specifications and alignments remain the same in the desktop and mobile versions to ensure the most consistent appearance possible for your newsletter on all clients. In this guide, we explain what you need to consider when creating your template layout in hybrid design and what you should avoid.

 

Schematic diagram

A clearly structured, mobile-oriented layout covers the largest number of mobile and desktop clients.

 

Desktop view

 

Design Guide for Hybrid Templates

Important design basics

• Base your design on your corporate design and use a consistent layout. This will increase recognition in the inbox.
• Choose a clear and simple structure. In the end, this leads to a better presentation of the newsletter to the recipient. A hybrid-friendly layout does not include additional nesting in the table structure.
• Show different display options in your layout (e.g. articles with/without image, with/without headline, lots and little text, single-line and multi-line headlines).
• Also consider the integration of special elements (e.g. social media icons).
• Refrain from using background images and gradients, as these are not displayed correctly in some clients.
• The emailing is mainly centered in all relevant clients and browsers, has a background and may need lines to separate it from the background - a complete template layout includes all elements, such as background, borders and the emailing itself.
• Please keep in mind already during the layout creation that we need an open PSD file from you as a programming template for the implementation.

 

Content-related "must-haves"

• Unsubscribe option: The unsubscribe link in newsletters and e-mailings is mandatory and (best practice: one-click) should be placed in the footer.
• Imprint: For newsletters, the labeling obligation with all contact data applies.
• Tracking: It should be possible to deactivate personal tracking via a link in the newsletter.
• Everything else you need to know on the subject of "permissible e-mail marketing" can be found in the eco guideline: https://certified-senders.org/wp-content/uploads/2017/05/Marketing-Richtlinie.pdf

 

Font types and sizes

With a hybrid template, all size specifications remain the same in the desktop and mobile variants. This also applies to the font types and sizes. Therefore, make sure that the font size is already sufficient in the desktop version: To ensure readability at a smaller screen size, it makes sense to use a font size of at least 14 px to 16 px for body text and call-to-action buttons.

• Use only web-compliant, cross-platform, standard sans-serif fonts (Arial, Helvetica, and Verdana). Special fonts cannot be used.
• When designing the newsletter, limit yourself to a few font types and sizes, otherwise the newsletter may appear confusing and untrustworthy.
• A fixed height of text elements (headline multiple lines, short text with a fixed number of lines) should be avoided, as a fixed height is not supported by some clients and can lead to unsightly displays.
• No automatic hyphenation and no image wrapping text is possible.

 

Call-to-Action buttons

The width of a call-to-action button automatically adjusts to the length of the call-to-action text. As a rule, make sure that you use CTA texts that are as short as possible and activate at the same time (e.g. "Learn more" instead of "Learn more on the following pages"). The size of the button must be sufficient for finger operation on mobile devices. The font size should be at least 14 px. The buttons are programmed as fully clickable buttons.

• If possible, avoid CTA buttons with rounded corners. In some clients these are often displayed in an angular shape.
• Please note that when combining text CTA and CTA graphics, it cannot be guaranteed that the graphic will always be displayed at the correct height. In some clients, it is possible to move the graphic up and down.
• The line spacing of the text in the button cannot be programmed variably. Do without 2-line buttons.

The length of the CTA button depends on the text length.

 

Image sizes

• With a hybrid template, all size specifications and thus also the image sizes remain the same. Images are therefore only stored in one size and then, depending on the viewport, scaled down or, if possible, up. The aspect ratio of the image does not change during scaling.
• Do not define fixed image heights. When programming, only the width of the image is fixed in the template. The height is not defined, otherwise image distortion will occur if the editor does not embed the image in the correct size.
• Refrain from embedding text and logos within an image. Since images are scaled down, the image or text may become very small and therefore difficult to read. It is better to use a separate logo or text field for this purpose.
• Do not use "round icons", as these can quickly look "pixelated" due to the scaling on the different viewports.
• For technical reasons, images in the mobile view cannot be scaled up to the width of the viewport in all clients. In this case, the images are displayed in the same size in the mobile view as they are displayed or defined in the desktop view.

With text in images, the text can easily become illegible when the images are scaled.

 

Viewport

With the hybrid design, the newsletter automatically adapts to different device sizes as soon as the maximum width of the newsletter (e.g. 600 px) on the respective viewport (e.g. desktop screen, preview window Outlook, mobile device) is undercut.

 

Newsletter display in different viewports.

 

Show and hide elements

The hybrid programming does without media queries. Adding and hiding elements (e.g. table of contents is displayed in the desktop version, but not in the mobile version) is therefore not possible. Therefore, when designing your system, note that all elements must be available in both versions.

 

Newsletter width and base spacing

With a hybrid template, all size specifications and orientations remain the same in the desktop and mobile versions. All multi-column areas of the layout automatically become a single-column layout in the mobile version. For this, each object necessarily requires the same so-called base spacing. This base distance defines the distance between the objects in the desktop version and the distance to the display edge in the mobile version. The total width of the newsletter is then the sum of the individual column variations. The newsletter width should be between 600 and 780 px for the desktop version and 320 px for the mobile version.

 

1-column layout

An article always goes over the entire width of the newsletter. The text can also be placed next to the image.

Column width: 660 px
Article range: 640 px (= total width - 2 x base distance(red))

 

2-column layout

An article takes up half of the total width of the newsletter.

 

Column width: 330 px (= total width : 2)
Article width: 310 px (= column width - 2 x base distance (red))

 

3-column layout

An article takes up one third of the total width of the newsletter.

 

Column width: 220 px (= total width : 3)
Article width: 200 px (= column width - 2 x base distance (red))

 

Spacing between article elements

The detailed views for the different article layouts (1-column, 2-column, 3-column) can be found on the following pages. Please note that the pixel specifications are examples based on the general design principles. In particular, it should be made clear here that all size specifications and spacing are identical in the desktop and mobile versions.

 

1-column layout: image above/below text

Regardless of the article layout, all spacing and font sizes remain the same in the desktop and mobile versions.

 

Base spacing: 10 px (red)
Font size Headline: 18 px
Font size Short text: 14 px
Distance A: 15 px
Distance B: 10 px
Distance C: 10 px
Distance D: 10 px
CTA font size 16 px

 

1-column layout: image next to text

Since this article layout with image next to text from the structure behaves like a 2-column layout, it should be noted that the double base distance between the objects is created. In the desktop version there is a double horizontal base distance between image and text, in the mobile version a vertical one.

 

 

1-column layout: image without base spacing

If you want to use images without base spacing in your layout, this is of course also possible. In this case, please note that the base spacing for the other (text) elements of the newsletter must still be taken into account.

 

 

Multi-column layouts and spacing

If multiple-column layout variants are required for articles, we recommend that you create them in 2 columns with a 50:50 split. To meet the requirements of a clearly structured and mobile-oriented layout, the use of 1 and 2-column articles is optimal for content maintenance. For a 3-column article layout, please consider the special features mentioned in the design guide.

2-column layout

Even in multi-column layouts, all spacing and font sizes remain the same in the desktop and mobile versions.

Base spacing: 10 px (red)
Font size Headline: 18 px
Font size Short text: 14 px
Distance A: 15 px
Distance B: 10 px
Distance C: 10 px
Distance D: 10 px
CTA font size 16 px

 

3-column layout

If you are considering a 3-column layout,
please consider the following:

• 3-column articles usually become very narrow. Since mail clients do not support hyphenation, longer words can quickly move the entire layout.
• There is a danger that texts in buttons become too long and the button is displayed in 2 lines. Since the line spacing in the button cannot be programmed variably, this leads to display problems.

 

In the mobile view, the articles are displayed one below the other, analogous to the 2-column layout.

 

 

Arrangement of the elements

Elements within an article

When arranging the elements (image, headline, short text, etc.) within an article, you are basically flexible in the design. The arrangement defined in the layout is then adopted for programming. For 1-column articles with an image on the left or right and a text area next to it, you can decide whether the right element is displayed before or after the left element in the mobile version.

The text block can be arranged either before or after the image in the mobile version, but this must first be defined in the programming.

 

Alignment of objects

With a hybrid template, not only the size specifications but also the alignment always remain the same. All objects within an article must be uniformly aligned (all elements right-aligned, left-aligned OR centered) so that no unattractive offset occurs in the mobile version.

 

Image and text left aligned

 

If objects are arranged uniformly in the newsletter, there is no offset in the mobile view.

 

Image and text aligned left/right

 

If objects in the newsletter are right- and left-aligned, an unattractive offset occurs in the mobile view.

 

File requests (PSD) for the screen design

To program the template, we need your approved hybrid layout as an open PSD file. Our programmers take all sizes and distances from the PSD file 1:1. The PSD file must meet the following requirements:

• Color space: RGB
• Resolution: 72 dpi
• Attachment: open in layers (text and images)
• Texts: embedded as text (only web conform standard fonts Arial, Verdana, Helvetica)
• Distances and sizes: clean and uniform in whole pixels
• Logical, clean layer structure and layers meaningfully named
• A PSD file for the desktop layout and a separate PSD file for the mobile version (possibly additional
• PSD file for the landing page layout, see "Additional display formats")
• Deliver logos and social media icons separately as transparent PNG

 

Additional forms of presentation

A hybrid template always includes the following display variants: e-mail (HTML) for desktop and mobile as well as e-mail (text). The text version is automatically generated on the basis of the HTML variant and displayed for e-mail clients that cannot or should not display HTML. We do not require a separate template from you for this. If you also want to display extended contents of an article (long text) on a landing page, we need a separate template from you. The landing page layout is usually strongly oriented towards the template layout. In particular, the header and footer areas are often copied 1:1 from the mailing. In addition, an image gallery could be integrated into the landing page, for example.

 

Presentation forms of the newsletter

When creating a template, the various forms of presentation must be taken into account.

 

Even without a template own landing page you have the possibility to link to an external, already existing website by entering the corresponding URL in the article. If you require a PDF version, i.e. a print-optimised form of the newsletter, please contact us.

 

Client and browser compatibility

In the course of the technical implementation of e-mail, landing page and website templates, deviations from the original design may occur, e.g. in the visual alignment, colour fidelity and font styles and representations. There is no claim to 100% visual feasibility. No guarantee is given for a correct display in future browser and client versions. Subsequent corrections will be made according to expenditure.

 

Optimization for e-mail clients

Hybrid e-mail templates are optimized for the following e-mail clients in the respective current or common versions supported by the manufacturer

• Microsoft Outlook (Windows Desktop Version from 2007)
• Apple Mail
• Apple iPhone/iPad Mail App
• Thunderderbird
• Android Mail (native)
• Gmail app on Android

 

Optimization for Browser

Landingpages are optimized for the following Internet browsers in their current or common and manufacturer-supported versions:

• Firefox (also for mobile devices)
• Google Chrome
• Apple Safari (also for iOS)
• Microsoft Internet Explorer Version 9 or higher
• Microsoft Edge

The display may vary slightly in the different clients. The optimization of further clients/browsers must be coordinated with SC-Networks GmbH in advance.