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

Question

Suppose I want to create a web application that uses a fixed width and height, and I want the interface to fit the screen for general screen resolutions. Assume that 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 maximum size I can make for an application? I think the main considerations here are what is the smallest screen resolution that is commonly used, and how much space to reserve for the Chrome browser, which may depend on whether the user is installed in the toolbar, etc.

Or should I make all the page elements resizable and go with the fluid layout? This seems to be quite a bit of work.

Answer 1

Fluid masks are great if your design works for him.

Otherwise, 960px width is very common and works in almost any browser with a screen resolution of 1024x768 (which is still very common).

As in the case of height, people are usually okay with scrolling down, but if you need it in one window, you should stay under 500-600 pixels depending on the browser and which toolbars the user has installed.

Answer 2

960x600 pixels

Answer 3

You can use the analytics tool to find out what permissions your current users are performing.

Answer 4

You can try to make only part of the layout fixed, and then use CSS max-width / min-width and max-height / min-height to limit what you need. The decoration should have as much fluid as possible (for example, large background images should not force the browser to have a width of 1600 pixels, just show as much as possible the width available in the user's browser, without horizontal scrollbars, try setting the container width to 100% ).

You can put min-width , maybe 30em in the main text column, for easy reading (see Ideal row length for content ) and maybe the upper limit of something wide but still readable. This is unpleasant when viewing a site with a layout that overflows the contents into a small box with a fixed size, especially when it is intended only to preserve their design. If your design requires dynamic content to fit a fixed size, the design could probably use a few more considerations.