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?
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
Some common formats include:
|HTML||PNG & JPG|
| || || |
| || |
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.
| || |
Creating a New Format.
- 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-formatbuttons we available to us.
- 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.
- 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)
- 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 90or
A4 - Portrait - PDF).
- After adding the format globally we can then add that format to an existing template, via
Template Variationsor add it during the process of creating a new template.
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.
Here is a quick excerpt on the 5 steps to adding a Flexible Document:
- Add a new format with a defined file extension.
- Give the format a default width and height, a minimum and maximum value range and check the ability for authors to edit the size.
- Add the new Format to the template of your choice via the Template Variations tab.
- [Optional] With the document highlighted blue, click on the Settings action and preset some extra formats sizes and file extensions.
- Authors can now see that variation as a Flexible Document with the custom size and other available formats, by clicking on the
+ Newaction while in a Project.
Read the rest of the blog post here.