Responsive website design for web mapping applications
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
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.
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.
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.
- 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