Adapting to mobile devices

Problem

You want to display questionnaires differently on (small) mobile devices.

Solution

Use conditionnally recalled values in # STYLESHEET and # TEMPLATE, and turn on # ACTIVATE THE MOBILE MODE.

Discussion

Mobile devices are smart phones and tablets which can display questionnaire pages but offer much less screen space than typical computer displays. Displaying a questionnaire in a readable form on these devices requires formatting for the screen size and, sometimes, modifying the flow of the questionnaire.

The key ingredients are:

  • the use of a conditional # STYLESHEET:
    this pound instruction specifies the stylesheet file that will be used to format the pages. A stylesheet can be devised with larger fonts (for example) for mobile devices. Then a conditional # STYLESHEET instruction can be built, for example:
    # STYLESHEET = &#GETSTYLESHEET
    # RECALL GETSTYLESHEET = [MOBILE().EQ.0]mainstyles.css[ELSE]stylesformobiles.css
  • the possible use of a conditional # TEMPLATE:
    more involved but with more control, the # TEMPLATE instruction defines the entire page format. Like the # STYLESHEET instruction, it can use a conditional recall to specify a different # TEMPLATE for mobile devices
  • the possible use of # ACTIVATE THE MOBILE MODE:
    # ACTIVATE THE MOBILE MODE = yes shows simplified pages to mobile devices: headers and footers are not displayed; # GROUP and # TABLE structures are also ignored such that every question is displayed on a separate page.

Adapting to mobile devices

Problem

You want to display questionnaires differently on (small) mobile devices.

Solution

Use conditionnally recalled values in # STYLESHEET and # TEMPLATE, and turn on # ACTIVATE THE MOBILE MODE.

Discussion

Mobile devices are smart phones and tablets which can display questionnaire pages but offer much less screen space than typical computer displays. Displaying a questionnaire in a readable form on these devices requires formatting for the screen size and, sometimes, modifying the flow of the questionnaire.

The key ingredients are:

  • the use of a conditional # STYLESHEET:
    this pound instruction specifies the stylesheet file that will be used to format the pages. A stylesheet can be devised with larger fonts (for example) for mobile devices. Then a conditional # STYLESHEET instruction can be built, for example:
    # STYLESHEET = &#GETSTYLESHEET
    # RECALL GETSTYLESHEET = [MOBILE().EQ.0]mainstyles.css[ELSE]stylesformobiles.css
  • the possible use of a conditional # TEMPLATE:
    more involved but with more control, the # TEMPLATE instruction defines the entire page format. Like the # STYLESHEET instruction, it can use a conditional recall to specify a different # TEMPLATE for mobile devices
  • the possible use of # ACTIVATE THE MOBILE MODE:
    # ACTIVATE THE MOBILE MODE = yes shows simplified pages to mobile devices: headers and footers are not displayed; # GROUP and # TABLE structures are also ignored such that every question is displayed on a separate page.