[thelist] wide-screen monitors and sites

Ben Glassman bglassman at gmail.com
Sat Feb 10 12:30:10 CST 2007


Something to consider if you are planning to use EMs as a relative unit for
your site.

Setting the font-size of the body element to 62.5% using CSS makes 1em =
10px in modern browsers (where 16px is the default size, 16 * 0.625 = 10).
Thus if you wanted to set the width of your containing element to 760px you
would set it to 76em. If you use ems for your whole layout, the entire page
will zoom in and out (minus potentially images) when font size is increased
or decreased. This doesn't necessarily provide a solution for resolution
independent layout (the layout in this case will have a width of 760px by
default) but it doesnt allow the user to increase the entire site's size.

The new design of [1] SimpleBits is an example of using EMs for layout.

I use EMs just for typographical sizing (and some content layout) and find
them to be easy to use and flexible in this context. You could just as
easily use them only for type sizing and use % values for the widths of your
layout.

[1] http://www.simplebits.com/

On 2/10/07, Mark Groen <evolt at markgroen.com> wrote:
>
> 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
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>



More information about the thelist mailing list