Relative Page Layout (Pro only)
4th of February, 2013IMPORTANT: Please be aware that using Relative Page Layout (RPL) is not compatible with responsive layouts. This is because making edits at various breakpoints will break the functionality of the RPL Action whenever it is used. We strongly recommend that if you are building a responsive website you SHOULD NOT use Relative Page Layout.
If you are updating a file which was originally created in Freeway 6 or Freeway 5.5 which uses Relative Page Layout (whether it was created from new or from a template), you will need to remove the Relative Page Layout Actions from the file if you wish to make the file work responsively in Freeway 7. This is usually done by selecting the Site Folder in the Site Panel list and then clicking on the "x" on the Relative Page Layout tab in the Actions palette.
Relative Page Layout is part of a process for building pages created with layer items in sites which are not going to be made to work responsive, so they just simply work in all browsers, all the time. These robust layouts will grow properly if text expands in a browser—page background items will grow to fit and even a footer will always remain intact at the bottom of the page. Doesn’t sound like much … until you try to create pages that work this well by any other method.
To give you a quick look at what Relative Page Layout does, let’s open up a Freeway template.
- Launch Freeway, go to File>New, click on the Templates tab (if it isn’t already active), select the Charcoal template and click OK. Choose a location for the template’s project folder and click Save.The Charcoal template’s Home page will now open in Freeway. Relative Page Layout is applied by default on this template, so let’s manually remove the Action to see what happens when it’s tested in a browser.
- Open the Actions palette if it isn’t already open by going to Window>Actions.
- Select the Site Folder in the Site Panel (the panel to the left of the page area), and click on the “X” to the left of the Action’s name in the Actions panel so you see that the Action “cog” icon is no longer displayed on the Site Folder icon.
Now preview the page in a browser which supports zooming HTML text. To do this, preview the page in Safari or Firefox. If you use Safari, go to the View menu and choose Zoom Text Only. In Firefox, go to the View menu, choose Zoom and then choose Zoom Text Only. Note that Opera and some other browsers don’t allow you to switch on this option.
With Zoom Text Only checked in your browser, use the keyboard shortcut of Command and + to enlarge the text. Each time you type Command and + the default text size of the browser will increase. Typing Command and hyphen/minus will decrease the text size each time. Typing Command and zero will reset the text to the default size.
As you will see, each time the text increases in size the more the page layout will break as the text’s line spacing grows and when text turns onto a new line as the text itself grows. In the screenshot above right you can see that the navigation bar has turned the “Contact” link and as the text increases it looks odd in the panels near the foot. After three increases in the default text size (see screenshot on the right) the layout starts to break dramatically.
This isn’t a fault with Freeway, it is simply the way that things work when HTML text expands on a page which uses layer items. Because layer items use CSS to place them with “absolute” positioning, they won’t automatically move down the page to compensate for expanding content above them in the same way that “table-based” items do. This results in HTML text overlapping or running under other layer items on the page (depending on which layer is above which).
This standard behavior of CSS-positioned items has meant that it has always been tricky to reliably use HTML text on top of backgrounds because, if the text expands or makes extra lines, the background won’t automatically expand to fit the new size of the text.
Avoiding this pitfall has previously entailed using multiple levels of nesting items “inline” within other items and then applying an undefined height to the container item so its height always expands or contracts with its content. Many users, however, find this layout method unintuitive and over-complicated.
Now that you have seen what happens to layer items by default when HTML text expands, we can now reapply the Relative Page Layout Action to show how it helps to keep the layout of the page more robust and reliable.
- Go back to Freeway, select the Site Folder in the Site Panel, go to Page>Folder Actions and choose Relative Page Layout.
You will see that the content of the page moves down to accommodate the increased text even if it breaks onto two or more lines. You will also see that the background page container item increases in height and the spacing remains consistent between the different items on the page.
With Relative Page Layout you can concentrate on the design and let Freeway produce the code to make most sites look great in any browser.
Working with Relative Page LayoutTo work with Relative Page Layout, you need to first switch on the CSS Layout button on Freeway’s toolbar.
Although it’s possible to apply the Relative Page Layout Action retrospectively, it’s best to use it right at the start of your new project.
The Action can be applied in two ways—as a Folder Action or as a Page Action. Applying it to a folder in your Site Panel means that all pages within that folder will have Relative Page Layout applied, whereas using the Page Action will only apply the Action to that particular page.
To use the Page Action, go to the page you want to use it on, go to Page>Page Actions and choose Relative Page Layout.
Whichever version you prefer to use, the Action has just one option in the Actions palette—the Overlap Tolerance slider. There may be times when using multiple overlapping items on the page will confuse Relative Page Layout causing the layout to break. Adjusting this slider can often fix these problems.
You should also be aware that certain complex designs may not work well with Relative Page Layout. It is generally safer to use grid-based layouts, and you may sometimes need to group items if you want them to be associated with each other on the page.
All items on your page must be layer items (which is how they will be if you work with the CSS Layout button switched on). If you drag-and-drop or copy and paste items onto your page you need to select the item then switch on the Layer option in the Inspector. If necessary, go to Item>Bring to Front so the new item is in front of other items on your page.
If there are any non-layer (table-based) items on the page, you’ll see an error message when you try to preview or upload. The message specifies the affected page so you can rectify the problem.
Later you will see that it’s possible to remove the Relative Page Layout Action on individual pages even when you have the Folder Action applied, so you will not see an alert if non-layer items are used when you apply the Action. If, however, you try to apply the page Action when non-layer items are being used on that page, an error message will appear in the Actions palette specifying the name of the item(s).
Other Actions in the Relative Page Layout suiteFor the vast majority of web sites the Relative Page Layout will just work, however there may be times when you require specific functionality which cannot be made to work correctly when the Action is applied to the page or page folder.
There are two different scenarios for doing this:
- when you want to remove Relative Page Layout from a particular page when the Action is applied to a page folder; or
- when you want an item (or multiple items) to be unaffected by Relative Page Layout when the Action is applied to that page or a page folder which has the Action applied.
The Action can be used in two ways—as a Page Action (to remove Relative Page Layout from the entire page) or as an Item Action (to make an item or group of items behave as a standard absolute positioned layer item).
If you want to remove Relative Page Layout from a particular page when the Action is applied to its page folder, go to Page>Page Actions and choose Remove from Relative Page Layout.
If you are working on a page with the Relative Page Layout Action applied but you want an item to behave as a standard absolute-positioned layer item, select the item and go to Item>Actions and choose Remove from Relative Page Layout.
There is another new Action in Freeway 5.5—called the Modify Height Action which can be used to manually remove the height from an item so it automatically shrinks to the size of its content. To use this Action, select an item on the page, go to Item>Actions and choose Modify Height.
If you have problems when using the Relative Page Layout Actions, have a look at some possible solutions in the troubleshooting article at http://www.softpress.com/kb/questions/287/. If that article doesn't solve your problem, please get in touch with our Support department.