Child pages
  • Edit and preview a page on large and small screens
Skip to end of metadata
Go to start of metadata

Has to be revisited

Basic ideas still hold, but we have no Toolbox any more


No matter where I edit my pages - whether on a small or big screen - I can move the Toolbox either out of the way or generally ensure that it doesn't cover any content. In addition, once I'm acquainted to the basic interface, I can minimize the Toolbox so that most of my screen will be occupied by the page contents and almost none by the interface.

Description of desired behavior

The problem

Most sites nowadays feature either a flexible-width layout, which takes maximum advantage of the available screen estate, or a fixed-width layout, which is then centered horizontally.

The Toolbox always covers the page, if it features a flexible-width layout, independent of the screen size and resolution. For fixed-width layouts, it may in fact cover at least part of the content even on larger screens (see UX:mockups below for a visualization). So, a floating Toolbox could be in your way most of the time. The solution here would be to lock the Toolbox on the right or left edge and ensure that the entire column containing the box is unavailable to page rendering.

But this again hurts users working on devices with small screens as it squeezes the rendered page into a small space. Here, a floating Toolbox would be the best choice as it leaves the entire screen available for rendering; the box can at least be moved out of the way.

There is, in fact, no single, optimal solution serving both cases well enough.

Lock the Toolbox

Magnolia shall support both a floating and a fixed Toolbox. If the Toolbox is fixed, the entire column underneath the box will be unavailable to page rendering. If the Toolbox is floating, it can be freely moved around the screen and will be always on top of the content. The page rendering may then use the entire screen width. The default position for a floating Toolbox shall be the upper right corner (upper left on RTL setups).

The users may change the Toolbox state from fixed to floating by grabbing and dragging it. The Toolbox will then unlock from the column, which in turn is minimized to a small strip. The box can then be moved around. The Toolbox can be fixed again by moving it to one of the two small strips on either side of the page. The box will lock onto the strip, the strip itself will expand into a column matching the width of the box, which will then again become unavailable for page rendering.

Minimize the UI

For advanced users familiar with Magnolia's interface for Visual Page Editing, a fixed Toolbox can also be minimized. The box then becomes very narrow, but covers the entire height of the screen. It only shows the most common actions using larger icons, provides access to global actions and buttons to preview the page and exit editing.

Tooltips stating the name of the action appear on mouse hover or tap-and-hold (please note: release a tap-and-hold does not execute an action) over an icon.

Page preview

The same mechanism shall also be available to lock and unlock the Toolbox of the page preview in place. The Page Preview also offers a UX:minimized interface.


The floating and fixed Toolbox and typical site layouts

Locking and Unlocking the Toolbox

The mockup shows to slightly green strip on either side of the rendered page, where the Toolbox can be dragged to in order to lock it. An alternative might be to just show the green strip when the mouse drags the Toolbox on the area. However, the strip should not remain entirely invisible as this breaks the page preview: it looks as if the border would be larger than it actually will be.

Minimised UI

  • No labels