Introduction
The appearance and the availability of functions in Media Manager change in line with the size of the screen that the application is used on according to the principles of adaptive design.
There are 3 types of designs for Media Manager, dependent on the size of available screen:
desktop version, for screens wider than 1280 px
mobile version, for screen between 360-1280 px without touch capability
mobile version for touch screens, for screens between 360-1280 px with touch capability.
Technical requirements for Mobile Web:
Screens wider than 360 px.
Support for the latest browsers is guaranteed: Google Chrome on Android devices and Safari on iOS devices. The use of Media Manager in other browsers on mobile devices happens on the user’s own responsibility.
In the brand portal style administration options it is possible to set up separate logos for desktop view (primary logo) and for mobile view (secondary logo). It is recommended to use images with max. width of 140 px for the secondary logo. If the selected secondary logo is wider, it will be downsized to 140 px when viewing Media Manager on smaller screens.
The vast majority of Media Manager’s functionality is available when using the application on mobile devices and in connectors. However, there are a few exceptions and the following are not supported:
Functionality | Details |
|---|---|
Cropping tool | The cropping tool is available on screens wider than 600 px. If the screen is narrower, the cropping page is still displayed, but the following message is displayed:  |
Asset comparison | The asset comparison tool is available on screens wider than 600 px. If the screen is narrower, the option to compare assets will not appear on the multiselect menu. |
Portal administration options | Settings as well as editing the page’s layout for brand portals are unavailable for screens narrower than 1280 px. These can only be performed on desktop. |
General concepts
Media Manager in a compressed view uses certain space-saving techniques that enable the users to enjoy access to the majority of its functionality while working in limited space, for example on a mobile device.
Stashed functionality via hamburger menu
When the screen is less wide than 1280 px, the top bar changes to account for the limited space.
The following elements are visible on the top bar on smaller screens:
logo
search icon, which changes into full-width search bar upon activation
hamburger menu with the following features (availability dependent on roles): ‘Home’, ‘Collections’, ‘Tasks’, ‘Upload’, ‘Notifications’, ‘My Profile’, ‘Languages’, ‘About’ and ‘Log out’
Horizontal scrolling
As the width of Media Manager screen is limited on mobile devices and connectors, the principle of horizontal scrolling was applied in areas where this would improve the experience for the users.
Horizontal scroll bars are moved by the user in a different way, dependent on whether or not Media Manager is loaded on a touch device:
on non-touch devices, the user scrolls through the available options by clicking the horizontal arrows
on touch devices, the user scrolls through the available options by swiping horizontally
The following functionality uses the concept of horizontal scrolling:
Functionality | Visual representation |
|---|---|
Folders (in both basic and visual form) |  |
Assets viewable in a list form and other lists, such as audit trail and workflow tasks |  |
Asset actions in a focused view (touch devices only) |  |
Tabs in an asset focused view |  |
Hover state
There is now an underlaying assumption that Media Manager can be accessed by the users on devices other than a computer and the method of navigation might be touch rather than a mouse. As a result, when it is detected that the application is loaded on a touch device such as a tablet or a smartphone, the hover state is removed.
This means that on touch devices:
tooltip labels (for example button explanations or workflow-related fields) do not appear
the grey multiselect checkmarks on asset cards are always visible
Differences in button design
In many cases there are two versions of buttons in Media Manager, dependent on the size of the screen. On desktop, the buttons usually have both a symbol and a description. When the screen width is less than 1280 px (or in some cases: 600 px) the space-maximizing button design is used instead.
Additionally, some functionality taking a set space when on desktop is hidden and only activated upon pressing a button on smaller screens. This concerns filters.
The table below only presents the overview of the buttons, where the design differs dependent on the screen size.
Functionality | Button design on screens wider than 1280 px | Button design on screens less wide than 1280/600 px |
|---|---|---|
Filters | None (a panel that can be either permanently visible or hidden) |  |
Home |  | None (click on logo to go back to the homepage) |
Search (global) |  |  |
Search (local) |  |  |
Sorting |  |  |
Download |  |  |
Check in/out |  |  |
Crop |  |  |
Favorite |  |  |
Share |  |  |
Pop-up operations on small screens
In Media Manager’s compact version, the operations concerning features that don’t require leaving the current view can be delivered in one of three ways:
In a pop-up dialog, in the same way as on desktop
Example: asset download
In a full screen overlay
Example: filters
In a slide-up dialog
Example: sorting
User experience in connectors and on touch devices
Uploading assets
In the mobile view, the ‘Upload’ button is located under the hamburger menu and is the only available method of uploading new assets, while on desktop it is also possible to use a drag & drop method.
All the upload-related options are available on mobile device and the only difference is in design. The upload progress information is available as a single-line dialog that can be expanded for more information rather than as a button on the top bar.
Filter panel
In the mobile view, filters behave differently than on full desktop version. Rather than having a dedicated space on the left side of the screen, filters are activated by a button and open by fully overlaying the screen.
The same rules are applied not only to the main filter menu in the home screen, but to all types of filters within the application, for example Audit Trail filters.
Detail view
(description placeholder)
Metadata editor
(description placeholder)
Downloading assets
(description placeholder)
Working with multiple assets/Multiselect
(description placeholder)
List view/Table view
(description placeholder)
Breadcrumbs (/Navigation?)
(description placeholder)
Collections
(description placeholder)
Asset multiselect
(description placeholder)
Administration tools
(find a better title)
(description placeholder)