(617) 433-7483 Servicing Boston & Surrounding Areas

Forms in Responsive Web Design

February 1, 2013

Forms in Responsive Web Design

Posted by with - in Web Design

Forms help the user to interact with the site administrator. It is impossible to organize the online store, blog, news portal, or any other interactive site without form. Today let’s have a look at the main problems of using forms to create an adaptive design and consider ways to solutions.

Let’s start with the requirements that must be followed in order to get adaptive forms:

  • The user must be able to quickly and easily select any element of the form
  • All captions and text should be easy to read on mobile devices
  • If necessary, the form must change its appearance
  • Form for mobile devices must include all the elements as the version for the PC except <input type=”file” />, because the file download may not be available on some mobile operating systems.

Problem number 1:
This form, probably does not even need further optimization, since the width of the form will not exceed 500-600 pixels. On a smartphone, however, the right side will not be visible and an additional horizontal scrolling will appear.

The solution:
All you need to do is to place

Problem number 2:
This type of forms is generally used for online shopping, the creators of which saved space in the header for other elements. This form certainly does not fit the screen of smartphones.

The solution:
As in the previous example, we need to put

Problem number 3:
Registration forms, which need to be filled with contacts and / or billing information, are very popular in various websites. In order to fill this form while on your mobile device, you have to scroll through or turn pages frequently.

The solution:
It is recommended to place all elements vertically in order. Users will scroll down in any way, and so it will be easier to work with the elements.

Comments are closed.