ansaurus

Question

What is the best method for supporting screen sizes in a Web app?

Answer 1

+2 A:

One way to set a maximum width for a div or table is to use CSS Expressions

div#myDiv
{
     max-width: 980px; 
     min-width: 980px; 
     width: 980px; 
     width: expression(Math.max(Math.min((document.documentElement ?   document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}

You can replace 980 with 600 in your case. I will often create a container div to hold say the header, and footer such that they will expand the entire width of the screen, while using a child div to contain the content. In this way you can constrain the content (using the above expression), while allowing it to expand / contract based on screen size up to the max-width you specify.

*** UPDATE ***** Based on your clarifications on the comments, this example code should do what you want, if I understand you correctly. Page Header, Footer, Etc are auto sized to fit the screen, while the content is constrained to a max width of 600px wide, scaling smaller as neccesary.

<html>
<head>
    <style>
    div#contentDiv
    {
        max-width: 600px;
        width:expression(document.body.clientWidth > 600? "600px": "auto" ); 
        border: red 1px solid;
    }
    div#wrapper {width: auto; border: blue 1px solid;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>

PortageMonkey 2009-08-04 23:33:59

Do CSS expression work in anything other than IE?

MiseryIndex 2009-08-05 00:01:14

The CSS Expression use for max-width is precicely for IE support, while the max/min-width declarations will be used for most other browsers, FF, Safari, Chrome, opera etc. See http://www.quirksmode.org/css/contents.html for a more descriptive breakdown of support.

PortageMonkey 2009-08-05 03:14:20

Hmm, maybe I'm not doing it correctly but it does not seem to work. Tried it in FF 3, IETab, and IE 8. In IE 8, I get an ActiveX warning, but even if I accept the blocked content, it does not seem to do what I want; it just sets the width to a constant. I do not see a warning in FF, but behavior is the same.

Alek Davis 2009-08-05 16:31:36

I added an updated, simplified code snippet with HTML based on your feedback and clarifications. It has been tested in IE 7, 8, Chrome and Firefox. Hope this helps

PortageMonkey 2009-08-06 03:47:21

Cool. This looks exactly like what I need. The only problem is the ActiveX warning that IE 8 shows (and if the user does not accept it, the functionality will not work). I assume the warning is caused by the expression function. The good thing is that it seems to happen only when loading a local file (via file:///), so should not be a problem. Thanks a bunch.

Alek Davis 2009-08-06 15:58:26

Answer 2

A:

Fixed width at about 720px wide.

I used to be a variable-width guy, but I eventually realised:

People with smaller screens (phones only, for this size) are used to zooming out and scrolling around.
People with large screens don't have their browser windows maximised anyway, because with variable-width, the text becomes so wide that it's hard to read.

(There is research into this - your eyes have a harder time figuring out which line you are up to when the first word is a foot to the left of the last word of the previous line).

Web pages may be different to web applications though; if the screen is mostly tables, buttons, graphs, reports etc, you may want a maximised liquid width to fit as much as you can.

MGOwen 2009-08-05 00:51:34

720px is to narrow. Even on my 14" laptop, a maximized window would leave wasted spaces at the sides and would force the user to scroll, which is not the optimal solution.

Alek Davis 2009-08-05 05:37:21

White space at the sides usually does NOT mean wasted space (and he did mention the special case where it may not apply - table and graph-rich apps). A sane amount of white space is necessary for better readability. Ask any desktop publishing expert.

dalbaeb 2009-08-06 15:37:11

It depends. In a maximized window on a 24" screen white space is okay, but on a 14" screen is almost always a waste.

Alek Davis 2009-08-06 16:08:23

720 px is also too wide! I have a 10" screen netbook (for coding anywhere and everywhere for hours on end), with a taskbar on the rhs, and perhaps a chat window. OK, so i'm a boundary case. But I really don't like fixed width webpage. Oh, and on my 32" desktop screen, your webpage is some 70% wasted space. Or 100% wasted space, depending on how you look at it.

Aaron 2009-08-06 16:35:16

Exactly. With the variety of screen sizes people use these days (from netbooks to large LCD displays), fixed size is probably not a good idea.

Alek Davis 2009-08-06 18:37:27

Answer 3

A:

Ideally, I would want the page width to be dynamic (100%) until it reaches certain threshold (say, 600px).

For that, I'd probably do a dynamic layout, then have some div inside it (an invisible one in the header or something will do) that's fixed to 600px. The layout will expand and contract but stop when it shrinks to the size of the div:


page
______________....
|                :
|[600px div]     : 
|                : 
| c o n t e n t  :
|_____________...:

MGOwen 2009-08-05 00:59:31

I may have misunderstood your suggestion but it seems like your idea is to keep the min size at 600px (or whatever number), while I want to achieve the opposite: to have the max width at 600px, i.e. user can resize it to 400px, 300px, etc, but not to 601px.

Alek Davis 2009-08-05 05:35:27

Answer 4

+1 A:

Design for your audience, if 80% of your users are using a large resolution then optimise for that. Google Analytics will give you accurate stats on visitor browser resolutions.

Tom 2009-08-06 14:37:56

First, if you are building a new app, you cannot run stats until it's deployed, by which time the design should be done. Second, for intranet apps, I'm not sure if Google Analytics is even an option. Third, even if 80% use larger resolution, why penalize the remaining 20% if you do not have to. The solution suggested by PortageMonkey is a much better option.

Alek Davis 2009-08-06 16:04:31

If it's a new app, then you've likely identified your target audience, therefore you can make some assumptions on resolutions and platforms.If it's intranet app then you'd have a much better idea (much more than a public app) of who you audience would be.

Tom 2009-08-07 08:07:13

Answer 5

A:

My statistics says 1024x768 is on the top. That's why I'm using 960px width for my apps. When statistics change then I change this value to other.

For mobile users You should use different views, optimized for special cases.

dario-g 2009-08-10 06:32:50

ansaurus

tags:

views:

answers:

What is the best method for supporting screen sizes in a Web app?

related questions