RWD: Control the flow of content on a Flex page

You may now understand that "Responsive Web Design" is a more or less a fancy way to say: everything in one column, at small page widths.

What you may not know, is that due to the nature of column content in HTML, the underlying flow of your page as it sits in a single column, does not correspond to what you might consider to be most relevant. in your layout; the most important content on your page, may, in a collapsed state, now appear beneath something incidental or generic.

For Flex pages especially, where a column's primary importance to the viewer is somewhat relative to the aesthetic decision of the designer, a solution is required to preserve the "flow relevance" of content. To accommodate the likelihood of a need to alter flow relevance, per page, the Web CMS team has implemented a Flex Page solution. You can now set "Mobile placement" in your Flex page, in the Left, or Right columns, in the Main content area, and lastly, per row in the Main content area. Look in the "Settings" group of each of these sections, for "Mobile placement" options.

We hope the solution allows a satisfactory responsive layout on our most flexible page.

Settings for responsive design content flow

Mobile placement menu includes:

  • Default
  • 1
  • 2

What does the Mobile placement setting mean and how does it work?

Mobile placement - Default: The default behavior when loading content in a mobile setting (in this case, any screen resolution narrower than 767px) is to read and load the content, as-is, from left to right, top to bottom.

Mobile placement - 1: Designates the relative column or row to be displayed first. If the other columns or rows are left with the "Default" setting, they will appear from left to right, top to bottom thereafter.

Mobile placement - 2: Designates the relative column or row to be displayed second. The last column can be left as "Default" as it will display last anyway. If this setting is applied in a column with more than three rows, the user can select the two most important, then allow the system to list the remainder.