Often, mobile ArcGIS web applications are accessed from a variety of mobile devices: smartphones, phablets, and tablets. Using responsive design, a mobile web application can be built that looks good and performs well across all mobile devices. Again, by taking a hands-on and step-by-step approach, we will build a simple ArcGIS mobile responsive application.
In this chapter, we will cover the following topics:
- Approaches to cross-device support
- The magic of style sheets
- Responsive design using Bootstrap
- Application testing
In Chapter 2, Understanding Mobile Frameworks and APIs, we made a brief mention of responsive design. This is an approach to web application development that provides true cross-device capabilities, allowing your mobile app to look good and be user-friendly on all mobile devices. Bootstrap, which is the focus of this chapter, is the most popular responsive framework. The following screenshot illustrates ArcGIS web applications provide true cross-device capabilities:
Cross-device ArcGIS web applications
Layouts built with Bootstrap adapt to different screen sizes, screen resolution/pixel density and changes in device orientation. As mentioned in Chapter 2, Understanding Mobile Frameworks and APIs, Bootstrap uses a fluid grid system that is based on percentages. The default grid system has 12 columns or a 940 pixel-wide container, as shown in the following screenshot:
Default fluid grid system
Think of the grid as a page that is broken up into a series of columns. On a larger 10-inch tablet, 3 columns might be visible whereas the same page might show just 2 columns on a 6-inch phablet and, on a smartphone, it might show just a single column. As a device's screen size gets smaller, the screen content is stacked more. The following screenshot shows how the same page appears on a tablet and a smartphone. In this case, horizontal menu items on the tablet are stacked vertically on the smartphone:
Responsive views
There are other ways to provide cross-device support in web applications. In addition to responsive design, progressive enhancement is another popular approach. We have already discussed jQuery Mobile in Chapter 2, Understanding Mobile Frameworks and APIs. This framework offers both responsive and progressive enhancement. Progressive enhancement is characterized by the following:
The following screenshot shows a site built using progressive enhancement:
Progressive enhancement
Responsive and progressive enhancement differ in their delivery of responsive/adaptive structures. Responsive enhancement relies on flexible and fluid grids, whereas progressive enhancement relies on predefined screen sizes. Progressiveness takes a layered approach that utilizes scripting and CSS to assist in adapting to various devices and screen sizes.