Creating Formats

Before jumping straight into template design we must first understand the concept of Formats. Formats are the lens in which authors will see a template. An Outfit account comes pre-populated with an abundance of formats which can be used for a range of purposes.

What are Formats?

Format Types

In Outfit, a format is simply a width, height and file extension that is used to constrain a template. Formats are accessible account wide and can be added to any templates (even added multiple times). The job of a singular format is to constrain a template to the set defined dimensions and to export as the correct file extension. Some formats can have their file size optimised and capped (like JPG's and PNG's).

Some common formats include:

A4 Portrait
297mm x 210mm
Basic HTML
100% x 100%
300px x 250px
A3 Portrait
420mm x 297mm
Email HTML
100% x 100%
.html (email)
The Email specific HTML format gives designers the ability to create beutifully styled HTML emails, without needing to muddy up the code with inline styles. Outfit takes care of that on export.
Half Page
300px x 600px
A2 Portrait
594mm x 420mm
728px x 90px

Creating a New Format.

  1. Navigate to the Templating link within the Outfit navigation and then go to the formats tab. From there we can click on 1 of the 5 new-format buttons we available to us.

new formats

  1. After choosing a file type, add your dimensions, units for those dimensions and then depending on the format choice there are some other useful options.
  2. After adding the default dimensions, there is also the ability to now set a minimum and maximum range for a format that can then be customised by authors (this is known as a Flexible Document)
  3. Remember to give the format a generic, yet meaningful, name that other designers and administrators can easily understand. Perhaps a naming convention can be applicable (ie. Name, Dimensions and File Type = Google Ad - Leaderboard - 728 x 90 or A4 - Portrait - PDF).
  4. After adding the format globally we can then add that format to an existing template, via Template Variations or add it during the process of creating a new template.

new template

Flexible Formats/Documents

We’ve just released our new Flexible Documents feature in Outfit which now give authors the power to resize and readjust documents on the fly, while cutting down on a backlog of small dimension changes for designers. Read this comprehensive post to learn the basic usage for Flexible Documents, how to set them up and when to use them.

Document settings button

Here is a quick excerpt on the 5 steps to adding a Flexible Document:

  1. Add a new format with a defined file extension.
  2. Give the format a default width and height, a minimum and maximum value range and check the ability for authors to edit the size.
  3. Add the new Format to the template of your choice via the Template Variations tab.
  4. [Optional] With the document highlighted blue, click on the Settings action and preset some extra formats sizes and file extensions.
  5. Authors can now see that variation as a Flexible Document with the custom size and other available formats, by clicking on the + New action while in a Project.

Read the rest of the blog post here.