Flexible Document Sizes & the Power of Resizable Templates

James Lee — 18th October 2016

We’ve just released our massive new Flexible Documents feature in Outfit. This will 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.


How do Authors use it?

Be on the lookout for the blue resizable icon (below). This indicates that a document has extra settings and can be resized.

To access the Resizable Settings, add a document (which has the resizable icon) to a project and edit that document. While editing the document, click on the Settings button in the document specific menu bar. Within these Settings there could be the two following options available to an author:

  1. Custom Size: Authors can define a width and height, from a defined range, for a document.
  2. Other Available Format Sizes: Beyond a custom size, authors can also update the document to an existing format and its corresponding file extension.

After customising the Document Settings an author can commit those changes by clickingFinish. The newly set custom dimensions or format will take effect from that point on, or until an author updates those Settings again.

How can Designers implement this?

This is a seemingly simple process and is just leveraging the responsiveness that an Outfit template can achieve. So let’s take a real world implementation to frame this and imagine we have a Basic Advertisement template which facilitates all of our Web Ads, Social Media and other simple advertising collateral. What we can do is set up a Flexible Document to handle a range of niche web ad dimensions with custom sizes, as well as the ability to set some other format options to handle different file extensions (ie. JPG/PNG) and file sizes (max. 150kb).

Firstly, add a master Format, as either a JPG or PNG (see here on how to add a Format). This master format will act as our default flexible document. For arguments sake let’s say we want a default format that exports as JPG, with no maximum file size. Beyond that, we would then create a compressed JPG, PNG and compressed PNG formats. These would act as our other format options.

For the master JPG format first set the default dimensions, give that default size minimum and maximum dimension ranges to allow for the flexibility and then check the box allowing authors to customise the document size.

The minimum and maximum range can be as flexible or as constrained as necessary. For this example I’ll be setting the ranges as extremely flexible, so allowing a min height/width of 100px and a max height/width of 1500px.

After making the master format, continue that same process and create the 3 other formats (PNG, compressed JPG and compressed PNG). Once all formats are made, head over to the template which you would want to add these formats to and click on the Template Variations tab (see here for a refresher on adding template variations).

Remember to use CSS media queries to help target specific content at specific aspect ratios. If you need more help on template creation and design see here.

Add in the master format that we created first. We can now see on that master format that there is the blue flexible icon.

With that flexible variation selected, click on the Settings action and add in the 3 other formats we created earlier.

After saving, we can then navigate over to a Project and test out what we’ve set up. Click + Add to add a new document, navigate to the correct template and then to the correct flexible document. Edit that new document and click on the Settings button. From here we can see that we have the ability to resize this initial document and we also have the ability to update the format to one of the three other formats we added earlier. Perfect!

Yes I know… that’s the same gif from above, but it really does perfectly illustrate the culmination of all our hard work.

So to Briefly Recap in 4 (maybe 5) Steps

  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.

For more information on the process or anything else in Outfit, check out the Help section or simply type outfit.io/help!

Share this post

Latest Posts

How To Build Customer Loyalty In The Real Estate Sector

Customer loyalty is crucial to building a strong brand. The Real Estate sector deals with products and services that are highly personal. It is no surprise then, that word of mouth from well nurtured customers carries significant weight with an audience of new potential customers. 

Read more

The Pros And Cons Of Co-Branding For Franchises

Franchise co-branding with other businesses in psychically similar industries may take many forms. Whether the co-branding activity is the sharing of physical space or simply a shared campaign, the intention is primarily to capitalise on the strength of two brands to expand the pool of customers and attract more business. 

Read more

How to manage an efficient digital asset workflow

Management of digital assets is an issue that organisations of every size must face at some stage of operation. Everything from logos, fonts, photography, stock imagery document files and more must be thoughtfully stored with permissions managed appropriately so that the right parts of the business are matched to the best resources for their application. 

Read more

Request a demo