Structure of the AEM Touch-Enabled UI
The AEM touch-enabled UI has several underlying principles and is made up of several key elements:
Basic Layout and Resizing
The UI caters for both mobile and desktop devices, though rather than creating two styles Adobe has decided to use one style that works for all screens and devices.
All modules use the same basic layout, in AEM this can be seen as:
The layout adheres to a responsive design style and will accommodate itself to the size of the device/window you are using.
For example, when the resolution goes below 1024px (as on a mobile device) the display will be adjusted accordingly:
The header bar shows global elements including:
- the logo and the specific product/solution that you are currently using; for AEM this also forms a link to the Global Navigation
- icon for accessing the help resources
- icon for accessing other Solutions
- a indicator of (and access to) any alerts or Inbox items that are waiting for you
- the user icon, together with a link to your profile management
This is contextual to your location and surfaces tools relevant to controlling the view or assets in the page below. The toolbar is product specific, but there is some commonality to the elements.
In any location the toolbar shows the actions currently available:
Also dependent on whether a resource is currently selected:
The left rail can be opened/hidden as required to show:
The default is Content Only (rail hidden).