Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.

Provide the same functionality on all devices. Tablets are first-class citizens on Magnolia.

Providing the same functionality on all devices means that sometimes you need to make compromises. Not all functionality works well on touch devices. Aiming for equal user experience means you should not rely on desktop features and interaction patterns that are difficult to do with touch.

Only the first action in a group is displayed on tablets

Only the first action in an action group is displayed right away to touch devices such as tablets. The remaining actions are displayed only after a long press. Make sure that the first action in every group is an action that users need often.

Action bar on a tablet:

Action bar on a desktop browser:

Don't rely on desktop gestures

  • Hover does not work on touch devices. Display secondary information in a separate section of the actionbar when the item is selected. See how content apps display an image preview.
  • Drag-and-drop can be very useful but you need to know its limitations. It doesn't work well over long distances or with one hand.
  • Small UI elements such as rows, typeface and boxes are difficult to touch. Make your touch targets comfortably big for fingers.

Avoid iFrames

iFrames in general are problematic on tablets. The more complex the third-party library, the more likely it is you will have problems. Simple is better. Be prepared to fall back to a simpler solution, such as from a rich text editor to a plain text editor on touch devices.

  • No labels