What is the maximum practical height and width for a Web application?

Question

Suppose I want to make a Web application which uses a fixed width and height, and I want the interface to fit on screen for common screen resolutions. Assume the application will only be used on laptops and workstations (and not on mobile devices), and it will be used by IT professionals.

What is the largest possible size I can make the application? I think the key considerations here are what is the smallest screen resolution commonly used and how much space to reserve for browser chrome, which may depend on whether the user has toolbars installed, etc.

Or should I make all the page elements resizable and go with fluid layout? That seems like it might be quite a lot of work.

Answer 1

960x600 pixels

Answer 2

Fluid layouts are great if your design works for it.

Otherwise, 960px wide is very common and works in pretty much any browser on a 1024x768 screen resolution (which is still VERY common).

As for height, people are generally okay with scrolling down, but if you need it in one window then you have to stay under about 500-600px depending on browser and what toolbars the user has installed.

Answer 3

You could use an analytics tool to figure out what resolution your current users are running.

Answer 4

You might try making only part of the layout fixed, and then using CSS's max-width/min-width and max-height/min-height to constrain what you must. Have decoration be fluid as much as it can (e.g. large background images shouldn't force the browser to be 1600px wide; just show as much as possible in the width available in the user's browser, without horizontal scrollbars; try setting the container width to 100%).

You could put a min-width of maybe 30em on a main text column, for comfortable reading (see Ideal line length for content), and perhaps an upper limit of something wide but still readable. It is unpleasant when browsing a site with a layout that crams the content into a small, fixed-size box, especially when it's only for the sake of preserving their design. If your design requires dynamic content to fit within a fixed size, the design could probably use some more thought.