Get Started With Email Design

Good email design is a fundamental piece of a successful marketing strategy.

To start working with messages navigate to Messages > All Messages. On this page you will see three or four type of messages: Email, Twitter, and SMS. (You will only see SMS if your account purchased an SMS allocation.) In Getting Started we're only going to cover email messages.

Email Editors

When you go to Messages > All Messages and click Create New Message, then Create Email Message, you are given the option of selecting one of five email editors:

  • Email Message Editor is Bronto's newest editor. The email message editor provides a drag-and-drop design experience and messages created with this editor support responsive design. This editor is the best choice if you plan to send messages that you want to work on a variety of devices and like to see what messages look like as you design them.
  • HTML (Code Editor) lets you directly code messages using HTML. You should use this editor if you want to "import" (copy/paste) messages that were previously designed using HTML or if you prefer using HTML code to a GUI editing experience. When using the HTML editor, you have the option of turning on a WYSIWYG editor. The WYSIWYG editor provides a MS a Word-like editing experience.
  • Plain Text Message allows you to design messages that will only be sent as plain text.
  • Send Webpage allows you to enter the URL for a web page and use it as an email message.
  • Template Message is like using email stationery or letterhead to provide a design for your message that you can simply add content to. Bronto provides several default email templates and you can also upload your own templates by going to Messages > Email Templates. Templates are not designed in Bronto. If you want to use the design for a message you create din Bronto over and over again, you can make a copy of a message and update the new message appropriately.

The email message editor and the HTML/WYSIWYG editor are the primary editors, while the other three editors serve a very specific purpose. Messages created in one editor can not be opened or edited in a different editor, so carefully consider your needs before selecting an editor to work with. Because there is the option to apply a CSS style sheet to your message when you use the email message editor, we recommend using this editor unless you plan to do extensive HTML coding as you design messages.

Email Message Editor Elements and Design

To design emails using the email message editor, you will drag containers from the Containers palette to the canvas. A container works like a row and can have anywhere from one to six "columns". Content can be added to a container column by dragging different elements from the Elements palette into the container columns. Any container or element you add to the canvas can be easily be moved by clicking on it and dragging it somewhere else on the canvas.

Typically, when you add an element to the canvas, a new panel slides out over the palette. This is where you can edit the content of the element, for example add text or identify the URL you want to use, or design the appearance of the element. You can access the panel for any element by mousing over the element and clicking the Edit button that is displayed in the list of options below the element. The container design panel can be accessed by mousing over the container and clicking the Edit button that is displayed in the list of options above the container. You can also access global message design options, including adding CSS, from the Settings palette.

The GUI-configurable design elements for containers, elements, and messages overlap, so the Design help topic can be referenced for help with the design settings for any of these. A message's design settings always default to the most specific design, so element level settings will override container level settings, and element and container level settings override message level settings.

HTML/WYSIWYG Editor Elements and Design

With the HTML/WYSIWYG editor you use an invisible table to create the overall message design. Cells in the table can be assigned attributes, such as width, height or color, in order to accommodate the unique layout and design needs of the message. Content can be added to the cells in the table either using HTML or the WYSIWYG editor. Some content, such as text, can be designed by applying CSS or using various WYSIWYG buttons.

This help topic provides some recommendations for good HTML email design. All of the WYSIWYG-specific options are covered in the topics found in the WYSIWYG help section.

Headers, Footers, and Subject Lines

Headers and footers are message elements that are often consistent across messages in a campaign or for every message sent by a company. Therefore, you can create headers and footers outside of the message design process. Once created, the headers and footers are available to be added to your message. If you typically want to use the same header or footer in most messages, you can set a default for messages sent from your account. This default can be overridden by selecting a different header or footer as you design a message. See how to add headers and footers in the email message editor or see step 10 for how to in the WYSIWYG editor.

Writing effective subject lines is one of the most important aspects of email design. You can use message tags or dynamic content to personalize your subject lines and emojis to help make your subject lines stand out.

Message Personalization

Regardless of the which of these two editors you use, Bronto provides several options to customize the same message for different audiences. First, various message tags can be used in many different ways/places in an email. Adding a message tag to an email creates a placeholder where content associated with the tag will appear when the message is sent to a contact. For example, you could add the field tag %%firstname%% and when the message is sent, the first name of the contact the message was sent to replaces the tag.

All tags can be hard coded into a message using the proper tag syntax and most can be added using a button or menu selection. In the email message editor, tags can be added to various elements using the Insert menu that appears on the content design tab. In the WYSIWYG editor, you can use drop down menus to add field or special tags. For information about the syntax for different types of tags see:
  • Field tags: The categories of information you have stored for your contacts. Example: %%firstname%% For more information, see Field Tags.
  • Special tags: The default, Bronto-provided tags. Example: %%!unsubscribe_url%% For more information, see Special Tags.
  • Content tags: Reusable blocks of content you have created using the Messages > Content Tags page in Bronto. Example: %%@newitems%% For more information, see Content Tags.
  • RFM tags: The RFM metrics that have been collected for a contact. Example: %%rfm_newest_order_date%% For more information, see RFM Field Tags.
  • Cart/Order tags: Data collected about shopping carts, if you use the Cart Recovery app, or orders. Example: %%$ For more information, see Adding Cart and Order Data to a Message.
  • Product tags: The product fields that you have imported into Bronto. Example: %%$product.placeholder.field%% For more information, see Product Tags.
  • API tags: User-defined tags that allow you to insert HTML content into the body and subject line of messages using the API. The syntax for creating an API message tag is %%#userdefined%%, where userdefined can be anything you want it to be. For more information see API Message Tags.
  • Loop tags: Passes an array of content about the same item. Loops are commonly used with either Cart/Order tags or API tags. For more information about loop syntax for API tags see API Loop Tags. For more information about loop syntax for Cart/Order tags see Cart Loop Tags.

Messages can also be personalized for different groups of people using dynamic content. Dynamic content allows you to specify rules that must be met in order for a block of content to display. For example, you may want contacts on a specific list to see a different coupon code than the other contacts who receive the email. To do this, you can make the coupon dynamic, where the rule states that if contacts are on a specific list they will see the content and all other contacts will see the default version of the message without the coupon code. In the email message editor you can make containers dynamic. See this video for a demonstration. In the HTML/WYSIWYG message editor you can use the Insert Dynamic Content button to add dynamic content.