1

I'm doing work on a staffing related website that uses lots of forms. The forms are pretty integral to every aspect of the site--from entering work history to filling out job applications.

This has presented an interesting dilemma for me regarding the width of the site. Here are the basic components of the dilemma:

  1. It seems like forms feel more "cumbersome" when they span a lot of horizontal distance as opposed to a lot of vertical distance. Therefore it seems ideal to have the forms have a mid-to-small overall width.

  2. If I set the overall width of the site to the width that would be (imo) optimal for the forms (since forms are integral on the site), the site seems a bit too thin for today's large monitors.

  3. If I have the overall site width be a bit more normal for modern sites, and just have the form in a narrower width block that's positioned centered (i.e. margin: 0 auto;) to the rest of the content, the forms margins obviously don't line up with the margins of the other text/content on the page.

My current solution is to just disregard #3 and have the margins not line up. But I can't help but feel there may be a better solution.

Something that complicates things even more is that the site uses a centered white content area on a background--so anything I do is positioned inside that. Unfortunately I believe that this is a non-negotiable aspect of the design for my client.

What's a good solution for this dilemma?

EDIT: I'm asking in regards to the full "desktop" size. Phone and tablet sizes will scale down as needed.

Improve this question
3
  • How are you addressing the responsiveness of the website for various devices? sizes vary drastically from screen to screen, I do not think you can format it for one particular size, it will be lost....Centered display sort of helps with the screen sizes, as it not only matters for the size of the screen but also resolution. I think you should check out creativecircle.com to see how they address their forms. Also, it might be great idea to have forms autofill when user logs in with linkedin, in personal experience if staffing agency has too many forms I usually leave the website.
    – Stanley VM
    Commented Sep 30, 2015 at 15:11
  • 1
    Thanks for the input and ideas @StanleyVM. I do have an approach built in for the mobile/tablet experience. My questions were primarily as it related to the desktop "full" size. Interesting idea with LinkedIn!
    – Pete
    Commented Sep 30, 2015 at 15:19
  • 1
    in that case, remember down scroll is more acceptable then scrolling left to right, and no problem man anytime. I would really urge you to explore linkedin data input, very few sites do it right and it is very annoying to have to upload the resume and then retype your experience again. its very aggravating.
    – Stanley VM
    Commented Sep 30, 2015 at 15:22

1 Answer 1

Reset to default
1

Vertical scroll is more acceptable. Since the website already has a centered content area, all you need to do is align the form elements with other content on the website, on larger sizes you can have 2 columns of input fields and on medium and small sizes have a single column of input fields. It can easily be achieved with css media queries Anything over 2 columns on the larger sizes is too much.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.