2022.1

Table Of Contents
panning, and scrolling across a wide range of devices". (Source: Wikipedia.).
With the COTG app for Android or iOS, COTG forms can be viewed on a wide variety of mobile
devices, with different screen sizes. A responsive design will adapt to the size and orientation
of the screen, to avoid navigation tasks like zooming in or out and scrolling horizontally. The
layout may change to optimize the user experience on that device: information that is shown
side by side on a larger tablet may be stacked when viewed on a smaller device.
It is complicated and time consuming to create a responsive design all by yourself. Therefore it
is advisable to start creating a COTG form with a COTG Template Wizard (see "Capture
OnTheGo template wizards" on the facing page). All Web and COTG Template Wizards in
Connect Designer make use of the Zurb Foundation front-end framework to make the templates
responsive (see "Using Foundation" on page617 and
http://foundation.zurb.com/learn/about.html).
Tip
In the Designer, you can test the responsiveness of a form using the Responsive
Design button at the top right of the workspace.
Some browsers also let you test the responsiveness of a form. In Firefox, for example,
select Developer > Responsive Design to view a form in different sizes.
Usability
Usability defines the ease of use of a form. Is the layout intuitive? Are the form elements easy to
tap on a mobile device? A visually consistent design allows the user to follow the flow while
filling out the form. Below are some key usability aspects to keep in mind when designing
forms.
Provide clear labels. Many modern web sites show labels inside the actual form inputs while
they are empty. This saves space on the form, but once the user has entered data the label is
no longer visible. Show a label at all times to help the user review his input.
Use font sizes that are big enough. On paper, smaller fonts are easier to read than on a web
form. Of course, on a touch screen you can zoom in and out, but a user-friendly form doesn't
force the user to do that.
Page 611