With the growing need for data visualization, dashboards have become a more common tool for explaining data curated from multiple sources.
Several people have also learned how to create their dashboards using different data sources and types. Despite being able to create beautiful and amazing dashboards, one thing that matters the most of being able to cater to the end-users.
Statistics from google review that at least 30% of the internet browsers use desktop and the remaining are shared between tablet devices and smartphone devices with smartphones having the greater portion. At least my websites also prove these stats to be correct and authentic.
With this in mind, most developers build dashboards and even websites with only the desktop view and users in mind. Which is a bad thing of course, because much of your viewership is not catered for and they have to figure out how to view your dashboard.
Take the mobile view of the Coronavirus dashboard for Zimbabwe below;
Already this user has no proper means to view the information and data being represented here. They have to tilt their device to at least have a view of some of the parts. More technically skilled users will then switch to desktop view, but not everyone knows how to do that or if it even exists.
The same dashboard, on desktop view now;
Here now, you can see how the display can be perfect and easy to use for the desktop user. But remember, that is just 30% or less of the internet users.
In this article, I will take you through the process of how you can make mobile responsive dashboards that can easily adapt to the device currently being used for viewing the dashboard.
Building the Mobile Responsive Dashboard
In this tutorial, I will assume that you;
- already have a dashboard published with ArcGIS Online
- a working ArcGIS Online that has dashboard creation capabilities
- and the time to learn a new skill 😜
Let's begin building.
Launch ArcGIS Experience Builder.
To create this mobile responsive Dashboard, all we need is the Experience Builder tool found in our ArcGIS Online account.
In your organization account, under the Content section, click on the Create App button and follow the drop as below to find the Experience builder option.
One thing about Experience Builder is that it allows you to organize your content and get to view how the content will be displayed to an audience with different device types.
Select A Template
After clicking, Experience Builder will open another separate tab and begin loading.
Click on the Create New button.
Select the Blank fullscreen template by clicking on the create button.
ArcGIS Experience builder will open and this is where the magic happens.
Adding the Dashboards
Already assuming that you have your dashboards ready, all we need to do is drag and drop the Embed Widget onto our blank screen. You can find this widget to your left of the screen.
After you have dragged the widget, an option will appear on your right side of the screen asking if you want to embed by URL or by Code.
In this case, we already have our dashboards ready so we simply go and copy the URL of our first dashboard which is the Desktop version.
Once you insert a URL you should be able to see a preview of how the display would look like to the end-user of your application.
You can toggle between the Desktop, Tablet, and Mobile mode using the icons above your workspace.
Use the mobile mode since we want the contents to be visible for everyone no matter their device.
Build while in Mobile view.
- always make sure the display is 100% x 100% (width:100 and height:100). You can edit this in the style section to your left.
- move the selected widget to the pending list.
- At the top of your inserted widget they are options on locking, moving, and deleting among others. Select Move to Pending List.
Your page will become blank again. That's alright. Do not worry. You have just completed the first step.
Repeat Step With the Mobile Responsive Dashboard
So in the previous steps, we added the URL for the Desktop view, and this time we want to add the Mobile version of our Dashboard.
Make sure you create a Dashboard that responds well to mobile and one of the best ways to do this is to use the Inspect tool with Chrome Browser.
Check out the mobile view of the dashboard.
I have changed the colors for the tutorial so you clearly see howrks.
See how the different data compartments have been stacked to each other to cater for a mobile friendly view?
mobile-friendly the steps above now we are heading towards the fifth and final step.
Saving & Publishing
Always remember that when working online save your work frequently to avoid loss of all the hard time you spend creating new things.
If you hadn’t renamed your application now is the perfect time to do so.
Save and click publish.
Your application should be published now and click on Live Preview to view your work the same way the target audience would view it too.
Don’t forget to try the inspect tool. Simply right-click or on some devices
Ctrl + Shift + C can do the trick.
Check out the version that was used to prepare this tutorial here. Try using the link on different devices and see how the application responds and gives you the dashboard that is most suitable with the device you are using.
That's it. Guess what?
Head over to the Contact Page to get my details and we can discuss.