With so many new mobile phones, tablets and other devices coming out every day, designers have to be prepared to make common functions easy to do on these devices. The usual approach to this is responsive design.
The usability of web forms is by no means a new topic. It has been covered in general usability references. Forms are one of the most common elements on the Web, without them the conversation is only going one way. Forms are used for purchasing, contact, and so much more. It’s vital that the forms you produce are equally functional across the full range of devices, from smart phones to desktops. Mastering the art of making these types of functionalities small yet user friendly can be a task.
This blog is try to provide guidelines for designers in laying out Bootstrap responsive forms and includes how to work with the Bootstrap grid system, setting appropriate field width, and web vs. mobile considerations.
1.Bootstrap Grid System
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.
The Bootstrap grid system work across multiple devices with a handy table.
Breakpoints & Input Width Definition
1.Bootstrap user interfaces adapt layouts for the following breakpoint widths: 768px, 992px, 1200px.
2. We can find the definition of input width in Bootstrap v2，but it has been replaced by the grid system introduced in Bootstrap V3. The definition could help us understand the input width how long the length is large.
2. Responsive Forms Examples
Example 1: Red Hat Login
Screen width > 1200px container=1170px form-width: col-md-5
1200px > Screen width > 992px container=970px form-width: col-md-5
992px > Screen width > 768px container=750px form-width=100%
Example 2: PatternFly Login
Screen width > 768px The form used classes (col-sm-7 / col-md-6 / col-lg-5) to control the width.
Screen width < 768px Form width: 100%
Example 3: Openshift Login
Screen width > 768px The form used classes (medium-11 large-9) to control the width.
Screen width < 768px Form width: 100%
Example 4: PatternFly Modal
Screen width > 768px The modal box width is 598px The field width is col-sm-9
Screen width < 768px The modal box width is auto The field width is 100%
Example5: Theme Foundry
The form width is fixed 258px and the webpage background is responsive.
Screen width < 400px The background hide and form width to 100%;
Example6: Kingshill Cars
3.Guidelines for Responsive Form Layout
1.With the help of Bootstrap Grid System, select the appropriate length of web forms for different device. For form fields with a variable input length but within a standard average, you should find a good default you can use for all form fields of this type. The same width of the field will looks very unified in visual.
In most usage scenarios, the form field length will not more than 530px (input-xxlarge). For different screen size, we could select the field width below. The bootstrap grid defines the xsmall screen size , so the field width will be 100% usually when the screen size less than 768px. The least field length should be over the content input width.
2. Pay more attention to form fields with fixed input length could reduce the enter mistake. Form fields with a fixed input length such as bank card number or ID card, you could adjust the width of the field to exactly match the known input length regardless of the other fields on the page.
3. If the label width is long, present the labels on the top of the input field will be better on small devices.
4. Visual flow from top to bottom will be easier to read. The form column more than 2 columns will be harder to read. Some user confuse to enter the text from top to bottom or from left to right.
5. Put the related information in one line always. Such as Day / Month / Year、 Card number and it’s contract life…
Welcome other approaches that I have not covered here and you can expect to see these guidelines on the PatternFly site in the near future.