Responsive Design and RESS

Dual-layer responsiveness: display-level adaptability combined with server-side platform detection.

Platform → UI Technology→ Clients | WebAssembly | Symbols | Drawing | Responsive | Layouts

Overview

Display Responsiveness

Both dashboards and canvas displays have customizable responsiveness. They can stretch proportionately to the client area, keeping gate relationship of object, or reposition internally the objects. 

The configuration of the behavior is defined at the Display-Level, with the  OnResize Property of the displays

Responsive Design & RESS

Responsive Design + Server-Side Components (RESS) delivers optimal user experience across all devices.

The configuration of that behavior is implemented at the Layout-Level, the internal displays are the same:

• Build-once: share some display configuration for multiple types of devices

• Run everywhere:  Identifies client device and  deliver content with proper layout

Server Side Layouts

Display-Level Responsiveness (OnResize)

Every display—whether created with Canvas or Dashboard drawing tools—has configurable resize behavior through the OnResize property:

<ac:structured-macro ac:name="info"> ac:rich-text-body

Important: Canvas vs Dashboard is about the drawing method, not responsiveness. A Canvas display can be responsive, and a Dashboard display can use StretchUniform. The drawing tool determines how you position objects during design; OnResize determines runtime behavior.

Responsive Canvas

When a Canvas display uses OnResize="Responsive", individual elements can be configured to:

• Maintain fixed margins from edges
• Scale width/height proportionally
• Anchor to specific sides
• Combine fixed and proportional sizing

Example: A sidebar that maintains fixed width while content area expands.

Dashboard Responsiveness

Dashboard displays inherently support grid-based responsiveness:

• Grid cells redistribute based on available space
• Content within cells follows cell boundaries
• Automatic conversion to vertical stack on mobile portrait

<ac:structured-macro ac:name="info"> ac:rich-text-body

Defaults:
- Canvas displays default to StretchUniform - preserving diagram integrity
- Dashboard displays default to Responsive - adapting to screen size

Server-Side Responsive (RESS)

RESS (Responsive + Server-Side) adds intelligence before content delivery. The server identifies the client type and sends optimized content:

Responsive Design & RESS (Concept): Responsive Design + Server-Side Components (RESS) delivers optimal user experience across all devices:

• Build-once: share some display configuration for multiple types of devices

• Run everywhere:  Identifies client device and  deliver content with proper layout

Responsive Design + Server-Side Components delivers optimal user experience across all devices:

• Server Detection - Identifies device class (phone, tablet, desktop)

• Optimized Delivery - Sends appropriate content and resources

• Responsive Behavior - Maintains flexibility within device class

• Reduced Engineering time - all displays are shared by all layouts

• Result - Fast loading with adaptive layouts

Client Detection

RESS Benefits

• Reduced bandwidth - Only necessary resources sent
• Faster loading - Optimized content for device
• Better UX - Platform-appropriate interfaces
• Single source - One configuration, multiple outputs

How Layers Work Together

The two responsive layers complement each other:

1. Server decides WHAT - Which layout and displays to send
2. Display decides HOW - How content adapts to screen changes

Example Workflow

Configuration Points

Display Level (OnResize)

Set in Display properties during design:

• Choose resize mode per display
• Configure responsive anchoring for Canvas
• Test with preview at different sizes

Server Level (RESS)

Configure in Layouts:

• Assign platform-specific displays
• Define fallback options
• Set region visibility per platform

Details in .

Design Strategies

Progressive Enhancement

1. Design for smallest screen first (mobile)
2. Add complexity for larger screens
3. Use RESS to deliver appropriate version
4. Let OnResize handle minor adjustments

Graceful Degradation

1. Create full-featured desktop version
2. Define simplified mobile alternatives
3. RESS automatically selects based on client
4. OnResize maintains usability during transitions

Best Practices

In this section...