Panel structure, responsive design and reflow
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.
While this tutorial can be read on any device, you will find it most helpful to follow this tutorial on a desktop, laptop, or a tablet in landscape orientation, so that you can see the different ways that Panels display.
Panel structure
- as one row on a wide display
- as multiple rows on a medium display
- as a vertical stack of single panels on a narrow display.
Simple example demonstrating four panels of equal width
Here we have four panel templates, each set at 25% width.
Desktop layout
These will display as a single row on desktop:
Panel 1 heading
Panel 1 text.
Panel 2 heading
Panel 2 text.
Panel 3 heading
Panel 3 text.
Panel 4 heading
Panel 4 text.
Tablet layout
How the panels display on a tablet will depend on:
- the size of the tablet
and - its orientation (which way up the tablet is held).
So,
- If the screen is wide enough, a tablet will display the panels as a row.
- If the screen isn't wide enough, the panels will:
- automatically expand to 50% width
- the row of panels will 'wrap' (shuffle down as needed).
In this case, two of the panels will wrap, resulting in a display of two rows of two panels. The following panels have been set at 50% width, purely for demonstration purposes, so that those able to view this tutorial on desktop can see how the panels would look on a tablet.
Panel 1 heading
Panel 1 text.
Panel 2 heading
Panel 2 text.
Panel 3 heading
Panel 3 text.
Panel 4 heading
Panel 4 text.
Mobile layout
When a mobile phone is in portrait orientation, all panel widths will automatically switch to 100% width, because a mobile screens are naturally narrow. This means that all panels display as a vertical stack of single panels on mobile, with Panel 1 first.
Panel 1 heading
Panel 1 text.
Panel 2 heading
Panel 2 text.
Panel 3 heading
Panel 3 text.
Panel 4 heading
Panel 4 text.
Mobile variability
Some larger mobile phone displays may behave similarly to tablets when they're in landscape orientation, if the screen is wide enough.
You can't know how the panels will be displayed, and you shouldn't spend time trying to work this out. The point is to understand and remember that panels won't always be seen in a single row.
Responsive design and reflow
When web content changes its layout between desktop and mobile in this way, it is said to reflow.
The ability of content to reflow is central to responsive design. Responsive design is so-called because it 'responds', i.e. moves, according to the size of the screen displaying it. Responsive design has been the standard for web content since 2010, due to the advent of tablets and the use of mobile phones to display web content.
When you turn a tablet or mobile phone to change its orientation (from portrait to landscape or vice-versa) you can often see a responsive webpage 'reflowing' its layout in response to the change.
Content that hasn't been designed to be responsive will often not appear correctly on mobile. You may have seen instances of this yourself, manifesting as one or more of the following:
- very small text or images
- truncated (cut off) content
- unintentionally overlapping content, which can include:
- text, making content hard to read
- interactive elements, such as buttons, being rendered unusable, because an overlapping element prevents the button from being clickable
- oversized content, creating horizontal scrollbars, which makes content awkward to read.
So, considering reflow may feel unnecessary when viewing content on a desktop screen, but it is important for these reasons.
