Designing newsletters

6 min

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 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.

Tip

Lacking inspiration? Optimizely can create your newsletter for you.

Optimizely can design your message template. On request, we can also implement your message template into Optimizely Campaign. For more information, contact customer support.

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.

Image: Pre-Header

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.

Image: Header

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.

Image: 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.

Image: Single column

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.

Image: Fixed footer

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.

Note

Images in the mailing are visible only after loading.

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.