Be a good tablet citizen

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.