Master responsive guidelines

Responsive design is the practice of dynamically reacting to the user’s screen type, size, and orientation, ensuring the interface is always well presented and accessible.

Verint products, particularly newer applications, should be usable on all devices down to the common tablet size (960px width).

For each pattern used in a Verint product, see the relevant LUX page for detailed responsive behavior definitions.

(*Teapot not included)

Approaches

Verint promotes responsive design, as it accommodates changing browser sizes and embedded widget scenarios.

Responsive design is fluid, adapting to the size of the screen on any device, even as it changes during use.
Adaptive design uses static layouts, which are chosen based on the detected screen size when initially loaded, but don’t respond if the window size later changes.

LUX applications do not accommodate global vertical scroll. Where necessary, vertical scroll should be used only within containers, such as a panel or widget.

Breakpoints

Material UI uses these common breakpoints:
- extra-small: 0-600 px
- small: 601 - 960 px
- medium: 961 - 1280 px
- large: 1281 - 1920 px
- extra-large: 1921 px and larger
The width of the screen is not the only parameter which can influence the width of a container within the interface. For example, changing the pin state of collapsible panels will change the available space for other elements on the page. Therefore, where appropriate, breakpoints should be set for each pattern or component depending on its container size, rather than for the entire interface.
~~Height is less critical than width, as vertical scroll is less disruptive than horizontal scroll.~~

Supported devices

Sizes

Screen widths are usually measured in pixels (px).

LUX fully supports screens down to 960px width, a common tablet size.
Designs for smaller screens, including mobile devices, are not currently defined in LUX. However, responsive design down to this size is still encouraged.
For designs for screens not currently covered by LUX, contact the UX team for guidance.
Adaptive design may also be used for mobile where necessary, with separate versions for screens below 960px.

Touch devices

Must provide a way to operate which doesn’t necessitate hover, e.g. for Tooltips.
Increase target areas (space between elements as well as size).
Locking orientation (horizontal) on tablets.
A drag interaction should be available for scroll on touch devices.

For other interaction methods, such as keyboard and screen readers, see Accessibility.

Specific design recommendations

Verint don’t support phones, but do support tablets.
For fixed-width elements, such as the Filter Pane and Details Panel, the size is not responsive but features such as pinning and expansion may behave differently at different widths.
Where possible, use vector graphics such as SVGs and font icons, as they are more responsive.

Best practices

Where space is limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible. https://www.nngroup.com/videos/ui-design-fails/
Transitions…
Using a mobile-first approach can make design and implementation easier, by creating designs at 600 px and then scaling them up to suit larger screens, rather than vice-versa.
Text sizing should also adjust as part of an interface’s responsive behavior. Also refer to our Accessibility guidelines.
Minimum target size recommendations…

Implementation approaches

Flexbox!
CSS grid??
Use React as a javascript framework (not ExtJS), because it is more responsive-compatible.
The Material UI API defines specific breakpoints for interfaces, for example: Do we need to say more?
- extra-small: 0-600 px
- small: 601 - 960 px
- medium: 961 - 1280 px
- large: 1281 - 1920 px
- extra-large: 1921 px and larger
CSS Media Queries are usually used to define styles at different dimensions. Media queries also inspect the physical characteristics of the user’s device, making it a superior approach than simply defining breakpoints in HTML/CSS.
Fluid Grids are created using CSS. The panes are automatically rearranged to fit the screen, enabling a consistent look and feel across devices, as elements occupy the same percentage of space however large or small the screen becomes.

Examples

See the /wiki/spaces/UserExp/pages/1949337002 for examples of responsive behavior designs for Verint products.