With Full Fabric you don't need to know <code> to easily build and edit beautiful emails on the fly, because we offer a versatile builder with a variety of templates and custom elements to choose from and blend however you want. But rest assured, if you do know HTML, that's great too, because you can add your own code to get the most out of your emails! 👩‍🎤

This article explains how to use the email builder in campaigns, shared email templates, events and one-to-one emails.

➜ How do I design a unique email message from scratch?

➜ How do I format text content?

➜ How do I test and preview my email templates and why should I do it?

・Sending test emails

・Browser and mobile previewing

➜ Why do emails look different on Outlook?

➜ Why do images look bad?

Our email builder operates on a straightforward premise: begin by selecting a base layout, and then use the tools at your disposal to customise it, enhance its visual appeal, and add content – for which reason you must become familiar with its technical capabilities. Find below a comprehensive breakdown of the various components and steps involved in designing an email template with Full Fabric's email builder:

At the very top of the builder you're given a number of layout options, which can be roughly divided into four categories:

The first option from the left is common fare as far as email editors go, not unlike Outlook, Gmail and the likes: write and format text and add file attachments. That's it.

The second and third options from the left offer a convenient way to construct elaborate emails, as they're ready-to-use templates that you can easily spice up by simply adding images, text, YouTube videos and formatting.

Our predesigned email templates always contain a text section by default (equivalent to the body of an email), but one of them also includes a header where you can upload a decorative banner and even embed a hyperlink. Sidebars are not supported due to not being responsive on mobile devices. However, you can further customise the available predesigned templates in several ways:

     a) Incorporate images into text sections: click the arrows on the sides to navigate through section layout variations that mix images and text.

Hover the mouse pointer over an image area to upload a new image (UPLOAD FILE) or insert a click-through URL (EDIT LINK). Similarly, hover the cursor over a text box to edit it (EDIT TEXT). To delete a section, click the bin in the upper right-hand corner, which is only visible when multiple sections exist (since, as previously stated, sections correspond to the body of an email message).

To facilitate the design of newsletters, brochures and other such email templates, text never wraps around images, instead remaining within the boundaries of its own area. This way, any time two or more sections are combined, they look tidy and cohesive.

By the way, these are the recommended dimensions for headers, images and text boxes:

The default width of email templates is 640px. Accordingly, the width for right and left-aligned images in text sections is 284px, with text and images sharing the same column width. There are no height restrictions.

     b) Add more sections: in order to add a new section – which could be a text box, an image, a button, or a piece of HTML code – hover the mouse pointer over an existing section (headers do not count), click the newly-revealed plus icon and select the type of content or element you're interested in. The new section will be added beneath the one from which it was derived. Sections can only be eliminated, not reordered, so it's important to get their placement right from the start.

For reference, this is the structure of the email template displayed at the beginning of the present article:

The top and bottom edges of image-only sections are surrounded by a narrow white margin, so the bottom edge never perfectly aligns with the lower border of the email template:

Consequently, if you'd like to use an image as a footer, we recommend going with one that has a white or transparent background so that it blends in:

     c) Choose a colour for your headings: this will be the colour of any line of text formatted as a heading. 🎨

It's the first palette in the right sidebar. The colours are unique to every school because they're the school's branding colours. If you want more colours to be added to the palette, please contact us and indicate the respective RGB colour codes.

d) Choose a colour for your buttons and links: this is the colour that your links and buttons will be.

The palette is also based on each institution's branding colours.

     e) Choose a background colour: by default, the background may be white, light grey or dark grey, but more colours can be added to the palette by request.

     f) Choose a colour for the border: by default, the border may be white, light grey or dark grey, but more colours can be added to the palette by request.

g) Embed a YouTube video: this one is a special hidden feature. To embed a YouTube video onto the email, just follow these three simple steps:.

1️⃣ Add a new text section to the template

2️⃣ Open the YouTube video you wish to embed, click SHARE and then COPY to obtain the URL

3️⃣ Back in Full Fabric, tap the EDIT TEXT button inside the new section you created, paste the URL and the video will automatically be embedded; afterwards, hit Save to confirm the change and exit the window.

To kick customisation up a notch, the fourth layout is actually no layout at all: it's an HTML container where you can paste the HTML of email templates built elsewhere, such as Mailchimp, to render them in Full Fabric. However, please be aware that you must account for height and weight differences or your template will probably look off.

Some of your recipients may use email clients with no HTML support; in light of this, your email templates should always include a plain text version with the exact same text.

Despite being the last option on the array of layout options at the top, it can also be found underneath both of the predesigned templates if one scrolls down:

Full Fabric supports all of the standard text formatting features found in the average email client, namely:

Most noteworthy are substitution tags. A substitution tag, in case you didn't know, is essentially a code that stands for a specific piece of information, such as a surname, the name of a programme or a phone number, just to name a few examples. Whenever the need arises to send a personalised mass email, just add the relevant substitution tags where in the text the data should go and the tags will be automatically replaced with the personal details of each individual recipient targeted by the audience segment upon the campaign being dispatched. As a result, your campaign will look like a one-to-one email to every addressee. 🙌

Pressing the button Insert substitution tag on the far right of the toolbox will bring up a complete list of email substitution tags. Just tap the one you want and it will be promptly added to the text. For more information, please refer to this other article: Email substitution tags.

For the sake of prudence, no email template worth its salt should be considered concluded until it has been duly tested and previewed, as doing so is an integral part of proofreading. 🤓 To that end, Full Fabric allows you to send an unlimited number of test emails to whomever you want, as well as preview them in your browser and even in a simulated mobile view.

Testing a shared email template in all manner of inboxes is the perfect way to see how it will render in different webmail providers and make adjustments if necessary (to improve legibility, for instance). A test email is a truthful depiction of what happens on the recipients' end when they open the message.
​
To send yourself a test email:
​ 1) Click Send me a test email in the upper right-hand corner
​ 2) Insert a valid email address and click Send test email

The test email should arrive shortly. If you're unable to find it, please check your Spam and Junk folders. You can also use this mechanism to send somebody else a test email if you need external input or approval, of course.

Emails are best viewed in a browser, regardless of which one, because HTML renders the same across all browsers, making it the most accurate and consistent experience. That's why there's a button encouraging recipients to do just that at the very top of every message:

Take care that your templates look good in browser view to account for rendering differences across email clients, image blocking being on, and letting readers use the URL of the hosted web version to easily share the email with other people.

In addition, due to mobile devices driving an increasing percentage of email opens, please ensure that your email looks good on mobile view too. As a matter of fact, you should design your emails primarily with mobile users in mind, because if they look good on mobile, chances are that they will also look great on desktop.

This is what you have to do:
​ 1) Click Preview in browser

2) Inside the preview window, toggle between Mobile and Desktop to see how the email renders on each type of device

Outlook (the app, not the web version) uses Microsoft Word to render HTML emails, a fact that is problematic because Microsoft Word is a text processor intended for print, not web design, meaning that it regards emails as documents. To give an example of why this is detrimental, if an email is longer than the length of a sheet of paper, unwanted page breaks will automatically be added to split content between "pages", thus breaking the original HTML formatting and causing spacing, image and font issues. In other words, Word's rendering engine does not adhere to the same standards as webpages (one of the reasons why we provide the option to view emails in one's browser).

Please note that our email builder was developed to be compatible with any browser and email client. Only Outlook is infamously faulty on a regular basis, for factors beyond our control. 🙁

When images are uploaded, their quality is typically degraded, although not by much. To offset the quality loss, we advise the usage of high-quality (HQ) images in your email templates, as any changes in quality will be virtually imperceptible. 🎀

You have reached the end of this article. Thanks for reading! 🤓 If you have any questions or comments on the topic at hand, or if you enjoy reads like this and have article requests, feel free to start a chat or email us at support@fullfabric.com. Also, please leave a rating below. Your feedback is highly appreciated! 💖

PUBLISHED: March 28, 2019
​LAST UPDATED: December 30, 2022 at 8:48 p.m.