Workspace

The Workspace pane is where everything comes together. It is the contents of the page, the WYSIWYG editor that shows what the output will look like.

The Workspace contains three tabs, or four, when a Web section is open. To switch between the tabs, click on the tab at the bottom, or select View > Design View, Preview View or Source View on the menu.

A lock icon displayed next to the file name indicates that the file is read-only. Saving a read-only file opens the Save as dialog, allowing you to save the file under a different name. The new file is then opened and can be edited in the Designer.

For an overview of keyboard shortcuts, see Keyboard shortcuts.

Design tab

The Design tab shows the template including all styles, text and images as well as the placeholders used for variable data. In this tab, the template's scripts are not executed and only placeholders are shown.

Normally you would only edit a template in Design mode.

The top of the Design tab contains an area with the following options and buttons:

Breadcrumbs: Displays the element type where the cursor is located and any of its parent elements. Elements with classes or IDs show these details next to them, for instance div #contents > ol.salesitems > li. Click on an element in the Breadcrumbs to select it.
When an element is selected in the breadcrumbs and the Backspace or Delete key is pressed, that element is deleted.
If the deleted element was targeted by a script, you will be asked if you want to delete the script as well.
Context Selector: Displays the current context. The drop-down lists available contexts. Clicking on a context switches to that context.
Section Selector: Displays the currently active section. Clicking on another section switches to that section.
Media Selector (Master Page editor only): Displays a list of Media resources. Clicking on a media will display its Virtual Stationery background while in Preview mode.
Zoom Level: Displays the current zoom level and drops-down to change the level.
Buttons
- Zoom in: Zooms in by 25%
- Zoom out: Zooms out by 25%
- Actual Size: Zooms to 100%.
- Fit Width: Adjusts zoom to fit the exact width of the template to the available workspace.
- Refresh: Reloads the view, including static external images, remote stylesheets, and remote scripts, and re-runs the scripts (the latter in Preview Mode only).
- Responsive Design View: Use the drop-down to select a specific screen width, to test the design for different devices. Not available in Print contexts.

Tip: You can also use the mouse's scroll wheel in combination with the Ctrl button to gradually zoom in or out.

When a template is open, the workspace also shows a ruler and guides (see Guides).

Preview tab

The Preview tab shows the section as it will output with the current record (see Loading data), showing the personalized content (see Personalizing content). Content added by a script isn't visible in the Design tab, but is visible and can be inspected in the Preview mode.

Content cannot be edited in Preview mode if the option Evaluate Handlebars expressions is enabled for a section (which is the case by default in a new template; see Section properties dialogs).

Source tab

The source tab displays the HTML source of the section, including HTML Headers, CSS and HTML code. The source is displayed in a color-coded text editor, to quickly visualize the code.
In this tab changes and adjustments can be made to the code. When editing a template in Source mode you should write HTML. For shortcuts that can be used in this editor, see Text editors: Source tab, JavaScript, CSS, Script Editor and Designing an Email templateWith the Designer you can design Email templates. It is strongly recommended to start creating an Email template with an Email Template Wizard, because it is challenging to design HTML email that looks good on all email clients, devices and screen sizes that customers use when they are reading their email.This topic explains why designing HTML email design is as challenging as it is, which solutions are used in the Email Template Wizards and it lists good practices, for example regarding the use of images in HTML email. It will help you to create the best possible Email templates in the Designer.HTML email challengesCreating HTML email isn't like designing for the Web. That's because email clients aren't like web browsers. Email clients pass HTML email through a preprocessor to remove anything that could be dangerous, introduce privacy concerns or cause the email client to behave unexpectedly. This includes removing javascript, object and embed tags, and unrecognized tags. Most preprocessors are overly restrictive and remove anything with the slightest potential to affect the layout of their email client. Next, the HTML has to be rendered so that it is safe to show within the email client. Unfortunately, desktop, webmail, and mobile clients all use different rendering engines, which support different subsets of HTML and CSS. More often than not, the result of these operations is that they completely break the HTML email's layout.Designing HTML email in OL Connect DesignerThe problem of HTML email is that preprocessing and rendering engines break the HTML email's layout. HTML tables, however, are mostly left untroubled. As they are supported by every major email client, they are pretty much the only way to design HTML emails that are universally supported. That's why Tables are heavily used to position text and images in HTML email.Nesting tables (putting tables in table cells) and applying CSS styles to each table cell to make the email look good on all screen sizes is a precision work that can be a tedious and demanding. Connect's Designer offers the following tools to make designing HTML email easier.Email templates: Slate and othersThe most obvious solution offered in the Designer is to use one of the templates provided with the Designer; see Creating an Email template with a Wizard. The layout of these templates has been tested and proven to look good in any email client, on any device and screen size. The Tables in these templates are nested (put inside another table) and they have no visible borders, so readers won't notice them.Tip: Click the Edges button on the toolbar to make borders of elements visible on the Design tab. The borders will not be visible on the Preview tab or in the output.LitmusThere are several tools to preview how email will be rendered on a variety of clients. We recommend using Litmus. Support for Litmus is integrated into the Designer; the Send Test Email dialog has an option to "Send to Litmus".EmmetEmmet is a plugin that enables the lightning-fast creation of HTML code though the use of a simple and effective shortcut language. The Emmet functionality is available in the HTML and CSS source editors of Connect Designer. Emmet transforms abbreviations for HTML elements and CSS properties to the respective source code. The expansion of abbreviations is invoked with the Tab key.In the Source tab of the Workspace, you could for example type div.row. This is the abbreviation for a <div> element with the class row. On pressing the Tab key, this abbreviation is transformed to: <div class="row"></div>To quickly enter a table with the ID 'green', one row, and two cells in that row, type:table#green>tr>td*2On pressing the Tab key, this is transformed to:<table id="green"> <tr> <td></td> <td></td> </tr> </table>Tip: For more examples, see this how-to: Streamline coding with emmet and custom abbreviations.All standard abbreviations can be found in Emmet's documentation: Abbreviations.To learn more about Emmet, please see their website: Emmet.io and the Emmet.io documentation: http://docs.emmet.io/.PreferencesTo change the way Emmet works in the Designer, select Window > Preferences, and in the Preferences dialog, select Emmet; see Emmet preferences.Using CSS files with HTML emailEmail clients do not read CSS files and some even remove a <style> tag when it is present in the email's header. Nevertheless, CSS files can be used with the Email context in the Designer. When generating output from the Email context, all CSS rules that apply to the content of the email can be processed and added either to the header of the email or to inline style properties as if local formatting was applied, depending on the Email section properties. See Email section properties.Using images in email campaigns: tipsHost images on a public serverIn the Designer you can add images as resource to the template document. When used in email messages these images are automatically embedded on sending the email. These embedded images appear instantly when viewing the message in your email client.There is, however, a downside to this method: embedded images can't be used to track email open rates. Email services like mandrillapp.com embed a tiny tracer image at the bottom of your message. Each time a recipient opens the email the tracer image (aka beacon image) is downloaded and yet another 'open' is registered. On mobile devices this happens when the user clicks the Display Images button. So, when tracking open rates in your email campaigns, store your images on a publicly-accessible server (preferably your own server- you could set up a process in Workflow to serve images and track open rates) or a reputable image hosting service, like photobucket.com. Don't forget to set the Alternate Text for your images on the Attributes pane.Do not capture your email in one big imageMost e-mail clients do not automatically download images, so do not capture your email in one big image. The recipient initially sees a blank message and probably deletes it right away.Do not resize images in your emailMany mail clients do not support image resizing and will show the image in its original dimensions. Resize the images before you link to or embed them.Use background images wiselyMost mail clients do not support background images: a very good reason to stay away from them in your mainstream email campaign. There is one situation in which they do come in handy. Both iPhone and Android default mail have solid CSS support and cover most of the mobile marketspace. You could use background images to substitute images when viewed on these devices. This is done by hiding the actual image and showing a mobile-friendly image as background image instead. This is a technique used in Responsive Email Design..

To the left of the Source tab, a bar helps visually identify the start and stop of an element. For example when clicking on the opening <table> element, this bar marks the whole <table> and all its contents, until the ending </table> tag.

Pretty print options

In the Source view the HTML source of the template is "pretty printed" (that is: formatted, adding new lines and indentation) to make it more readable.
When this is undesirable, the Source view formatting can be turned off for (parts of) a section by adding  in Source view, at the beginning of the text or in between two HTML elements. From that point on, pretty printing will be disabled for that section. Use  or  to turn the formatting back on.

These are all format options:

turns the formatting off.
or  turns the formatting back on.
forces the following HTML elements to be collapsed.
forces the following HTML elements to be expanded.

Example

This example shows how to turn pretty printing off for one specific HTML element: a Div element.

<p>In a "pretty printed" paragraph
	<br>text is indented automatically on the Source tab.
</p>
<!-- format:off --><div anchor="page_media_0" 
style="font-family: Lucida Console,monospace; 
line-height: 1.2; white-space: pre-wrap; position: absolute; overflow: hidden;
box-sizing: border-box; width: 675px; height: 68px; top: 209.967px; 
left: 65.4px;" offset-x="103.19999694824219" offset-y="247.76666259765625">
@Header1@ </div><!-- format:auto-->

Live tab

The Live tab shows the result of the template as rendered by the Gecko rendering engine. It is a good indication of how an HTML template would display in a visitor's browser, especially if they are using FireFox (which uses the Gecko engine).