--- sourceDocument: Australia Build or modify applications sourceDocumentLink: https://www.servicenow.com/docs/r/australia/application-development Release : - australia ft:locale : - en-US ft:publication_title : - Australia Build or modify applications ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # Responsive authoring # Responsive authoring {#ariaid-title1} Release version: Australia Updated March 12, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) 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 their layout and appearance based on the device form factor, such as desktop, tablet, or mobile. This feature ensures pages look good and function properly across different screen sizes, enhancing user interaction and accessibility. Show full answer Show less UI Builder provides three default form factors---Desktop (1281 pixels and up), Tablet (1280 pixels and smaller), and Mobile (500 pixels and below)---and supports up to three additional custom breakpoints to tailor responsive behavior further. ## Key Features * **Flexible Page Adjustments:** Show or hide components, change component settings, edit styles, and rearrange layouts for each form factor to optimize usability on various devices. * **Cascading Changes:** Changes made to a larger form factor automatically apply to smaller ones (e.g., tablet to mobile), but modifications on smaller form factors override cascaded settings, allowing precise control. * **Controller Properties:** Controller properties remain global and cannot be customized per form factor. * **Responsive vs. Reflow Models:** Responsive authoring is available only for new pages created from scratch, offering more design control. Existing or template-based pages use the default reflow model, which stacks content vertically for accessibility, such as at 400% zoom. * **Custom Breakpoints:** Customers can define up to three additional custom breakpoints to better tailor designs beyond the default form factors. * **Live Preview and Editing:** Designers can switch between form factors within the UI Builder stage or enter custom pixel widths to preview and adjust page designs responsively in real time. ## Practical Application When building pages, start with the desktop form factor and customize components and layout for tablet and mobile views. For example, reduce component size, adjust column counts in lists, or hide certain elements to improve clarity and usability on smaller screens. Indicator icons mark fields customized for each form factor, helping track which settings are inherited or specifically overridden. Users can also adjust component visibility, configuration, styles, and layout to optimize the experience on each device type. ## Why It Matters Responsive authoring empowers ServiceNow customers to deliver seamless, accessible, and visually appealing experiences across multiple devices without sacrificing functionality. It enhances user engagement by ensuring content adapts fluidly to screen size and use context, which is critical for mobile and tablet users. 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__section_mfl_5jp_qbc} 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) {#responsive-authoring__ul_qsx_xwp_qbc} 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](https://www.servicenow.com/docs/ky0mfex11KzeUeEGLQsfWQ "Learn how to create custom breakpoints for responsive authoring to control the look and feel of a page at different form factors."). There are different techniques for editing pages so they're usable at different form factors. Use any of the following options: * [Show or hide components](https://www.servicenow.com/docs/YKUIi3SbFgNDk79zVg6RLA "When creating pages with responsive authoring for different form factors, learn how to show or hide components by completing steps to hide an image at mobile size.") * [Change component configuration](https://www.servicenow.com/docs/u5iNFhBXcrXRNQA89XUR9A "When creating pages with responsive authoring for different form factors, learn how adjusting some component configuration options can make pages look and work better at smaller sizes.") * [Edit styles](https://www.servicenow.com/docs/KhMgkO4LcKBeH9va0KHsaw "When creating pages with responsive authoring for different form factors, learn how to change style options to increase the usability of the page at smaller sizes.") * [Rearrange the layout](https://www.servicenow.com/docs/tKLo0hloX5GQtB9rQQ1Yew "When creating pages with responsive authoring for different form factors, learn how to adjust the layout to improve the look and feel of the page at smaller sizes.") {#responsive-authoring__ul_yn3_5qb_1cc} ## Responsive authoring and reflow {#responsive-authoring__section_yw3_xrs_rbc} 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](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users."). For a list of UI Builder components that support reflow, see the Support for reflow section of the [https://www.servicenow.com/docs/access?context=next-experience-components-rn\&version=australia\&pubname=australia-release-notes\&ft:locale=en-US](https://www.servicenow.com/docs/access?context=next-experience-components-rn&version=australia&pubname=australia-release-notes&ft:locale=en-US). ## Application and cascading of changes {#responsive-authoring__section_j1j_wrs_rbc} 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 {#responsive-authoring__section_uj2_hmp_lcc} 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)](https://www.servicenow.com/docs/vUcCQFUFKEqxLdTSoa~1ng#controllers "Controllers simplify the linking of data and event logic to enable component presets in UI Builder."). ## Using responsive authoring as you create pages {#responsive-authoring__section_bls_vjp_qbc} 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. Here's what a sample page looks like at the desktop form factor. Here's the same page customized for the tablet form factor. 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. Here's the same page customized for the mobile form factor. 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. 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](https://www.servicenow.com/docs/WCxky8Iy~zOOLqZnb1y_8w "Preview your experience in UI Builder to see how it looks and functions while building an experience. Previewing helps ensure that your experience works as expected, that the data resources are available, and that the layouts are set up correctly."). * **[Adjusting component visibility in responsive authoring](https://www.servicenow.com/docs/YKUIi3SbFgNDk79zVg6RLA)** When creating pages with responsive authoring for different form factors, learn how to show or hide components by completing steps to hide an image at mobile size. * **[Configuring components for responsive authoring](https://www.servicenow.com/docs/u5iNFhBXcrXRNQA89XUR9A)** When creating pages with responsive authoring for different form factors, learn how adjusting some component configuration options can make pages look and work better at smaller sizes. * **[Adjust styles for responsive authoring](https://www.servicenow.com/docs/KhMgkO4LcKBeH9va0KHsaw)** When creating pages with responsive authoring for different form factors, learn how to change style options to increase the usability of the page at smaller sizes. * **[Adjust layout for responsive authoring](https://www.servicenow.com/docs/tKLo0hloX5GQtB9rQQ1Yew)** When creating pages with responsive authoring for different form factors, learn how to adjust the layout to improve the look and feel of the page at smaller sizes. * **[Create a breakpoint for responsive authoring](https://www.servicenow.com/docs/ky0mfex11KzeUeEGLQsfWQ)** Learn how to create custom breakpoints for responsive authoring to control the look and feel of a page at different form factors.