Softpress KnowledgeBase

Using the Relative Page Layout Action (Freeway Pro only)

The Relative Page Layout Action (RPL, we pronounce it ripple) is a groundbreaking new Freeway 5.5 Pro feature. It might not seem like much to begin with, but it will completely revolutionize the way you use Freeway. In this article we’ll be taking a look at what the RPL Action does, how it does it and how to get the most out of it.

Full details of the concepts of what RPL does and how to implement it in Freeway are given in the Using Freeway guide in the dedicated section on Relative Page Layout. You can get the guide from the Support page of the Softpress site (under Manuals).

Creating layer based web sites in Pro is easy. You can move items around the page and don’t have to worry about them overflowing as you do with table based items. You can do neat tricks like adding custom borders to give the effect of dividers between sections of your page. You can change the appearance of links on individual items.

Trouble is, when you look at the site in a browser and increase the text size, or even worse, look at a text heavy page using Internet Explorer on Windows, text can be overlapping, items can appear to be in the wrong position and things can look disproportionate.

There are already ways to avoid this but they don’t suit everyone. You could, for instance, convert all your text to graphic text. Sure, doing this will prevent it from changing size, but it also prevents it from being seen by search engines, or assistive devices such as screen readers for the visually impaired. You could also create your pages using inflow items. Okay, but these prevent you from being able to drag and drop items around your page and won’t get carried through from Master pages.

The simplest answer to this problem is the RPL Action. It will automatically convert a page of regular layer based items on the page into inflow items. The advantages of this are huge.

When items grow in size—either because the person viewing your site increased the text size manually, or the operating system displays text at a different size—they push items below down the page instead of overlapping them.
The distances between these items will also remain consistent so no more large gaps between them.
The content that search engines and screen readers see (i.e. the code, not the layout) will be in the correct order. Your header content will appear first, then your body content and last of all your footer content.
The code that is generated is more modern and geek friendly than using table based items, or regular layer items.

How does it work?

To use the Action you just need to apply it to an individual page by selecting *Relative Page Layout* from the Page Actions section of the Page menu, or to apply it to all pages in a folder, select the folder and choose Relative Page Layout from the Folder Actions section of the Page menu.

When you publish your site, the Action will look at all the items on the page, group them all up into sections, then group these sections until there is only one item remaining that contains all the groups and items. It then puts all the items in the correct order and changes their CSS values to convert them from regular layer items (using absolute positioning) into inflow items (using relative positioning).

If you want to remove a particular item or page from this process select it and apply the Remove from Relative Page Layout Action. An example would be if you had an item that was triggered to appear in front of all other items (like a lightbox effect) but didn’t want it to cause the other items to move around when it appeared or changed in size.

Potential gotchas

Like all things that automate complex problems, there are some guidelines to prevent the potential gotchas.

Incompatible items

If the RPL Action says it won’t work with some items you will need to either make them layers by selecting them in the Inspector and checking the Layer option, apply the Remove from Relative Page Layout Action to prevent RPL from doing anything with them or delete the item from the page. Table based items can’t be used on RPL pages—that is items drawn with the CSS Layout button disabled, tables drawn with the CSS Layout button enabled can be used.

Layout changing when the browser window changes size

If your layout changes (flows) when the browser window size is de/increased then set your page alignment to Left, Center or Right. If the alignment is set to None then the page has no width meaning the items will shift to the right if there is enough space for them. This can be used to your advantage if you’re designing sites for small devices.

Layout is different in Freeway than in the browser

If your layouts look different in Freeway than in the browser then it may be because of one or more of the following reasons.

Overly complex layouts and overlapping items – The Action needs to make a table like structure out of the items on a page. As mentioned above, it does this by grouping the items. The more complex the layout is—whether because items being laid out sporadically, or overlapping the edge of other items—the more difficult the Action is going to find generating that structure.

The easiest way to make sure layouts work as expected is to make the design as simple as possible. To do this we recommend using a grid and laying your items out in sections. Take a look at our designing with grids article to see how to go about this.

We’ve provided an option in the RPL Action called Overlap Tolerance that can help with more complex or overlapping layouts. If a layout isn’t working for you then try changing the Overlap Tolerance to 10 and republishing. If that still doesn’t work then keep adding 10 until you get the result you want. If the layout still doesn’t work then change the tolerance back to 0.

At this point you should try grouping related items. For instance, if you have a group of overlapping items then select each of them and use the Group option from the Item menu. Sometimes just grouping all the items that belong in the header, then all the body items and then all the footer items can also help.

If the layout still isn’t working as expected then it may just be that the layout is impossible to convert into an appropriate structure. If this is the case then redesigning the layout based on a grid will definitely be the way to go.

Unsupported items

Some items, such as table based items, are impossible to integrate into a relative page layout. If you have any table based items on your page then you will get a warning when you try to publish a page with the RPL Action applied. To prevent this from happening you will either need to do one of the following:

Convert your items to layers by selecting them and checking the Layer option in the Inspector palette
Delete the item from the page, or if it’s a table based item, place it on the pasteboard

Some Action items may not work well with the RPL Action, if you experience problems then try applying the Remove From Relative Page Layout Action to it, if that doesn’t correct the problem then you may need to find a different solution.