Change Rendering Style

The Responsive Design feature gives users the ability to create surveys that will render appropriately whether the participant uses a desktop computer, tablet, or mobile device.   This feature detects the size of the browser window of the participant, and based on that size automatically adjusts the display and controls within the survey to be most functional for that browser size.  If the browser detected by Illume is fewer than 992 pixels in size, Illume determines that device to be a tablet.  If the display is fewer than 768 pixels in size, Illume determines that device to be mobile (these pixel determinations are based on industry standards).

Once Illume determines the pixel size, it automatically adjusts the Cascading Style Sheet that controls the display of the web page that is the survey.  Users have the ability to view and edit the style settings associated to each rendering type.

 

Implementing Responsive Design

To implement responsive design in an Illume Survey:

  1. Create a new survey, or open an existing survey
  2. Go to the Tools menu and select Change Render Style
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Change Rendering Style-Implementing Responsive Design 1
  3. There are two options: Classic and Responsive. Select Responsive.
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Change Rendering Style-Implementing Responsive Design 2
  4. Click Done.

 

Viewing and Editing Rendering Styles

To view and edit the rendering styles associated to a responsive survey:

  1. Within the Illume survey editor, go to the Survey menu and select Style
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Change Rendering Style-Viewing and Editing Rendering Styles 1
  2. If you scroll down on the left pane, you will see the style tree for “Survey”, and eventually for Tablet and Mobile
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Change Rendering Style-Viewing and Editing Rendering Styles 2
  3. The style tree Survey is the default style. This style is utilized if the survey does not determine that the browser size requires Tablet or Mobile display.
  4. The style trees for each of the three styles, Survey, Tablet, and Mobile, provide access to altering the same survey style components. When Responsive rendering style is selected, you will see that the style settings vary across the 3 modes, with things like font size and control size varying across the modes.
  5. To edit the rendering style associated to a rendering mode, expand the tree for Survey, Tablet, or Mobile, find the component on the left pane that you wish to alter, and edit on the right pane by clicking in the rectangle next to the setting. For example, below the alternating question highlighting color is being edited by clicking on “Alternating” under “Question” within the Mobile tree, and then in the right pane clicking on the box next to Background Color where it currently says “Default”.  This pulls open the Pick Color modal.
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Change Rendering Style-Viewing and Editing Rendering Styles 3

 

Implementing Responsive Design: Implications

There are two main considerations when determining whether a survey built in a prior version should be altered to allow for Responsive design:

  1. When a survey built in a prior version is upgraded, any styles implemented via the Edit/Style editor from the prior version will be lost. These styles will need to be re-implemented in the Style editor.
  2. Custom JavaScript implemented in the survey to facilitate custom validations or other custom solutions will not be functional in Illume Next. Prior version of Illume utilized JavaScript and the Prototype.js library.  Illume Next, in contrast, utilizes the Angular framework and JQuery.  Given this, surveys with high utilization of custom JavaScript should remain in Classic style.  If the style is changed to Responsive, the custom coding will need to be rebuilt utilizing JQuery.