After much reading, I’m thinking of switching to elastic layouts i.e. em layouts. However, I have some doubts that I just can’t seem to find a clear cut answer to.
Doubt One
When using ems the default font size is assumed 16px? So, for a container of around 800px width, 50em is used. What if the default is different? What if the visitor’s default is 20px? What I want to be around 800px would be around 1000px, yes?
Doubt Two
To make ems work properly on IE , setting body { font-size: 100%; } is recommended, but is it okay to set font size to 16px on html element to satisfy my previous case? So that the initial appearance of my site is the way I would like it to look?
Doubt Three
Since there is no resize property for background images, is repeated backgrounds only option for em layouts other than dealing with clipping and empty space background?
I don’t want to restrict the user to a specific dimension, rather want them to be able to resize the fonts as they wish and the layout to resize according to font size. It’s just that I want the initial look and feel of the site to be the way intended. Guess when you are going em, it’s better not to be concerned about that.
About the background options, setting max-width is a good idea. I didn’t think it’d be necessary. Since ems change with font size, have to set max-width in pixels, yes?
You can assume all you like about a visitor’s default settings, but you won’t always be right! The reason why there are so many potential pitfalls when trying to create a carefully-crafted design for a website is that different people’s defaults are different. Different platforms result in different settings. Different browsers have different defaults. Some people choose to set their own defaults differently again.
If you’re worried about a contained expanding from a desired 800px to an undesired 1000px because it is scaling with the default font size, elastic layouts are not for you (which is a shame, because on the whole they are a good thing). What you might want to do is to set a width of 50em but also add a max-width in pixels to ensure that with a large font size it doesn’t become unfeasibly large.
Trying to control the size of text that the viewer sees is unhelpful. Yes, it may make your design easier to accomplish, but that is at the expense of the user’s ease of reading. If they have their text set to use a larger size, that’s because they want it at a larger size, so if you try to enforce a smaller size on them then they will struggle. (Of course, with zoom now being common across browsers, they can just zoom in and break the layout that way instead…)
Tiled backgrounds are one option; another is to have a single image that is large enough to fill the element at the maximum dimensions you’ve allowed (you did remember to set that max-width, didn’t you), and have it cropped at smaller sizes. Of course, a third option is not to use huge background images with their associated download time/cost and just set a background colour instead
You can get the initial look that you are after based on the user having a default font-size of 16-18px which will cover the majority of users. You will have to give some breathing room since ems are basically percentages and there could be rounding errors if you had em width floats beside each other. If there was no breathing room you could have floats dropping.
As far as the min-max widths, I find that a max-width in % and a min-width in px works best when the width is set in em.
Here is an elastic layout I helped someone with recently. The sidebar has an em width and it grows in proportion until the wrapper max-width is reached, then it starts overpowering the layout.
