The cross-device mapping application dilemma: responsive website, hybrid or native?

The right choice of development approach for any particular project depends on several factors including such things as budget, the intended audience reach, mapping functionality, development staff and skillsets. For today, let’s assume a pragmatic approach with the goal being that of providing the best possible user experience across devices. Below I’ll share some observations and insights regarding how we have addressed these issues for various clients.

Mobile first responsive website

Developing a single application targeting mobile as the primary experience and responsive to tablet and desktop is a compelling option for those simple connected web mapping applications where features and functionality will be the same across devices. One such example is a website we developed for the Colorado Department of Transportation that delivers their scenic byways to all users and allows them to route directions targeted for bicycles. One benefit to this approach is that it targets the widest audience from a single shared codebase.

The following images show the application in a browser across desktop and mobile devices.

Figure 1: Desktop home view

Figure 2: Mobile home

Figure 3: Mobile map view

Unifying the desktop and tablet website experiences

Developing an application so the desktop and tablet experiences share the same codebase works great given a limited budget and an all-purpose connected mapping application. Tweaks to disable or hide features can be made to enhance the tablet experience using CSS media queries. Furthermore, changes can be made through JavaScript to redirect the flow to one that makes sense for a tablet. For example, some analysis tools require too complex of a workflow to be performed on a tablet and can simply be hidden along with informing the user that the full suite of tools are available from a desktop browser.

On a recent job we completed for the Ohio Department of Transportation we followed this approach with much success. The application was intended for connected office and field personnel, as well as the general public. It provided analysis tools and read-only access to data.

The following images show a full-feature map viewer in a browser across desktop and tablet devices.

Figure 5: Desktop Identify tool view

Figure 6: Tablet Identify tool view

Mobile website experience

The smaller form factors of mobile devices typically dictate the need for simplified workflows and/or functionalities as compared to desktop and even tablets. This may come in the form of reduced features or separate tools targeting mobile devices. Both strategies were employed while developing the responsive mobile experience for the application discussed above. It’s important to note that the development effort to support mobile devices came after the desktop/tablet site had been developed. This allowed us to leverage the existing client framework reducing the amount of new code and time to deliver.

Our framework was designed to access the underlying mapping API through an abstraction layer. This made it possible for us to quickly swap out the ArcGIS API for JavaScript in favor of Esri Leaflet, a lightweight API that offers far better performance on mobile devices.

The following images show the mobile map viewer and illustrate some of the layout changes to support enhanced workflows for mobile.

Figure 7: Mobile Identify tool

Figure 8: Mobile Identify tool data table

Hybrid and native applications

Consider hybrid and native applications whether it’s a desire to have a presence in one or more app stores, direct access to mobile hardware or sensors or disconnected workflows.

The hybrid approach using PhoneGap/Cordova enables organizations to leverage existing HTML and JavaScript expertise and maintain a single codebase to run on any mobile device. Where the hybrid approach gets tricky is with disconnected workflows. Esri has shared a set of libraries, offline-editor-js, that offers limited support and workflows for offline web mapping applications. However, be aware that they don’t officially support the PhoneGap/Cordova platforms. After careful review of all the caveats that come with these libraries, this may still be a viable option for small focused application workflows.

Esri fully supports offline workflows with their native ArcGIS Runtime SDKs. These SDKs are available today if targeting a single device platform. By years end Esri is supposed to release their first public beta of the ArcGIS Runtime SDK for Xamarin. This will be a compelling API for cross-platform development using .NET.

Further considerations

In the last year Esri has released AppStudio for ArcGIS (currently in beta) and Web AppBuilder for ArcGIS. Neither solution requires developer skills. Rather, users can leverage existing application templates and configurations. AppStudio for ArcGIS enables a cross-platform deployment strategy using ArcGIS Runtime SDK 10.2.5 for Qt. The Web AppBuilder for ArcGIS leverages HTML and JavaScript that can be run across devices via a web browser.

Esri resources

• ArcGIS API for JavaScript – large full-featured API
• Esri Leaflet – lightweight and far out performs the ArcGIS API for JavaScript on mobile devices
• ArcGIS Runtime SDKs
• ArcGIS Runtime SDK for Xamarin – .NET Public beta to be release Q4 2015
• AppStudio for ArcGIS – no coding required, cross-platform native applications
• Web AppBuilder for ArcGIS – no coding required, web applications