UNICOM Intelligence layout and question template best practices
 
UNICOM Intelligence layout and question template best practices
Introduction
This paper discusses best practices attained by analyzing, troubleshooting, and building numerous layout and question templates. The expected audience should already have an intermediate knowledge of XML, XSL, HTML, JavaScript, CSS, and UNICOM Intelligence template tags.
General considerations
Graceful graduation
Start by thinking about how the page will look on legacy web browsers with JavaScript turned off, images turned off, low resolution, low bandwidth, and no CSS support. Thinking about these factors will help ensure that each component is usable on a wider array of devices, networks, and user abilities and disabilities. Ensure the questions and user instructions for providing responses are clear in the HTML, without using any of the tools listed above, and then begin adding features.
1 You can build your own template if you find that the HTML delivered by the HTML player is too cluttered.
Advantage: You have more control over the HTML that makes it to the browser.
Disadvantage: XSL templates are only usable in layout templates. This means that question templates will need to be customized for the HTML that your XSL template produces.
2 Flat HTML is already responsive; it wraps and realigns to fit within the browser window. For older mobile browsers, a flat rendering of the default input controls and text is preferable to a beautifully colored but unusable or unreadable page.
3 Use responsive design techniques to add layout or behavioral features that will improve the user experience while keeping the content in conformity to the respondent’s devices.
Responsive design targets
Responsive design is a technique that replaces mobile-specific sub-sites. As Web TV grows in popularity, responsive design techniques must be in place to handle large screen resolutions in addition to the very small ones it already handles. As such, the UNICOM Intelligence strategy for any device must begin with responsive design techniques. The following device widths are specifically targeted:
Device
Width
Handheld
< 320px
Tablet and Netbook
320px - 800px
Laptop and Desktop
800px - 1280px
Television
> 1280px
You will notice that height measurements are not targeted, as users already expect to scroll pages vertically. Horizontal scrolling is only acceptable for widgets on a page. You will also notice that the targeting device width and height are not targeted. This provides greater flexibility in delivering optimized experiences to devices that have re-sizable browser windows (such as laptops and desktops).
Relative units of measure
Relative units of measure should be used as much as possible to ensure accessibility and flexibility.
EMS and percentages should be the standard.
Font-size should be set via percentage.
Padding and margin should use em (.2em ~ 5px at font-size set to 16px, the default text size for most browsers).
Border must use pixels and should be used sparingly. Whitespace can be used to make the interfaces less cluttered and confusing.
Width and Height should rely on percentages as much as possible, then EMS (the number of characters across an item), and finally pixels when an absolute size is required.
Images should be relatively sized; width and height should be set in percentage (which takes the parent element’s size into account).
Layout templates
There should be no fixed width templates, all UNICOM Intelligence templates should be fluid to allow for adaptation to any window size.
CSS style
In order to ensure the content can resize in relation to the browser window size, the very first few lines of default CSS should be:
body, html {height:100%;width:100%;margin:0;padding:0;}
html {overflow:hidden}
body{overflow: }
Note Set the overflow for body to either hidden (if another element will hold scrollable content) or auto to make the body scroll only when required.
Some browsers show a disabled scroll bar by default. Setting the HTML overflow to hidden resolves this issue.
Margin and padding increase the size of an element that has a specified height and width. For example, when the body element is 100% and is left with the browser default for padding and/or margin, the body is 100% + 10px wide. This causes the horizontal scroll bars to appear where they are not intended and ruin the layout.
All body elements need to size and flow proportionally to the viewport (browser window). Setting HTML and body elements to 100% height and width will set the reference point for all children to be related to the viewport.
Prevent zooming
Some mobile devices try to make web browsing more consistent with desktop browsers by zooming the web pages. This effectively shrinks content to fit within the width of the browser window. This is now ideal given that the goal is to create content that is optimized for small windows. The following meta tag in the document head will prevent zooming:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
Use media queries and fake them for Internet Explorer
Ignore the media query JavaScript implementation for Internet Explorer and other legacy browsers. Having a good default layout will take care of respondents using Internet Explorer. However, users will not be able to test their responsive layouts in the Internet Explorer dependant applications unless media queries are faked with JavaScript.
A better JavaScript solution can be found in the responsive DefaultLayout.htm layout template. The template is installed with the UNICOM Intelligence Developer Documentation Library at:
[INSTALL_FOLDER]\IBM\SPSS\DataCollection\7\DDL\Scripts\Interview
The file of interest is in the supporting files folder, the default.js file:
[INSTALL_FOLDER]\IBM\SPSS\DataCollection\7\DDL\Scripts\Interview\Templates\DefaultLayout.htm_Files\default.js
This solution looks for the existing media query links in the DefaultLayout.htm head element, and builds a JavaScript object that can be used to detach and reattach CSS styles based on the current size of the browser window. This solution reduces the number of files that have to contain identical styling information.
Question templates
Simplify the question template
Simplifying the question template involves separating the content from the behavior and layout. Rather than using inline script, wrap the desired mrData tags in an element with a class name that corresponds with the question control you are building. Create a supporting files folder and include a JavaScript file that will handle both generating the controls as well as placing them within the page. The best way to do this is to have the JavaScript look for every instance of your control class name, create a new control, and place it in relation to the element. When you reference the js file in the questionTemplate.htm, include the "defer" attribute (defer="defer") and place the reference in the head (set the position attribute to "head").
<mrSubTemplate>
<mrRef RefType="script" RefPosition="head" type="text/javascript" src="ClickToRank.htm_files/clickToRank.js" defer="defer">// Script</mrRef>

<mrRef RefType="link" RefPosition="head" type="text/css" rel="stylesheet" href="ClickToRank.htm_files/ClickToRank.css"/>

<div class="clickToRank">
  <mrData QuestionElement="Banner" />
  <mrData QuestionElement="Error" />
  <mrData QuestionElement="Label" />
  <mrData QuestionElement="Controls"/>
</div>
</mrSubTemplate>
Alternately, by using common best practices and setting the position at "bottom", you will not need to include the defer attribute.
<mrSubTemplate>
<mrRef RefType="script" RefPosition="bottom" type="text/javascript" src="ClickToRank.htm_files/clickToRank.js">//Script</mrRef>

<mrRef RefType="link" RefPosition="head" type="text/css" rel="stylesheet" href="ClickToRank.htm_files/ClickToRank.css"/>

<div class="clickToRank">
  <mrData QuestionElement="Banner" />
  <mrData QuestionElement="Error" />
  <mrData QuestionElement="Label" />
  <mrData QuestionElement="Controls"/>
</div>
</mrSubTemplate>
This ensures that the js file is only referenced once, and forces the file to run after all the HTML elements have been added to the DOM. This helps by:
Improving download speeds as less text is included in the body of the HTML page generated and sent to the browser.
Placing your JavaScript in an external file that can be downloaded simultaneously and cached by the user’s browser, thus ensuring better performance on subsequent pages (as well as the current page).
Ensures uniqueness of each control on the page if multiple questions are displayed and using the same control.
If you need to reference a resource from the imageCache, you can add an Id to the reference to the js file, then from inside the js file, you can do a document.getElementById call for that Id, and parse the name of the file and directory out of the "src" attribute. UNICOM Intelligence provides the infrastructure to directly update and obtain the image cache URL (instead of requiring string parsing).
Use self-calling, self-enclosed functions
Avoid global variables because there is no way to ensure non-conflict, especially if there are multiple script files running on a page. Instead of writing something like the following in a js file:
var myThing = new Object();
Wrap the object as:
(function() {
         var myThing = new Object();
})();
See
White papers: Introduction