Formatting for Mobile and Desktop

Page Formatting

Our platform delivers a mobile-first experience, but with the tools to also take advantage of larger screen formats.

The major formatting option is Single Column vs Multi Column in the Style tab. The Single column option will display all of your content in a single column on desktop, but will also use a wider Action format on these larger displays.

Multi-Column

If you have a desktop audience, then the multi-column option will allow your Apps to use the entire screen.

It’s automatic that an App’s Actions will “tile” across a larger screen to take advantage of a two-column and then three-column width, and most of the time, this looks great. 

But sometimes, the larger screens need some formatting guidance to look their best. This is when you will use the “Desktop and Tablet Arrangement” control on the “Edit” page of each Action.

“Action starts a new row (page break)” will cause the target Action to appear to the left of a larger screen (as if you used a line return) and will cause the following Actions to line up with at the top. 

 "Action starts a new centered row" will cause the Action to appear alone in the center column. 

“Tethered to the bottom of the previous Action” or “...to the top of the following Action” will cause an Action to bind itself to an adjacent Action so they always appear together.

“Full-width Action” causes an Action to use the entire screen width. The most common use-cases are:

   - To use a “Page Text” Action as a header/divider to format the following Actions into a new section.

   - To cause a floating “Menu” action to stretch across the page. This looks good for placing contact links right under the profile header.

   - To cause any Action to stretch across the page for organizational purposes. This can look good if the Action preview metadata does not include an image (but might not if it does).

Remember that these formatting selections will not affect the mobile experience of your App. They are designed to allow you to deliver the best possible experience on larger screen formats.

Below is an App displayed on a mobile device followed by the same App on desktop:

               

Color Coding

Also note that actions are color-coded on the “App Edit” page. This gives you a quick visual cue that an Action has special formatting. This is especially useful when an Action is used in more than one App. You might need to copy an Action to create a unique version if the formatting need is different in a different App.

Below are the color tabs that also highlight an Action's drag handle.