Should form inputs expand to full width on smaller viewports?

Question

When a viewport approaches smaller sizes, my first thought is to linearize and grow each form input, giving each input a full-width. This removes the UI hinting of the larger viewport, but arguably looks better.

Here's an illustration: (intentionally vague to avoid too much detail)

^{download bmml source – Wireframes created with Balsamiq Mockups}

I am curious if anyone has data/articles or experience regarding this design decision. I looked through Luke Wroblewski's site but don't have any other references handy.

Thanks.

Answer 1

From a visual point of view, 2 sizes is OK, different sizes for input fields is very confusing, and the same applies if you expect to input 2 characters and have room for 40. The user will wonder if they need to add something else in most cases, so visual hinting plays a role.

Of course, like Chris commented, you need to keep in mind that under a certain size, you'll have no control of the look in small screens, so it's always tempting to go the easy way and convert every form element to a 100% width element. Quite honestly, everybody does it, but depending on how obsessive you're, you might want to use this visual aid and still keep it to the maximum extent.

One very known and widespread example is Bootstrap. You have .form-group-sm and .form-group-lg as classes for small and large form inputs, or you can use col-* (where * could be xs-[number], sm-[number], md-[number] or lg-[number] ) and then simply use form-group class which has 100% width. But whichever approach you choose to use, the point is Bootstrap has the option for input sizes, and believe me it has ran through extensive UX testing. Same applies to Zurb Foundation, so it's pretty safe to say different sizes in form is really good, the data is in the millions of sites using it!