CSS layouts: fixed, rubber, elastic. Pros and cons
What layout layout (using Cascading Style Sheets, CSS) can be considered the best? Each of them has its own hacks (quirks) and its own unique pros and cons. Will one of them be more user friendly than everyone else? How easy will it be? What problems do each of them have and how to get around them? Is one of them easier to compose than the rest? Is there any defective, completely unsuitable among them? Most likely, many will unequivocally answer these questions, but I will not be in such a hurry. I like each of these layouts, and each is applicable in one way or another, if you do it wisely and carefully check the ease of use and equal accessibility for all categories of users. All of them are part of the presentational layer for the website, so most accessibility issues arise from the correct use of semantics and general layout rules. Next, I will describe my view of rigid fixed, adaptive fluid, and expandable elastic layouts.
FIXED WIDTH LAYOUTS
A fixed-width site layout differs in the main content area (wrapper), the width of which is set to an unchanged value, regardless of the resolution of the user agent screen. The most common and reasonable is the width of 760 pixels – the size at which users of monitors with a resolution of 800 × 600 will see the main content of the site almost the entire width of the screen, without resorting to additional horizontal scrolling.
The author’s blog is an example of such a layout, although it can easily be brought to a rubber or elastic layout without changing the current images.
PROS OF THIS LAYOUT
The container for the main content of the site is fixed, it does not need to set the maximum or minimum width (which does not, in fact, have cross-browser support at the moment);
In some cases, using fixed-width layouts is easier to create certain effects or design decisions (for example, to position a drop-down menu or tooltips to form fields). Some design layouts are reasonably layout only using a fixed width of the main container;
A layout based on the width of the main field stated above – 760 pixels – which is a typical width for such types of layouts, is, in my opinion, optimal for maximum readability of the text (I partially agree with the author of the article, in which case about 200 pixels can be allocated to side menu, and the site will be placed in 1024 × 768 in width, however, then, rather, it will mean the width of the main field of 1000 pixels).
HIS MINUSES
The declared “optimal for maximum readability of the text” width cannot adequately fulfill its role if the text on the site was significantly increased with the same ratio of the height of the line of text to its size (in this case, it turns out that the text is “sparse” and is very difficult to perceive) . However, it is worth noting that if you have a good design, this problem only occurs when the text is very large;
Users with small monitors (640 × 480 pixels, also remember about mobile devices) will have a horizontal scroll bar on the site with a width of 760 pixels. Although this is a very infrequent problem;
A site with a width of 760 pixels can look rather unsightly (too narrow) on monitors with a higher screen resolution;
The small width of the main container can limit a reasonable number of columns during layout, but it can also be a plus, because it forces you to create a site, taking into account such tight frames (i.e., a lot of excesses and design techniques can not be applied, because these are the restrictions )
FIXED WIDTH LAYOUT TIPS
Locate the main content of the site’s pages on the left so that users with 640×480 monitors do not have to scroll horizontally for normal reading;
Provide a site with small style sheets to support portable small (portable) devices. It will be great if you also create style sheets to support projectors and televisions.
FIXED WIDTH BLOCK EXAMPLE
Habrahabr does not allow the user to specify styles, therefore I will limit myself to the example code, all examples “live” can be found in the author’s article.
<div style = “width: 500px; font-weight: bold; text-align: center; color: # c90;
background-color: # f7fbf3; border: 1px solid # 9c6; margin: 0 auto; padding: 10px “>
<p> This <code> block </code> has a fixed width of 500 pixels.
You can’t resize it, when you increase the text, it will be anew
break into lines inside this block. </p>
</div>
