0

I'm currently designing a web application which may be viewed by people in all kinds of resolutions 1024..1920 or even larger resolutions.

I've opted for a fixed-width design (as many other popular websites are, e.g. StackOverflow, CNN, Mint, WSJ, BofA etc.) with the lowest common denominator fitting in, meaning 1024.

Now a problem is that on some pages in my application I have to display grid-based data. I think I'm really going to anger people with large screens if I restrict them to 1024 width compacted grid data while keeping most of their screen empty.

I thought about making different style sheets and so forth for different resolutions but that will increase much of the maintenance work, graphics work etc. above of what I can manage.

Do you have any ideas how to solve this is a graceful manner (I'm just thinking maybe I have a 'creative block' here right now :) ) without having to go fully to a fluid design, which brings a bunch of problems in itself?

Alex
  • 75,813
  • 86
  • 255
  • 348

2 Answers2

1

1) Multiple hard-coded views of the same data: Brief, Detailed, Verbose Quick links, or tabs to allow the user to view different numbers of columns. If they need more details, they can choose the view that has more detail. They want to know, and will not be annoyed by having to scroll vertically.

2) User-Controlled columns Allow the users to control what they see, and what columns are included in their view. You can even store and remember the views they select. The default should be the view you think most people would want to see.

3) Combination of the previous two Allow them to choose a default, and then customize columns on a one-by-one basis. This is how MS Project works with its views, and it's very nice to work with.

Kieveli
  • 10,944
  • 6
  • 56
  • 81
0

Size the columns so that a reasonable number fit onto 1024, and use a horizontal scrollbar for the rest. Since your app doesn't use the extra real estate on other pages, you might decide to just stop there.

Otherwise, let the elements resize to fill the full width of the page if there is extra room (either use a table, or use min-width on the divs and 100% on the parent.

Jason
  • 3,021
  • 1
  • 23
  • 25