How panel content reflows
Advisory
The information on this page is only applicable if you're editing the University webpages using T4. It presumes that you have already completed the beginners and advanced level of the T4 training (a link for staff only - opens in new window).
If your website doesn't use the Panel template, you do not need to read this tutorial.
The structural flow of panel content
When editing panels on desktop, remember that their structural flow will be left-to-right.
This means that the preceding heading may be in a panel to the left of the panel you're currently editing.
Example of a panel without a heading
In this example, panels 1, 2 and 4 have h4 headings. The third panel, however, has no heading. This means that, structurally, the content of panel 3 belongs to the preceding heading, in panel 2.
On mobile, these panels will stack vertically, starting with panel 1. This means that the text in panel 3 will run directly under the content in panel 2, which is why the content in panel 3 must work with the heading in panel 2.
Panel 1 heading
Panel 1 text.
Panel 2 heading
Panel 2 text.
Panel 3 text.
Panel 4 heading
Panel 4 text.
Multiple rows of panels
If you're working with multiple rows of panels, the preceding heading may be:
- to the left of the panel you're currently editing
or - in the row above the one you're currently editing.
Example
Here we have six panel templates which display as two rows on desktop. In this example, the panel outlines have been removed, and the panels are on a white background, so they aren't visually separated.
Panel 1 heading
This panel has 25% width.
Panel 2 heading
This panel has 50% width.
Panel 3 heading
This panel has 25% width.
This is panel 4, with 25% width.
Panel 5 heading
This panel has 50% width.
This is panel 6, with 25% width.
Panel 4 has no heading. Its content belongs to the heading in Panel 3, not Panel 1. Panel 4 will appear below Panel 3 on a narrow display.
Panel 6 has no heading. Its content belongs to the heading in Panel 5, not Panel 3. Panel 6 will appear below Panel 5 on a narrow display.
Structure always takes precedence over visual display. This means that you need to be sure the content is structurally correct first.
When you've done this, you decide that the visual display could be misinterpreted by sighted readers. Referring to the structure above, for example, you may think the layout gives the impression that Panel 4 content belongs to the heading in Panel 1. In a stuation like this, you'll need to rethink that content, perhaps giving panel 4 its own heading.
This is the essence of working with responsive web content; in situations like these, you'll need to consider how the content 'reflows' between wider and narrower screens, to be sure you've structured your headings correctly, and added headings for visual clarity if necessary.
A panel group without any headings
If none of your panels contains a heading, then the preceding heading will be the last heading added to your page above your set of panels.
As previously stated, if the preceding heading (wherever it is) isn't appropriate for the content you're adding, then you'll need to give your new content its own heading.
Panel groups with subheadings
If the heading in the preceding panel is (for example) an h2, then it's absolutely fine to add an h3, to introduce a subtopic of that heading, in a panel that follows it.
Example of four panels
For aesthetic reasons, you wouldn't normally display panels in the way portrayed in this example, but the purpose here is to demonstrate how heading hierarchy functions when working with panels.
This first panel has an h4 heading
This is text about the h4 heading. The h4 heading is a subheading of the preceding h3 heading, 'Example of four panels'.
The h4 heading will continue to cover all subsequent content until a new heading is introduced – so in this case this means all subsequent panels which will appear to the right of this panel when displayed on desktop.
This second panel doesn't have a heading, so its content belongs to the h4 heading in the previous panel. That panel will be to the left on desktop but above on mobile.
As long as the content of this panel is on the same topic as the preceding heading, it's technically fine for this panel not to have a heading of its own.
This panel has an h5 heading
The h5 heading is a subheading of the h4 heading in the first panel.
So the content of this panel will be about the h5 heading, i.e. on a subtopic of the h4 heading.
This panel has an h4 heading
The content of this panel is about this new h4 heading, so the h4 heading in the first panel, and its h5 subheading in the previous panel, no longer apply here. The h3 heading 'Example of four panels' above the panel group does still apply to this panel, because this h4 heading is a subheading of that h3 heading.
Any content added beneath this final panel (i.e. beneath this group of panels) will structurally still belong to this h4 heading unless that content is given its own heading.
