Configure Experience Builder Mobile Views: Tips and Tricks

by | Oct 6, 2023

For the success and credibility of your map applications, it is important to provide users with a single URL. This universal URL should take a user to your application and provide them with an ideal layout regardless of their screen’s size. Today’s technology is awesomely aware of the prevalence of small screen sizes. Which also means new technology incorporates mobile responsive design. This is one of the reasons ESRI is moving away from old tech and into new tech, like Experience Builder. A great benefit of this transition is that you can configure Experience Builder mobile views based on many screen sizes. Now you can give your users one beautiful URL that does it all!

What exactly is a Mobile View?

Simply put, a mobile view in Experience Builder is a separate configuration based on a different screen size. Most applications are originally created for a desktop computer screen. The image below displays a desktop view configuration. With over a third of United States internet users preferring to use mobile phones, we need to ensure that our applications will make sense on small screens. This is why mobile responsive design is important.

Experience Builder Desktop View image, before mobile responsive design has been applied.

Experience Builder provides mobile views for five common screen sizes of tablets and five common screen sizes of mobile phones. You can choose which mobile views to focus on for your mobile responsive designs. The below image displays the list of mobile view screen sizes you can design for a single Experience Builder application.

The mobile view screen sizes that are available for configuration in Experience Builder.

The following image displays a tablet mobile view design. When you compare this to the desktop view above, you can see how important mobile responsive design is for a smaller screen size.

Ax example of a configured Experience Builder mobile view.

Tips to help you configure Mobile Responsive Design

You already have a head start when you configure Experience Builder mobile views. This is because some tools, such as the map pop-ups, apply existing transformation rules that help in mobile design. However, there are still things you need to think about and incorporate. Below are some tips to consider when designing your applications.

Make use of Experience Builder Templates

When possible, use Experience Builder templates that are not ‘blank’. Non-blank templates already incorporate transformation rules that consider mobile optimization. But if you are like me, then you will want to customize your application from the ground up so the following tips and tricks will be your bread and butter.

A snippet of the gallery of Experience Builder templates that already have transformation rules applied for mobile responsive design.

Make use of Layout Widgets

When creating your original application layout, using layout widgets such as Rows, Columns, and Sidebars will help streamline your responsive design. This is because ESRI has pre-configured these widgets to include some transformation rules. For example, elements spread horizontally will become vertical.

A Gallery of layout widgets that already have transformation rules applied for mobile responsive design.

Change Widget Content

The size of your text, type of font, and other widget tools will likely need to change for smaller screen sizes. For example, a list widget that needs large text in desktop view will require smaller text in mobile view. Or a map widget that has many tools enabled, such as search, measure, and select, may need to have less tools enabled. In the first image below, you can see a map that has all the tools enabled, which means all the icons for those tools appear in the map view. In the second image, a mobile view of the same map shows a cluttered view due to all the tool icons.

A map widget with all tools enabled.
The mobile view of a map widget with all tools enabled, showing how cluttered the map view becomes on a smaller screen size.

Always use the Pending List

Before you change content and configurations in your widgets, you need to understand the Pending List. The Pending List is the most important concept to learn when you begin to configure Experience Builder Mobile Views. You should never modify the content or configuration of your current widgets. If you alter them in a mobile view, they will also change in your original desktop view.

If you want to use a list widget with smaller text, you need to first move the current list element to the pending list and then pull in a brand-new list widget to reconfigure in your mobile view. This process applies to any changes you want to make to any of your original widgets.

Image showing where the pending list icon is located on the widget element menu.

Use a Duplicate Widget with a Different Template

Some widgets, such as List and Bookmark, require you to choose a layout template before you can start to configure them. Some of these templates are better for larger screens while others are perfect for smaller screens. Because of this, you might want to consider using a different template entirely, in addition to any font and text-size alterations. The below image displays three different template styles for the list widget. Depending on your application layout, the template outlined in red may be a better choice for smaller screen sizes.

List template examples showing which templates are best for large screen versus the one that is best to use when configure Experience builder mobile views.

Remove Unnecessary Widgets

Sometimes, the best course of action is to remove a widget entirely. For instance, a subtitle might be a great addition on a large screen but can sometimes clutter a small screen. In addition, there are some widgets, such as basemap selector or search, that are not necessary outside of a map widget, which already includes these options.

Use the Widget Controller

The widget controller allows you to condense multiple other widgets into a confined space. When you add widgets to the controller, they become icons that a user can choose to turn on or off. The example below shows the layer list, filter, and legend within a single controller widget. This is one of the most efficient ways to condense your layouts.

A controller widget showing three widgets condensed inside of it as an example of efficient mobile responsive design.

Preview all available Screen Sizes

Lastly, it will be important that you preview all available screen sizes for both desktop and mobile views. Though daunting, this will help to ensure your application will be useful to any user that opens it, regardless of their screen size.

showing what a preview of a mobile view screen size looks like in the Experience Builder layout.

We hope you find these mobile responsive design tips useful as you build your Experience Builder applications. And if you would like to develop your Experience-Builder skills, click the following links to view more details on our Introduction and Intermediate Experience Builder courses and register for upcoming training events.

To view free tutorial videos on Experience Builder, visit our YouTube channel.


Recent Posts

Kara Utter
Kara has over 10 years of experience in geospatial and data science and is the owner of Dynamic Visions GIS. She excels at systems thinking and has a diverse background, having provided services to all levels of government, wildfire, natural resources, fisheries, and nonprofits. Her capacity to complete GIS needs assessments, improve efficiency, increase public access to information, provide methods of asset tracking, and quickly adapt to a changing environment has resulted in many successful project resolutions and National recognition through ESRI’s Special Achievements in GIS awards.

Sign up for our weekly newsletter
to receive content like this in your email box.