Monitor Dimensions

Orc · 02-18-2008, 01:46 AM

I know this is probably one of the tricky things in Web Design, but how do you adjust your websites to fit any Monitor Dimensions. I have a wide screen tv as my monitor so. ;P

DeMo · 02-18-2008, 02:27 AM

You can set the size of stuff using percentage instead of an absolute value.

Using CSS:

Code:

.somestyle {
    width: 100%;
}

Directly in the element:

Code:

<div width="100%">content</div>

trs21219 · 02-18-2008, 04:33 PM

if you need to you can use javascript to determine the monitor pixel dimensions and then go from there. just google it :)

stewart · 02-24-2008, 12:34 AM

All through out the design and slice/coding phase I try to play around with different sizes by simply resizing my browser window down..

The main problem I'm starting to discover with many sites now, is they aren't thinking about all of the widescreen users out there, therefore using a 100% stretching method seems to look pretty wack most of the time... then on the flip side, make sure not to design a design for some major widescreen display, forgetting about all normal display users ;)

And as said above, one easy way would be to simply detect screen resolutions using javascript and dynamically load the appropriate CSS file.

Dr John · 02-27-2008, 10:03 AM

There is such a thing as min-width and max-width (and conditional statements for IE6) you know. A very wide page presents readability problems as the user has trouble finding the beginning of the next line when it is 19" away, and 5 - 7" is supposed to be the optimum. I think that we should avoid having lines of text more than about 9 - 10" in length on our sites.

stewart · 02-27-2008, 12:42 PM

Yeah that works too, but can get messy, since I am forced to use some javascript anyway, I just detect sizes and use appropriate styling..

It'd be amazing if IE6 actually recognized min-width/height properties too =/

Dr John · 02-27-2008, 01:01 PM

But my browser viewport size is almost NEVER the same as my screen resolution. And the bigger the resolution, the more likely it is that a user will not have the browser at full screen. For example this screen is at 1200px width, but the browser is about 1000px wide. Min-width and max-width (and the conditional statement for IE6) are specifically designed to handle that situation, your resolution detecting javascript is not, and the javascript approach is never recommended in any of the other pro forums I use.

On the odd occasions I've used 1400px wide monitors or wider still ones, I've usually had the browser open at half the screen width. That's very useful when comparing how two browsers display things, for example, even on my 1200px wide screen.

Why is my browser not full screen? Because I've just this instant seen the email show a new one arrive as its display just changed. Or I'm copying some stuff from a Word doc to a web page, or using a database and checking that the online one matches the offline data. Lots of times I have FF and IE running side by side, especially when troubleshooting a design.

Resolution sniffing is not the answer.