Create an adaptive format microapp 2.0

Skip to content

English

Adaptive, Not Responsive

Websites usually handle different screens in one of two ways:

Approach	How It Works
Responsive	One layout that stretches, shrinks, and reflows automatically to fit any screen.
Adaptive	A separately designed layout for each screen size. The right one is chosen when the content opens.

Microapps are adaptive. That’s a deliberate choice: it gives designers full control over exactly how the microapp looks on each device, instead of leaving the layout to automatic reflow. The trade-off is that each format is designed on its own, with its own layout and elements.

Adaptive and responsive formats are two approaches used in design to optimize the user experience on tablet and mobile devices. While both techniques aim to make websites more mobile-friendly, they differ in their implementation and how they handle various screen sizes and resolutions. Microapps are adaptive, not responsive. This was an intentional decision to give greater control to designers about the tablet and mobile experiences they are creating.

Adaptive design involves creating multiple versions of a microapp tailored to specific device screen sizes. In other words, each adaptive format is designed independently, with its own layout and design elements. When a user accesses a microapp, the browser (or app) detects the device type and if an adaptive version is available will render the matching adaptive format.

Create an Adaptive Format

Creating a Format

1. Open the microapp — in the Builder.

2. Select the + icon — in the top-left corner of the Builder.

3. Choose the format — you want to create.

4. Select Add. — The new format is created.

5. Switch to the new format — to start designing it.

Using Builder 1.0? The steps are the same, except the button in step 4 is labeled Create Size.

Filling In a New Format

A new format starts out empty, so the quickest way to build it is to bring over pages you’ve already designed:

1. Select the pages — in your existing format. Hold Shift, or Cmd or Ctrl, to select several.

2. Copy them — with Cmd+C or Ctrl+C, or right-click and choose Copy.

3. Switch to the new format — and paste with Cmd+V or Ctrl+V, or right-click and choose Paste.

4. Adjust the layout — resize and rearrange each pasted page for the new screen size.

Copying a page brings its subpages with it.

Heads Up: Overlays can’t be copied and pasted. Rebuild any overlays the new format needs.

Pro Tip: Treat pasted pages as a starting point, not a finished layout. Text sized for a desktop screen is usually too small on a phone, and side-by-side elements often need stacking.

What Viewers See

When someone opens your microapp, their browser or the Tiled app detects the device and shows the matching format, if you’ve created one.

When a viewer rotates their device

On a mobile browser, rotating the device doesn’t reload the microapp. Viewers stay where they were, and a playing video keeps playing. If a better-suited format exists for the new orientation, a banner offers to load it:

• Tap the banner — reload into the better-suited format.

• Dismiss it — keep the current format.

• Refresh the browser — at any time, to load the best match.

Where Formats Show Up Elsewhere

Feature	What Formats Change
Embedding	When you create an embed, you choose which published format the embed will show.
Microapp Analytics	For microapps with more than one format, a format switcher filters Activity By Page to one format.
Pathway Analytics	Shows the device and orientation a recipient viewed on.
Copy and paste	Pages can be copied between formats and between microapps.
Try It Yourself: Create a mobile format for an existing microapp, paste in two or three of your desktop pages, and rework them for a phone. Publish, then open the share link on your phone and rotate it to see the format switch.

Common Questions

Question	Answer
Why doesn’t my microapp resize to fit a phone automatically?	Microapps are adaptive, not responsive. Each screen size gets its own designed format. Create a mobile format to control how the microapp looks on phones.
Do I have to build each format from scratch?	No. Copy pages from an existing format and paste them into the new one, then adjust the layout. Overlays need to be rebuilt.
Do edits in one format update the others?	No. Each format is designed independently. Change each format you want updated.
A viewer rotated their phone and the layout didn’t change.	The microapp doesn’t reload on rotation. If a better format exists, a banner offers to load it; the viewer can tap it or refresh the browser.
Can I choose which format an embed shows?	Yes. You pick from the microapp’s published formats when you create the embed code.

Related Articles

• Copying and Pasting Pages Between Microapps — Moving pages between formats and microapps.

• Viewing Microapps on a Mobile Browser — How microapps behave on phones and tablets.

• How to Embed a Microapp on a Webpage — Choosing a format for an embed.

• Engagement: Microapp Analytics — Page-level data per format.

• Publish A Microapp — Publishing so viewers see your formats.