Responsive Web Design in map.apps

Responsive design has become a more and more trending topic. It describes an approach to create websites and web-applications that adapt their layout to the given limitations of the requesting display devices. Before diving into technical details, try it yourself. Run the demo app on a desktop PC, tablet and/or mobile phone to see how the device will affect the layout of map.apps. You can also modify the width of your browser to see the layout changes. This article is not about app-templates but about templates that define the rough arrangement of map.apps components within the application. Within a template, it is possible to define a footer or header section above/ below the map, for example, whereas colors, font properties etc. for these sections are defined within a map.apps theme. Since map.apps 2.1 it is possible to divide a template into several layouts. This gives you the possibility to create one single app with several layouts that can be delivered dependent on the user’s device, screen size or other so-called "Screen Rules". As the template system is dynamic, meaning Screen Rules are checked during the whole runtime of map.apps, it is also possible to react on events like screen rotation. As a screen designer you can use the two different orientations to provide different functionality with each orientation (portrait or landscape). This helps to deal with limited space on smaller screen sizes like mobile devices. So how can we create a responsive template for our app? If we look at the file structure of a “responsive” template, we can see that it is similar to a normal template: The only difference here is that we have more than one HTML file, one for each layout in our template. In this example there is a file big.html for big screens, for example the screen of a desktop computer, a medium.html file for medium sized screens, like a tablet computer and a small.html file for small screens like those of smartphones. To tell the browser when to use which template, we define Screen Rules in the JavaScript file in the root folder of the template (responsive.js). The file looks like this:

define([
  "dojo/text!./small.html",
  "dojo/text!./medium.html",
  "dojo/text!./big.html",
  "dojo/i18n!./nls/bundle"],
  function(small,medium,big,i18n) {
    return {
      layouts:[{
        maxWidth : 300,
        templateString: small
      },{
        maxWidth : 1024,
        templateString: medium
      },{
        templateString: big
      }],
      i18n : [i18n]
    };
  }
);

Here we can see that the template has three different Screen Rules. The first one applies to screens with a width of at most 300 pixels and the second rule for screens at most 1024 pixels wide. The third one is applied if all other rules don’t match. Each Screen Rule consists of one or more Screen Rule properties and finally the templateString property, that contains the HTML code for the according layout. The evaluation algorithm for the Screen Rules is pretty easy: For each ScreenRule { If all properties of this ScreenRule match { Use templateString of this ScreenRule as layout; Break; } } If a Screen Rule contains no Screen Rule properties at all, this rule always matches. You can leverage this behavior to define a default Screen Rule that matches when all other Screen Rules don’t. In the above example the Screen Rule for the “big” layout is the default Screen Rule. Available Screen Rule properties are minWidth, maxWidth, minHeight, maxHeight, orientation, requiredExecutionEnvironment, and excludedExecutionEnvironment. These properties are described in more detail in the templates bundle documentation (available for registered users). So if you want to define a layout for iPhone you can create a Screen Rule like this: { requiredExecutionEnvironment: “iPhone”, templateString: iPhone } A Screen Rule matching on Internet Explorer 9 and above and Firefox 4 and above would look like this: { requiredExecutionEnvironment: [“IE:[9,]”, “FF:[4,]”], templateString: ieLayout }

Which bundles on which device?

There are some bundles that are not usable on touch screens or are not feasible for small smartphone displays. For instance, the StreetView™ and the Magnifier bundles can only be used with a mouse, not on a touch screen. MapFlow is designed for desktop screens and is also not suitable for small smartphone display. So if you design layouts for tablet computers or smartphones you should not use these bundles. Other bundles, although they still work, are not very meaningful when used on small screens. For example the overview map might take up too much space on a smartphone if displayed together with the main map. Bundles for printing are also of limited use on smartphones and tablets. Using responsive templates you can control which bundles should be displayed on a certain kind of device or on displays with certain screen sizes. Simply add or remove the corresponding data-dojo-attach-point from the layout. Note that it is not officially supported to configure whether a bundle is started or not by using Screen Rules. This should be specified by the bundle developer in the manifest.json file of the bundle.