This article will discuss the Tile Behavior Tab and the Layout Tab & Best Practices for both.
Tile Behavior (Responsive) & Layout (Fixed Width)
This tab can either be Tile Behavior or Layout depending on the type of canvas that is selected.
- If a Responsive canvas is selected, then the tab will be labeled as Tile Behavior.
- If a Fixed Width canvas is selected, the tab will be labeled as Layout.
Tile Behavior (Responsive/Content Canvas)
This tab is enabled if Responsive/Content Canvas is selected. Use this tab to specify which tiles appear on a page based on the size of the browser window and/or device screen.
- Show on Large Devices: Toggles whether the tile will appear on larger devices or not, such as desktops. (≥1200px)
- Show on Medium Device: Toggles whether the tile will appear on medium devices or not, such as tablets. (≥992px)
- Show on Small Devices: Toggles whether the tile will appear on small devices or not, such as phones. (≥768px)
- Show on Extra-Small Devices: Toggles whether the tile will appear on extra-small devices or not, such as smaller phones. (<768px)
Layout (Fixed Width Canvas)
This tab is exclusive to Fixed Width Canvas. The primary function of this tab is to apply and manage layers within elements of a site page.
- Layer: Changes the tile to appear in the foreground, background, or custom z-index on the page.
- Reorder Within Layer: Allows the object to either be brought to the front, sent to the back, or have no change within the selected layer.
In order for a better understanding of how canvas type affects tile settings, refer to the collection of articles about canvas features.
When targeting which tiles will appear on a page based on the device used to access said page it is important to be cognizant of the amount of real estate available for certain elements as users transition across devices. Larger elements that don't render critical information should be toggled off on smaller devices to preserve a sleek mobile experience.
More so, elements that consume mobile data, such as videos, should be toggled off on mobile devices.