How to make your app look good on desktop too

Progressive web apps target an app-like mobile experience; but they're also websites that serve desktop and tablet users. 

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

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 “Action 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 carriage return) and will further cause the following actions to line up with the top of the target action. This allows you to create straight line page breaks when appropriate.

 "Action starts a new centered row" will cause the action to appear alone in the center column. If you want the desktop view of your app to mimic the mobile view, then select this format option for all of the actions in the app.

“Tethered to the bottom of the previous action” or “...to the top of the following action” you will cause an action to bind itself to an adjacent action so they always appear together, no-matter the size screen.

“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) so be sure and look at the app on a desktop display when you choose the full-width option.

Remember that these formatting selections will not affect on 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 as 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 different apps.

Below are the color tabs that show the desktop arrangement for the above example. Hover your cursor over a tab on your dashboard to see the format type.