Usage and Tips

Layouts

Single span.

Mobile fall-back

The Blank component (or the article/block background graphic) is not rendered by default on a mobile.

Tips

Here are some techniques for getting the most from Blank:

• On a mobile device the article/block graphics and the Blank component are not rendered by default whereas a Graphic component would be. You can use these two differing default behaviours to tailor the experience to compliment a particular device—if it's important that the graphic is shown, regardless of device then choose to use the Graphic component, if however your wanting to improve the look of the desktop and tablet experience but want to reduce clutter for the mobile the Blank and the article/block graphic approach might be worthy of consideration.

• Imagine you were tasked with designing two Adapt pages that needed to present the following information on Desktop, tablet and mobile.

Graphic component example

An Adapt page intended to instruct the learner so they knew what fire extinguisher to use in the event of a small fire in the workplace. [NB: The colour of the extinguisher being critical in helping to identify the extinguishing agent contained and therefore its appropriateness for use in a given situation.]

Block background example

A more general Adapt page tasked with presenting the learner with an overview of more general hazards in the workplace and how to stay safe by following an agreed set of procedures. [This approach would be fine if the block background graphic was showing a fire extinguisher in relation to a general piece on what to do in the event of a fire. The relationship between meaning and image isn’t critical and on mobile you are removing unnecessary content.]

• Consider creating one large article background graphic, set the block backgrounds to transparent and then place Blank components at specific points of visual interest (the rest of the page can be populated with components as usual). This allows you to create a very visually rich, joined up experiences that wouldn’t be possible with graphic components. If adopting this approach

  • Do ensure the graphic is large enough. It must accommodate not only the page as rendered on load, but it also needs to be large enough to act as the background when the page is at its longest (remember the block height increases when items such as accordions are opened). It helps to:
    • avoid using components that change block height
    • create the article background graphic once the page is built with all components
    • keep pages short
  • Keep an eye on the file sizes of the article background graphic as they can quickly become large if the page is overly long or particularly complex.