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:
- Create a new survey, or open an existing survey
- Go to the Tools menu and select Change Render Style
- There are two options: Classic and Responsive. Select Responsive.
- Click Done.
Viewing and Editing Rendering Styles
To view and edit the rendering styles associated to a responsive survey:
- Within the Illume survey editor, go to the Survey menu and select Style
- If you scroll down on the left pane, you will see the style tree for “Survey”, and eventually for Tablet and Mobile
- 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.
- 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.
- 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.
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:
- 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.