2019.2

Tip
If the COTG Form replaces a paper form, it can be tempting to stick to the original layout for the
sake of recognizability. Don't fall into that trap. In the end, the users - customers and employees -
will be happier with a user-friendly form that adapts to different screen sizes and looks like it was
designed for the web.
Most design guidelines for web forms apply to COTG forms as well. Two key concepts are
responsive design and usability.
Responsive design
Responsive Design is "an approach to web design aimed at crafting sites to provide an optimal
viewing and interaction experience - easy reading and navigation with a minimum of resizing,
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 page579). 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 page583 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.
Page 577