[thelist] wide-screen monitors and sites

[Mark Groen]

On Friday 09 February 2007 14:22, Bob Meetin wrote:
> .....
> Myself - I have never mussed with DPI settings - I just checked - my
> laptop with a normal monitor is set to 96 -.........
> .............

Start here for a concise explanation of the "reference pixel":
http://www.w3.org/TR/CSS21/syndata.html#pixel-units
or a little higher up on the page for the difference between absolute and 
relative measurements:
http://www.w3.org/TR/CSS21/syndata.html##absrel-units

> The question here is twofold - as I develop sites must I be checking
> them on widescreens as well

No, it should not matter what type of monitor you are using, if using relative 
units the site will display well practically everywhere.

> ............
> ..........I hate to think
> this, but it might also be that the widescreen exposed problems in
> design techniques(some learning curve...), meaning that the monitor is a
> tool, a crutch.

Let the designer in you create the layout with any tool you like, Photoshop, 
Fireworks, Illustrator etc. - the design is separate from how the actual 
markup is handled.

Your markup is determined by the text content. For fixed width sites it's 
common to use a "wrapper" div to start out with, then possibly a div to wrap 
any columns. It is common to use a header, content, menu and footer div. The 
rest of the positioning can all be handled with the header, paragraph and 
list elements and no more divs should be required except possibly for a list 
element (dang browsers).

Avoid "class-itus", most likely your p or h elements can be referenced through 
the CSS cascade (remember your initial wrap divs are in place already) 
without the addition of a class to a common element.

Start your markup with CSS declarations to "zero" everything first size-wise. 
For example, make sure that the font sizes are set to 100% to start and 
default margins and padding are removed from all possible elements. I use ems 
rather than percentages for font-sizes, just find it easier to fine tune. For 
percentages or ems zeroing, here's a good start:
http://developer.yahoo.com/yui/reset/

From there, the semantics of the content take over and as you probably already 
know the H1 is first, followed by the H2 etc. for headers, the rest is 
paragraphs and lists. Turning off all CSS styles should render your content 
in a form that is easily readable and "makes sense".

Finally, understand that at the level CSS is at now everything isn't going to 
be perfect with all user-agents, accept that.

Most likely your clients are using a PC with a common browser or they have it 
up on the 52" screen in the conference room to discuss the site, and by using 
relative units for everything, it should look fine.

If you want, you can size images with ems as well, divide the pixel value by 
16 - but with XHTML an image size isn't required and it's probably okay not 
to specify an image size at all with most designs.

When CSS3 is common and background-size is supported it will get even easier 
and a site like the one linked below will display the same everywhere; right 
now if you re-size the background images muck things up. I know it's not 
perfect markup/css, a rough example, no flames please ;-)

http://www.lookingforamerica.org/

HTH!
-- 
cheers,

        mark