Optimize an app layout for mobile

You recently finished making a park information app for Great Smoky Mountains National Park. You expect many users will access your app on a mobile device, so you want to ensure your app has an optimized mobile experience.

In this tutorial, you'll change the app to fit small-screen devices using ArcGIS Experience Builder. You'll adjust device modes, size and position settings, and the pending list to create a simple and readable home page and header for mobile users.

This tutorial was last tested on May 15, 2024.

View final result

Requirements

• User, Publisher, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Experience Builder

Optimize an app layout for mobile

Review the app

First, you'll review the app to determine which elements need to be modified for small-screen devices.

1. Sign in to your ArcGIS organizational account.

   Note:

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

2. On the ribbon, click the apps button and choose Experience Builder.

   

   Tip:

   Alternatively, you can go directly to the Experience Builder site.

   Experience Builder appears. The home page lists recent experiences you've created.

3. Click the Create new button.

   

   A list of templates appears. Templates have preconfigured layouts and widgets that you can modify. You'll create an app using a park information app template made for this tutorial.

4. Click the ArcGIS Online tab.

   

5. In the search bar, type Great Smoky Mountains National Park owner:Learn_ArcGIS. In the list of results, for Great Smoky Mountains National Park (Tutorial), click Create.

   Tip:

   The correct template has a thumbnail showing a photograph of the park. You can see the full name of the template by pointing to its name.

   

   An app is created using the template. You're taken to an editor, where you can make changes as necessary.

   

   The app has seven pages, which can be navigated to from the home page. While the app looks completed, it is only designed for desktop screens. You'll change the display to see what it looks like for small-screen devices.

6. On the ribbon, click the Edit your page for small screen devices button.

   

   Note:

   The dimensions drop-down menu next to the button allows you to preview your app for more specific screen sizes. However, you can only rearrange your layout for the three general device modes.

   The app layout changes.

   

   Many of the elements in the app are now too small for the text to be readable, and the title text no longer fits on the header.

   By default, the header and body of the app were adjusted using the Auto layout. In this layout, Experience Builder automatically makes changes. You'll need to make several custom changes for this app to be optimized for mobile devices.

Edit the body

The app's home page has two components: the header and the body. The header is the upper part of the page and contains the title, logo, and navigation buttons. The body is the lower part of the page and contains the primary content. First, you'll edit the body.

1. For the body, click Custom.

   

   A message appears, telling you that by enabling custom, you can manually arrange widgets separately from other device modes.

2. For Are you sure you want to enable it, click OK.

   You can now make edits to the body. First, you'll change the Current Conditions button. On a small screen, its text is cut off.

3. Click the Current Conditions button widget.

   

   A pane appears with options to edit the widget.

4. In the Current Conditions pane, click the Style tab.

   

   You'll center the button, adjust its width, and change its position relative to the center of the body.

5. Click the Horizontal center button.

   

6. Under Size & Position, for Width, type 50. On the relative position chart, click the number and type 5.

   

   The changes are automatically applied to the button in the preview. Now, the button is wide enough to show all of the text. It is also moved to the top of the body, leaving more room for adjustments you make to the rest of the content.

   

7. On the ribbon, click the Save button.

   

   Note:

   Making size and position changes to a widget for small-screen devices does not change the settings for other screen sizes. If you click the Edit your page for large screen devices button, you'll see that no changes have been made to that layout. An exception is if you delete a widget entirely. Deleting a widget in one view deletes it for all views, so be careful not to delete anything you want to keep.

   Next, you'll fix the five cards, which are squished on the small screen. Although you can try to move and resize them like the Current Conditions button, they're too bulky to all fit on the screen in their current state.

   You'll move the cards to the pending list. The pending list is a way to hide a widget in one screen size without deleting it from other screen sizes. It's a good idea to use the pending list if you want different widgets in different device modes or if you want to change widget settings other than size or position.

8. Click the Visitor Guides card (the leftmost card). On the widget toolbar, click the Move to the pending list button.

   

   The widget disappears from the view, but is not deleted from the app and still appears on other screen sizes. (If you had deleted the widget, it would have also been deleted from other screen sizes.)

   Note:

   To view the pending list, on the Insert widget pane, click the Pending tab. You can re-add widgets from the pending list at any time.

9. Move the other four cards to the pending list.

   Now that you've freed up space, you'll add buttons to replace the cards you moved to the pending list. The Current Conditions button doesn't take up much space and is readable on mobile, so you'll copy its style.

10. Click the Current Conditions button. On the toolbar, click the Duplicate button.

    

    A copy of the button named Current Conditions 2 appears. You'll rename it and change its text.

11. In the Current Conditions 2 pane, click the pane title and type Visitor Guide. For Text, replace the text with Visitor Guide.

    

    To differentiate this button from the Current Conditions button, you'll change its appearance. The Quick style window that appeared when you duplicated the button provides some default style options, but you can make more specific changes in the Advanced section of the button's pane.

12. In the Visitor Guide pane, under Background, click the Fill color swatch.

    

    You'll change the color to a shade of brown used in the National Park Service style guide.

13. In the color picker, click More. For HEX, type #6f4930.

    

    Next, you'll set the button's link so that it goes to the appropriate page of the app.

14. In the Visitor Guide pane, click Set link.

    

15. In the Set link pane, for Link to, choose Page. For Select a page, choose Visitor Guide.

    

16. Click OK. On the app preview, close the Quick style window and drag the Visitor Guide button to center it about 25 percent under the Current Conditions button.

    Tip:

    The blue guides that appear on screen when you move the button show the button's distance from other elements. The red guides show the button's alignment with other elements.

    

17. Duplicate the Visitor Guide button four times. Edit the name, text, and link of each duplicated button in the following ways:
    • For the first button, edit the name and text to Park History and set the link to the Park History page.
    • For the second button, edit the name and text to Trail Information and set the link to the Trail Information page.
    • For the third button, edit the name and text to Biodiversity and set the link to the Hemlock Forests page.
    • For the fourth button, edit the name and text to Visitor Survey and set the link to the Visitor Satisfaction Survey page.
18. On the app preview, drag each button so that it is centered at a distance of 5 percent under the previous button.

    

    These buttons are clear and readable even on small screens and have all the same navigation options as the cards from the original desktop app.

19. Save the app.

Edit the header

Now that you've finished editing the body, you'll edit the header. The header contains three widgets: one for the title, one for the logo, and one with the links to all the app pages. Currently, the widgets are cut off and overlapping each other.

1. For the header, click Custom. For Are you sure you want to enable it, click OK.
2. On the app preview, point to the header and click Edit header. Click the title (Great Smoky Mountains National Park).

   

   The Hemlock Title pane appears with settings for the title widget. You'll reduce the font size.

   You may remember that you can only change a widget's size and position settings without affecting the widget on other device modes. This means that changing the text size will also change it in the desktop app, where the text doesn't need to be resized.

   To avoid this problem, you'll duplicate the title and move the original title to the pending list. Then, you'll change the text size of the duplicated title to make the title an appropriate size for mobile without changing it on other devices.

3. In the app preview, on the title's widget toolbar, click the Duplicate button.

   The duplicated title is selected by default.

4. Select the original title again. On the widget toolbar, click the Move to the pending list button.
5. Select the duplicated title. In the Hemlock Title 2 pane, under Text format, change the text size to 16 px.

   

   The duplicated title is not aligned to the center of the header, so you'll adjust its style settings.

6. In the Hemlock Title 2 pane, click the Style tab. For Width, type 225 px.

   

7. Click the Horizontal center button. Click the Snap to top button and choose Vertical center.

   

   The title is centered on the header, but it's still overlapped by the other widgets, making it unreadable. Next, you'll shrink the logo. It's difficult to click the logo on the app preview because of the overlap, so you'll open a list of all widgets on the page to change its settings.

8. On the left toolbar, click the Page button.

   

   A list of all widgets in the app appears, sorted by page. By default, the Home page is displayed.

9. Under Outline, under Header, choose Logo.

   

   The logo is selected on the app preview and its setting pane appears. You only want to resize it and change its position.

10. On the app preview, drag the corner of the logo to resize it to a width of about 62 px. Reposition the logo to the left of the title.

    Tip:

    You can resize and reposition the logo—or any other widget—either by using the size and position tools in the widget's pane or by resizing and repositioning the widget on the preview. Use whichever method you prefer.

    

    Next, you'll change the menu of links to other pages. Because of the buttons you created in the body, it's not necessary to display all the links on the header, too. You'll replace the current menu with an icon that is tailored for small screen sizes.

11. In the Page pane, under Outline, click Menu.

    

12. In the app preview, on the widget toolbar, click Duplicate. Move the original menu to the pending list and reselect the duplicated menu.
13. In the Menu 2 pane, on the Content tab, for Type, choose Icon.

    

14. Click the Style tab. Change Width to 30 px and reposition the icon to the right of the title.

    

    After the changes, the header is a little too tall. You'll reduce its height for small-screen devices.

15. In the Page pane, click Home.

    

    The Home pane appears with options for the home page.

16. In the Home pane, under Header, change Height to 70 px.

    

    Note:

    Changing the header height may reposition some of the elements in the header. If necessary, feel free to reposition them.

17. Save the app. Optionally, on the ribbon, click Live view to view and test your finished app home page.

    

In this tutorial, you edited a web app's layout to ensure that it is optimized for mobile devices. You moved and resized widgets and used the pending list to provide different settings on different screen sizes.

This tutorial only covered making changes to a single page. If you want more practice changing app pages for mobile devices, the Great Smoky Mountains National Park app has six other pages you can experiment with. To see how the app creators altered each page, you can view the completed template on your own mobile device.

You can find more tutorials on the ArcGIS Experience Builder resources page.

Acknowledgements

• The Great Smoky Mountains National Park app template was created by Mariah Abney, Mary Grace Gaskin, and Katie Walker of Esri. The template has been modified for this tutorial.
• The historical image of horses is from the Great Smoky Mountains National Park archives. No claim is made to original United States government works.
• The image of fall leaves is by USA-Reiseblogger and shared on Wikimedia Commons under CC BY-SA 4.0.
• The image of the hemlock forest is by Nicholas A. Tonelli and shared on Wikimedia Commons under CC BY 2.0.
• The image of Great Smoky Mountains National Park is by Mark Leckington and shared on Wikimedia Commons under CC BY 3.0.
• All of the spatial data layers used in the app were created by the United States National Park Service and accessed from the Great Smoky Mountains National Park open data portal. No claim is made to original United States government works.