[thelist] wide-screen monitors and sites
Mark Groen
evolt at markgroen.com
Sat Feb 10 11:44:32 CST 2007
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
More information about the thelist
mailing list