5

I've got a fixed width layout site much like SE and Twitter and it personally bugs me when my "short" pages don't reach the bottom of the page. I've been wondering if this is a purely stylistic issue or if any research or standards exist for this situation. It seems to me that it would keep all elements at the greatest level of spacial consistency, and I have noticed that big sites like Twitter do tend to fill all vertical real estate with "container" rather than "padding".

Here's an example on a 1280x1024 monitor of a very empty page on the site. As you can see there is a great deal of visible padding. On the other hand a great deal of whitespace would replace it with a "fixed" height solution.

enter image description here

At the moment the footer of the page is unused (it's an intranet site and I guess the client opted against/forgot even simple copyright information at the bottom) so I figured this is less important in this case, but I have noticed most "modern" sites do this so I was wondering if there's formal research/debate on the matter. I would like to make the change but I hate to change the user interface without a solid reason, as I did not create the original design.

3
  • I would probably say this is more of a design issue, not strictly UX old chap...
    – colmcq
    Sep 1, 2011 at 16:31
  • Design is part of the experience however. Users do have better experiences on better looking sites with the same functionality...
    – Ben Brocka
    Sep 1, 2011 at 16:40
  • I think the issue is whitespace more than any specific height here. UI needs room to breath. Your form fields and text is all smashed to the edges of the container. Give it some room.
    – DA01
    Sep 1, 2011 at 17:58

4 Answers 4

3

I'm not a web designer but it seems to me that the problem here is that even if the container fills the height - there's still an awful lot of empty space to fill. The eye needs to be drawn away from that empty space - you can do that by shading the background so it's lighter at the top.

Also your form is left aligned - it might help to centre align it away from the edge so as to bring focus to the form.

Finally, the main content just kind of stops rather than blending which makes the background all the more stark. Many sites use a drop shadow to help transition.

I've mocked up the changes - but really this is just food for thought - others might have better ideas.

enter image description here

1
  • The site does suffer a bit from that problem as well, I've been thinking of expanding the header/footer bars to better fill in space and make the top menu more reachable/readable. The whole site could use a redesign but I've been trying to make small steps since I'm new.
    – Ben Brocka
    Sep 1, 2011 at 16:46
2

To expand on my comment of white space, here's a really quick visual of what I was getting at:

Showing whitespace

The idea is to give the elements some room. Don't crowd everything up to the margins. I also gave it a larger SAVE button and made the cancel button (secondary action) less equal in visual weight.

There are a lot of other issues that need to be addressed...the color scheme being one of them (why was pea green chosen? ;) It also has the feel of a modal window, so maybe this would be best handled as an entirely different user flow

4
  • The majority of the pages DO hit the top/bottom so I certainly can't center the whole thing, I will look at widening the margins though. I've been trying to think of a different background color too, but blue, beige and grey are our company colors though...we do sell rocks.
    – Ben Brocka
    Sep 1, 2011 at 19:11
  • 1
    There's no reason you need to use your corporate branding colors as a UI theme for your software. They're really two different things. Sure, put a logo in the app and if it makes sense, borrow a few colors, but software should look like software--not a corporate brochure. ;)
    – DA01
    Sep 1, 2011 at 19:41
  • Very true. I didn't expect such a discussion of the site's style, I'll have to look over it for real once I'm finished debugging. Thanks for the suggestions!
    – Ben Brocka
    Sep 1, 2011 at 19:54
  • 1
    @SirTapTap - par for the course I'm afraid - it's almost impossible to show a whole page of content and only get feedback on the particular issue you wanted, without some sage advice being given about the rest of it as well. All feedback is good feedback though, right? :-) Sep 6, 2011 at 13:56
1

The screen is like a canvas of a painter. Why would you only use a fraction of the canvas? Imagine a person, looking at the image above. Do they say, "Oh that looks nice..it's like they made the page with some love."? Or do they think it's ugly and just a form?

Use bigger form elements, make the screen liquid. Make a container that looks nice. Be nicer to your audience and they will be nicer to you. Make a decent looking page. The image above is an eyesore.

Just trying to keep it real...no offense intended. :)

1
  • I firmly agree, I'm just trying not to change everything at once on them. Change is scary too of course :P
    – Ben Brocka
    Sep 1, 2011 at 16:39
0

In my experience one of the historical reasons for maintaining a full depth container is that it permits a design in which the scroll bar shows consistently. It is disconcerting to navigate a website in which the scroll bar appears and disappears because the content/design shifts slightly to accomodate the extra available width.

Not certain if this is an issue for you here though as your screen shots clearly show an inactive scrollbar even when the content is not at full depth.

3
  • Yeah, I forced a scrollbar as the shifting widths bugged me, and users were used to IE (but we're moving most to firefox). It's as simple as overflow-y:scroll; so I don't know why a fixed height container would be needed just for the scrollbar.
    – Ben Brocka
    Sep 1, 2011 at 18:47
  • I've never seen evidence the show/hide of a scrollbar annoys anyone other than a) the business line manager and b) The creative director. ;)
    – DA01
    Sep 1, 2011 at 20:04
  • Out of curiosity, what was the selector you used for overflow-y? Wrapper? Sep 1, 2011 at 20:11

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.