Responsive authoring

  • Release version: Xanadu
  • Updated August 1, 2024
  • 4 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Responsive authoring

    Responsive authoring in UI Builder allows ServiceNow customers to create pages that automatically adjust to different device sizes and form factors such as desktop, tablet, and mobile. This ensures that pages not only look good but also function effectively across various screen widths, improving user interactions regardless of the device used.

    Show full answer Show less

    UI Builder provides three default form factors: Desktop (1281 pixels and up), Tablet (1280 pixels to 501 pixels), and Mobile (500 pixels and below). Additionally, customers can define up to three custom breakpoints to further tailor responsiveness.

    Key Features

    • Responsive adjustments: Modify component visibility, configuration, styles, and layout to optimize pages for each form factor.
    • Cascading changes: Changes applied to a larger form factor automatically cascade down to smaller form factors, but changes on smaller form factors override these inherited settings. Changes do not cascade upward.
    • Controller properties: Controller settings apply globally across form factors and cannot be customized per device size.
    • Page creation: Responsive authoring is enabled by default when creating UI Builder pages from scratch, offering more control than the traditional reflow model.
    • Reflow model: Existing pages or template-based pages use the automatic reflow model, which stacks content vertically to maintain accessibility and functionality, especially supporting zoom up to 400% for better visibility.
    • Preview and testing: The UI Builder stage allows switching between form factors and entering custom pixel widths to preview how pages will render on different devices.
    • Customization indicators: Changes specific to form factors are marked with cascading icons, helping authors track differences across devices.

    Practical Application

    ServiceNow customers can leverage responsive authoring to create flexible and accessible UI Builder pages that adapt seamlessly to various devices. By customizing visibility, configuration, styles, and layout per form factor, authors can ensure an optimal user experience across desktops, tablets, and mobile devices.

    For example, a three-column layout on desktop can be simplified to a single column on mobile, with images hidden or resized and lists adjusted for readability. This approach also supports accessibility needs through the reflow feature on existing pages.

    Creating custom breakpoints provides further granularity for device-specific page tailoring. Customers can preview and test these configurations directly within UI Builder to validate responsive behavior before publishing.

    Use responsive authoring to create UI Builder pages that adjust smoothly to different form factors (sizes), such as desktop, tablet, and mobile.

    Responsive authoring in UI Builder

    Responsive authoring enables you to create pages that look good and function properly at any form factor, making it easier for people to interact with the content. For example, a page containing three columns when viewed on a laptop, can adjust to a single column for smaller screens.

    UI Builder currently offers three default form factors:

    • Desktop (1281 pixels to infinity)
    • Tablet (1280 pixels and smaller)
    • Mobile (500 pixels to zero)

    In addition to these form factors, you can create up to three additional custom breakpoints (widths). For more information, see Create a breakpoint for responsive authoring.

    There are different techniques for editing pages so they're usable at different form factors. Use any of the following options:

    Responsive authoring and reflow

    As of Xanadu Store Release 1, responsive authoring is only available when creating UI Builder pages from scratch. Responsive authoring isn't available for existing pages or pages created with a template. These types of pages continue to use the existing, default reflow model to adjust pages for different screen widths.

    Reflow transforms page layouts into a vertical, stacked view automatically without loss of content or functionality when users increase browser zoom to 400%. This adjustment helps users with low vision or who have trouble seeing web content in a browser due to monitor size, device type, poor lighting, or other situations.

    All existing pages that were created with templates or from scratch use reflow automatically. Now, when creating pages from scratch in UI Builder, an extra step shows you that responsive authoring is selected by default. You can choose to use reflow instead by selecting Build without responsive, however, using the responsive authoring option gives you more control over how pages work and look at different form factors. For more information about creating pages in UI Builder, see Create a page in UI Builder.

    New step showing responsive authoring and reflow options when creating a page from scratch.

    For more information about reflow, see Reflow for Configurable Workspace.

    For a list of UI Builder components that support reflow, see the Support for reflow section of the Next Experience Components release notes.

    Application and cascading of changes

    All changes made to a form factor are applied to all smaller form factors automatically. For example, any changes made to tablet apply to both tablet and mobile. However, if you then make changes to the mobile form factor, it overrides the cascaded settings from the tablet form factor. This cascading functionality enables you to make specific changes for each smaller form factor so the page looks and functions well.

    Note:
    Changes don't cascade up to larger sizes. For example, changes made to tablet aren't applied to the desktop.

    Responsive authoring and controllers

    If you add a controller to a page, the controller properties are global and cannot be set per form factor. For more information about controllers, see Bind data to UI Builder pages using controllers (advanced feature).

    Using responsive authoring as you create pages

    As you build pages, create tailored designs to control the look and feel for different form factors.

    By default on the stage, you build pages for the desktop (1281 pixels to infinity). At any time, select another icon to see the page on the stage at a different form factor, such as tablet or mobile. As needed, edit the page so it displays appropriately at the new form factor.

    Black arrow pointing to the form factor icons for desktop, tablet, and mobile at the top of a UI Builder page in editor view.

    Here's what a sample page looks like at the desktop form factor.

    Sample page displayed at 1304 pixels wide to represent a desktop or laptop screen.

    Here's the same page customized for the tablet form factor.

    Sample page displayed at 900 pixels wide to represent a tablet.

    For tablet, the heading and image components have been reduced in size. The simple list component configuration was edited to show four columns instead of six and the maximum number of rows was set to 5. When editing a component for a form factor, the fields that have changed are marked with a cascading icon for that form factor (in this case, tablet). The icon enables you to determine the differences between the form factors for a given page easily.

    Simple list component configuration panel with black arrows pointing to the tablet cascading responsive authoring icon next to two fields.

    Here's the same page customized for the mobile form factor.

    Sample page displayed at 320 pixels wide to represent a mobile device.

    The number of words in the heading was reduced and the image component was hidden. The simple list component configuration was edited to show two columns instead of four and the option to hide the "view all" footer option was selected. The two fields customized specifically for mobile have a mobile cascading icon next to them. The Maximum rows field still retains the tablet cascading icon because that field is inheriting the tablet setting and wasn't customized for mobile.

    Simple list component configuration panel with black arrows pointing to the two mobile and one tablet cascading icons next to fields.

    In addition to the default form factors in the editor view, at any time you can manually enter a number in the pixel field. The stage adjusts to the nearest form factor based on range. For example, entering 850 pixels adjusts the stage to the tablet form factor because its range is defined as 1280 to 501 pixels.

    Black arrows pointing to the tablet form factor icon and the pixel field.

    Note:
    Form factors and the ability to enter a pixel width are also available when previewing a page. For more information, see Learn how to view and test your UI Builder experience.