Posted by & filed under Forms.

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.

Grid 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.

One Response to “Responsive Form Layout Guidelines – Conceptual”

  1. Suzanne Hillman

    Nice post! Responsive Bootstrap can be quite confusing, so well done explaining things.

    However, I’m not completely sure what you are saying with your last point: “5. Put the related information in one line always.”

    Are you saying that you need to have the card number and expiry date on a single line because they are related? If so, why are the zip code and CVC also on a single line? They don’t seem related. I’m not sure what guideline you are trying to establish, in this case. :)

    Reply

Leave a Reply

(will not be published)