1 person found this helpful
Personally speaking I've never defined dimensions of containers in em's. I have done more with percentages. However, I don't think you should do away with pixels completely because of the CSS attribute of min/max width/height. I think that there is a point when you know you don't want to stretch or condense your design any more and I think that a combination produces the best result. So let's say that you know the design will be distorted under 800px width you use:
In your CSS declaration along with the em width and the browser will use the em width down to 800px at which point the scroll bars will just grow on the page.
That's a good point, I had forgotten about the min width/height attribute.
Personally I myself am not too much of a fan of 'elastic' designs. I like the fixed layout because not only is it more consistent but it also seems less problematic.
I'll have to play around with it a bit. I have never really made an 'elastic' site that I liked. Most of my sites I make fixed widths (and heights in some cases) and then I just make the fonts and margins using em.
I was at a seminar once given by a reliable graphics training company where the presenter basically said you can never go wrong using pixels when designing for the web because all monitors are pixel based. By specifying pixels, the output you see is what you designed.
Given graphic elements that make of the bulk of most layouts these days are of a fixed pixel width and height I'm not sure how you could reliably make em's work in that scenerio.
The following statement is both true and false -
where the presenter basically said you can never go wrong using pixels when designing for the web because all monitors are pixel based.
Yes, monitors are pixel based, but the pixels actual size is relative to what your resolution is set at. As an example I can set my monitor, (23 inch) to display at 800px x 600px, but I can also set it to display at 1920px x 1080px, so even though the measurement is pixel based, the resolution is not, and it is this that one must take into account, (1 display pixel in not = to 1 resolution pixel).
Even the old ppi, (pixels per inch) is no longer a good measure of how something will be displayed, as PC's use 96ppi, (windows vista & 7 can use 130ppi) and Mac's use 72ppi as the base resolutions, which is based on the old vga card resolution which was used in the early 90's.
The only good thing about the resolution and settings is that the majority of users never use anything except for the defaults that are set by the manufacturer when they purchase the computer. So all anyone can do is design for the 'average' user, and base what they do from that, see - http://browsersize.googlelabs.com/, (don't forget to read the info on browser size, link at top of page).
As for using ems and not pixels this would depend on the type of content the site has, if it is short product descriptions then the choice is up to the designer, but if it is more an information based site, (or long product descriptions) then typographically speaking ems are the better choice as one can then control the line length of the text more accurately, 65-75ems being the optimal. If a line is too short or too long it becomes difficult for the user too read. But using pixels this is not possible with sufficient accuracy, especially when the user can enlarge the text. This becomes even more important when designing fluid or semi-fluid layouts.
Added: Just to confuse matters the normal image resolution of a web graphic element is the mac default of 72ppi.
Message was edited by: pziecina
I've experimented with elastic (em) layouts. Proof of concept below:
Bring out your calculator. Everything, including images, must be converted to ems based on a font-size standard (usually 16px = 1em = 100%).
The only things that don't re-scale to proportion are non-repeating (static) background images and Flash. Other than that, this layout approach does what it's supposed to do in all the major browsers -- even IE6!
No need for a calculator Nancy, try this site out... http://pxtoem.com/
That site is by far the most helpful site ever when converting things to em. Mess around with it and you'll see what I mean!
Good to know that a full on em layout works for you. Perhaps I'll toy around with making a site that uses entirely ems for myself and see how it works!
Nancy wrote -
The only things that don't re-scale to proportion are non-repeating (static) background images and Flash
Don't forget that all modern browsers except IE8 and below, can now have the ICC profile embedded, which even though it does not contain the images ppi, it does contain the pixel color data which is used to calculate the number of pixels to display, the icc data is simply discarded on IE7/8.
One other thing that I forgot to point out is that 89% of web users have a pc, so anyone designing a web site on a mac is literally designing for only 11% of users as the remaining 89% will always see a design that does not match the original if pixels are used as the base measurement. This is well documented though and all mac users should be aware of this.
For anyone who still maintains that 1px is 1px, do the calculation if I design on an 800px wide screen and then it is displayed at 1920px, what is actually displayed as the monitor must display 2.4px for every 'designed' pixel. But (especially for text) 1em at 800px is still 1em at 1920px, so for sites that have a lot of text as content, one should at least consider basing the design on ems.
Just as a side note: centimetres and inches were originally included as measurements in css, but to date I know of no browser that has implemented these, (some assistive devices did though) but if they did so for images it would solve that part of the problem.