2021.1

on how users enter information on a mobile device and how they expect the form to look and
behave.
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573). 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577 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 571