Designing newsletters

Using templates, you can create mailings in a CI-compliant layout – with no graphics or HTML skills required. Templates offer you the flexibility you need by letting you design each element One component of a campaign. As examples, recipients and email are elements. Nodes are used to transfer elements through the sequence of actions that occur when a campaign is activated. individually. And you do not have to worry about losing your overall layout, because templates store settings inherited from higher-level elements. Benefit: Text and mobile versions of your HTML mailings are generated automatically and can be edited subsequently.

Layout fundamentals

Each paragraph in a template and even the template itself provides a range of design options that can affect the layout of your newsletter:

• Background color of the newsletter and newsletter background
• Background color or images incorporated into individual paragraphs
• Width of the newsletter
• Number of columns
• Margins and spacing of individual paragraphs

Examples and comments

• Pre-Header. The pre-header contains a link to the online version. You can add pre-headers to display information prominently so that it is likely to catch the reader's eye.

  

• Header. The header contains an image and the newsletter's title. You can insert additional elements, such as date and issue. A graphics editor lets you incorporate elaborate text effects.

  

• Sidebar. The sidebar produces a two-column layout. In this example, the sidebar is given a different color to set it apart from the main body of the newsletter. If you choose this type of layout, set an inner margin to create a space between the box and the text. Similarly, set a margin between the sidebar and the main body of the newsletter so that the text/image block in the main body does not "cling" to the sidebar.

  

• Main area. The main area has the same color as the entire newsletter. The text/image paragraph runs across the total available width and does not require an inner margin. The image is centered between the title and the text. A teaser text links to a landing page.
• Table of contents. The table of contents is a separate type of paragraph and can be placed anywhere in the template. You can set a table of contents in a fixed position in individual mailing templates. You can enter the text that the table of contents displays into the individual paragraphs – or use the paragraph headings (standard).
• Image position. Here, the image is positioned on the left next to the heading. Larger images should be scaled down to 50 % of the available width. Images are positioned relative to text, link and heading. If you choose to position an image to the left below the heading, as opposed to the position shown here, then the heading will not be incorporated, which means it will appear across the full width of the paragraph.
• Inline block. Paragraphs with narrower widths are placed next to one another until the maximum width is filled. This way, you can create a layout with consecutive, variable columns. If the width is set to a particular portion of the total available width, then the individual blocks fill out the space precisely as indicated, generating a column layout.
• Empty column. In contrast to a single column layout, the sidebar is left blank, if no content is to be entered.
• Single column. With a single-column layout, a paragraph spans the entire width of the newsletter. To create a template with a variety of layouts (for example single-column or two-column), you will need to use paragraph outlines or special paragraphs.

  

• Background color. A single background color (the same as used for the sidebar) is chosen for these paragraphs. Set an inner margin to add space between the text block and the paragraph frame.
• Variable footer. A footer can contain multiple paragraphs. You can treat footer paragraphs the same as content paragraphs.
• Fixed footer. This footer contains the site notice and contact information for the newsletter. This usually also includes the unsubscribe option required by law. The paragraph is permanently stored and normally does not need to be adapted or edited further.

  

• Newsletter width. The ideal newsletter width depends on the recipient's device (responsive design):
  • Desktop version. 600 to 650 pixels.
  • Mobile version. 480 pixels (see Mobile Fusion).

Supported fonts

The Template Kit supports the following fonts.

• Arial
• Comic Sans
• Courier New
• Georgia
• Lucinda Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

You can store other fonts as an image in the Template Kit. Texts used this way cannot be edited with the Template Kit.

Design options

You cannot display color and background gradients and shadowing, but you can round off edges. If you want to create the message template in Optimizely Campaign yourself, do this in the relevant grouping paragraphs using the Border option.

Mobile Fusion

The Template Kit lets you preview your mailing on selected smart phones and tablets. So, you can check the vertical and horizontal mobile appearance of your newsletter.

Mobile content elements appear below one another, so a mobile reader does not have to scroll sideways, but can scroll up and down. And, you can specify whether images or text is shown first in content areas. You also have the option to show or hide content areas on the desktop versus the mobile version.

For more information, see Mobile Fusion.