Open the experience

You’ll start by opening the experience that was created in the earlier tutorial.

  1. If you completed the previous tutorial, Add a window to a web app, reopen your American River Marine Estuary experience and skip to the next section.
    Note:

    If you don’t know how to find the experience, open ArcGIS Experience Builder and sign in with your ArcGIS account. Your experience will be listed on the Recent experiences page.

  2. If you did not complete the previous tutorial, open ArcGIS Experience Builder and sign in with your ArcGIS account.
    Note:

    If you don't have an ArcGIS account, see options for software access.

    The Recent experiences page appears.

  3. Click the Create new button.

    Create new button

  4. Click the ArcGIS Online tab.

    ArcGIS Online tab

  5. In the search bar, type estuary tutorial template 3.
  6. On the American River Marine Estuary Tutorial Template 3 card, click the Create button.

    Create button on the American River Marine Estuary template card

    The canvas appears, showing the experience created so far. It includes a map, a header, a column with more widgets, and a button that opens a window.

    Full view of the experience template

  7. On the builder toolbar, click the title and rename it American River Marine Estuary.

    Experience title

Enable the custom layout option

The American River Marine Estuary experience is intended for an interactive kiosk, so your design has focused on a large screen format. However, your client has indicated that they also want to link to the app from their website, so users may also encounter it on tablets and mobile phones. You’ll use the custom layout option to make adjustments to the layout that will only be visible on smaller screens.

  1. On the builder toolbar, click the Edit your page for medium screen devices button.

    Edit your page for medium screen devices button

    The canvas becomes narrower, emulating the screen of a tablet device. The column next to the map is now too narrow to be useful. You can’t read any of the content in the widgets.

    Medium screen view of the experience

    Next to the menu, there are two state menus: one for the header and one for the body of the map. They are both set to Auto, meaning the layout for medium screens is the same as the layout for large screens.

  2. Next to the body of the app, click Custom.

    Custom option for the body of the app

  3. In the Are you sure you want to enable it window, click OK.

    Now you can change the layout design for the page on medium screens without affecting the design for large screens.

  4. Click the column. Try to click the space between two widgets to select the column instead of one of the other widgets.
    Tip:

    To confirm that you’ve selected the column widget, check that the Column pane has appeared. You can also select the column widget in the Outline section of the Page pane.

  5. Drag the side handle of the column widget to the right until it takes up four vertical spaces instead of two.

    Drag handle for the column

    The column is now wide enough to fully show the legend. This change won’t affect the experience on large screens.

Move an item to the pending list

Sometimes, you want to remove a widget entirely from a small screen layout. Instead of deleting the widget, which would remove it from the large screen layout as well, you can move it to the pending list.

  1. On the builder toolbar, click the Edit your page for small screen devices button.

    Edit your page for small screen devices button

    The canvas becomes even smaller. The changes needed here are more dramatic.

  2. On the canvas, scroll through the app.

    The column is shown first, with the map underneath. On smalls screens, row widgets are displayed as columns, so your layout is now structured as a column inside a column instead of a column inside a row.

    Small screen view of the experience

    Mobile apps have less space, so are more successful when they are kept simple. The information in the legend and bookmark widgets is also available in the pop-ups, so you’ll remove the widgets from view on small screens. The swipe feature is also less useful on a small screen, so you’ll remove it too. This means you can remove the entire column widget, leaving only the map.

  3. Next to the body of the canvas, click Custom. Click OK.
  4. Select the column widget. Ensure that the column is selected, not one of the widgets inside of it.

    Do not delete the column widget. Deleting a widget in custom mode will delete it from the entire app, so it will no longer be available on larger screens either. Instead of deleting widgets from a medium or small screen layout, move them to the pending list. This will ensure that they still exist and are available for other screen sizes.

    Tip:

    If you accidentally deleted the column widget, on the toolbar, click the Undo button.

  5. On the widget’s toolbar, click the Move to the pending list button.

    Move to the pending list button

    The column and all of its contents disappear from the canvas. Only the map remains.

    Full view of the experience on a small screen

    Note:

    If the map does not fill the entire canvas, click and drag it a small amount to reset its size.

    If the map tools (for example, the switch map button) are not visible at the bottom of the canvas, open the Map pane to the Style tab. For Height, choose Custom and set the size to 100%.

Set size and position with pixels

Creating custom layouts for smaller screens has a drawback: if you decide to make changes to the layout afterward, you must make them two or three times. Sometimes, you can avoid enabling a custom layout by sizing things with pixels instead of percentages.

On small screens, the About this map button on your experience is not large enough to show all of its text.

Truncated button text

You could make a custom size for the button that only affects small screens, but instead you’ll change the general size of the button so it works on all screen sizes and no customization is needed.

  1. On the builder toolbar, click the Edit your page for large screen devices button.

    Edit your page for large screen devices button

  2. Point to the header and click Edit header. Click the button widget.
  3. In the Button 2 pane, click the Style tab.

    Style tab

    Under Size & Position, the Width and Height settings are both measured as a percentage of the screen size. This is why the button becomes too short to read on small screen devices.

  4. Next to Width, click the % button and choose px. Change % to px for the Height setting as well.

    Width and Height set to pixels

    Determining the button’s size with pixels will mean that the button is always the same size, regardless of the screen size.

  5. For Width, type 120. For Height, type 30.

    Width and Height settings

    The button looks a little small for large screens, and it will still look a little big for small screens. But its new size is a compromise that works on any size screen. You’ll also determine its position in pixels.

    Below the Height parameter, there is a position diagram. This diagram determines how far from the edges of the header the button is placed.

  6. In the position diagram, next to the bottom and the right position measurements, click the % button and choose px.
  7. Change both measurements to 10 pixels.

    Right and bottom position set to 10 pixels

    The button is now positioned 10 pixels from the bottom right corner of the header.

    Resized button

    Next, you’ll adjust the position of the title text so it is also 10 pixels from the edge.

  8. On the canvas, click the title text.

    In the Text pane, on the Style tab, in the position diagram, all four measurements are set to 0 percent. This is because you configured the title to fill the entire space of the header. You’ll adjust one of these measurements.

  9. In the position diagram, change the left measurement to 10 pixels.

    Left position set to 10 pixels

    On the canvas, the text widget shifts slightly to the right.

    Shifted title text

  10. Click the Edit your page for medium screen devices and Edit your page for small screen devices buttons to test how the header appears on smaller screens.

    Size and position settings reflected on a small screen

  11. On the builder toolbar, click the Edit your page for large screen devices button and the Save button.

In this tutorial, you adapted your layout to work on three screen sizes. You enabled the custom layout option, moved unwanted items to the pending list, and set the size and position of widgets using pixels to ensure they do not resize as the screen size changes. Try the last tutorial in this series, Publish an experience and a template, to learn how to make the experience available to the public.