Rubber css template. Application of positioning in rubber design

When laying out the next project (or just designing a layout grid), many were faced with a dilemma - to use a fixed layout width or a “rubber” grid that adapts to the size of the browser window.

Each of these solutions has its own pros and cons; I want to focus on the minuses, since usually it is precisely in reflecting the minuses of these decisions that one has to choose between two evils.

Fixed layout grid width

The layout is driven into a horizontal dimension of 960-980 pixels (so that everything fits on most devices in most resolutions), which at large horizontal dimensions the window looks somehow chilly - thin vertical stripe useful page content and huge useless fields of unused space on the sides.

"Rubber" layout grid along the width of the window

Again, with large horizontal window sizes, there is another problem: the lines of text become very long, and reading them becomes not at all as comfortable as we would like.
Another common problem with this solution is side margins with large horizontal dimensions, the windows are no longer visually consistent with the horizontal dimensions of the elements, which also does not add comfort when looking at the layout.

I would like to propose a simple solution - limit the minimum horizontal size to a fixed value in pixels, and make the maximum relative as a percentage of the window width. This is a very trivial solution by simple means 2 more versions of the CSS specification.

Update: I would like to make a reservation that we are not talking about the classic rubber effect and adaptation to absolutely all resolutions, but rather only about a certain reasonable range of resolutions for which the layout is designed. In the examples below, this is the classic desktop resolution range with a horizontal resolution size of 1024 pixels.

Let me emphasize again: The post is not talking about a solution for all types of devices and all resolution ranges. This problem cannot be solved in principle within the framework of one layout., to solve it one way or another will require several layouts. Flies separately, cutlets separately.

Create a layout container:
...
We decorate it with simple style code:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
However, this solution may seem insufficient to some due to the fact that with very large horizontal window sizes, problems with line lengths again appear. This can be solved with an equally simple additional technique: creating an additional outer container inside the one already described and limiting its maximum width to a fixed value (subjectively, it seems to me that values ​​in the range of 1400-1600 pixels are best suited). Again we only use CSS tools 2.0. This solution, instead of simply adding the width as a percentage for the original container as proposed in the first comment, will also work in IE, which, up to version 9, does not understand simultaneous indication of values.

Adding HTML:
...

And change the CSS a little:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto; padding: 0;
As you can see, the solution is extremely simple and quite universal; it can be used for any block elements.

What 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 all the others? How easy will it be to use? What problems does each of them have, and how to get around them? Is one of them easier to type than all the others? Is there any among them that is defective, completely unsuitable? Most likely, many will definitely answer these questions, but I won’t be in such a hurry.

I like each of these layouts, and each can be used in one way or another, as long as you do it wisely and carefully check for ease of use and equal accessibility for all categories of users. These are all part of the presentational layer for a website, so most accessibility issues arise from the correct use of semantics and general rules layouts. Next, I'll describe my views on rigid fixed, adaptive fluid, and expandable elastic layouts.

Fixed Width Layouts

A fixed-width site layout features a main content area (wrapper) whose width is set to a constant value, regardless of the user agent's screen resolution. The most common and reasonable width is considered to be 760 pixels - a size at which users of monitors with a resolution of 800;600 will see the main content of the site in almost the entire width of the screen, without resorting to additional horizontal scrolling.

The advantages of this layout

• The container for the main content of the site is rigidly fixed, there is no need to set a maximum or minimum width for it (which, in fact, does not 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, the positioning of a drop-down menu or tooltips on form fields). Some design layouts are wisely laid out using only 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 this kind of layouts, is, in my opinion, optimal for maximum text readability (I partially agree with the author of the article, in this case about another 200 pixels can be allocated to sidebar, and the site will be placed at 1024;768 in width, however, then, rather, the width of the main field will be 1000 pixels).

Its disadvantages

• The declared “optimal for maximum text readability” width cannot adequately fulfill its role if the text on the site has been significantly enlarged while the ratio of the text line height to its size remains unchanged (in in this case it turns out that the text is “rarefied” and is very difficult to perceive). However, it is worth noting that if there is good design this problem only occurs when the text is greatly enlarged;
• Users with small monitors (640; 480 pixels, also don’t forget about mobile devices) will have a horizontal scroll bar on the site 760 pixels wide. Although this is a very infrequent problem;
• A website with a width of 760 pixels can look quite unsightly (too narrow) on monitors with high resolution screen;
• The small width of the main container can limit the reasonable number of columns in the layout, but this can also be a plus, because it forces you to create a site taking into account such strict boundaries (i.e., a lot of frills and design techniques cannot be applied, because these are the imposed restrictions ).

Fixed width layout tips:

• Place the main content of site pages on the left so that users with 640;480 monitors do not have to scroll the site horizontally for normal reading;
• Provide the site with small style sheets to support portable small (handheld) devices. It would be great if you could also create style sheets to support projectors and TVs.

Fixed width block example

It cannot be resized; if the text is enlarged, it will be re-divided into lines inside this block.

Rubber mockups A fluid layout is obtained if you do not set the width of the main container at all (the default will be 100%) or set the width as a percentage. In other words, without taking into account borders and padding, a site with a width of 100% will occupy the entire visible part screen without creating horizontal stripe

scroll. An example of such a layout is GrayBit.com. It is reduced in width to 755 pixels before the horizontal scroll bar appears, but it is not required to view the main content of the pages. In fact, the site looks great up to a width of 560 pixels, after which design elements begin to overlap, disappear, or fall down. Most rubber layouts have such limitations and, as I have seen, do not behave correctly on mobile devices
, as long as styles are not disabled altogether or a special style sheet for mobile devices is applied.

• Pros of rubber layout With proper layout, a rubber layout allows you to achieve great versatility in display, regardless of the width of the window custom client
• . In practice, this is quite rare, but, theoretically, if everything is done correctly, then this is possible;
• The fluid layout of the site allows you to use the available screen resolution to the maximum. Most of the page's content will be "above the fold" (that is, visible without further scrolling down the page). However…

Let's look at the disadvantages of this layout

• Too much readable text on a page and its strong desire to fill all available space can be detrimental to the user experience. Too much text can overwhelm the user and make the site appear overloaded or chaotic. There is an expression: “White space sells”, I don’t know the Russian equivalent of this expression, it means that empty space is needed to increase the emphasis on content), and it is true even in relation to websites;
• If you use the max-width CSS property (which is not supported) to limit the layout width Internet Explorer(IE) versions 6 and earlier, in short, are generally (poorly) supported) and being just a layout guru can, as a result of striving for the “correct ideology,” result in, at best, a site that will be difficult to use. Imagine having to read a line that is more than 1000 pixels long and you realize the problem.

Some tips for using this layout

• Use the rubber model strictly for its intended purpose. Don't let your desire to do everything "ideologically correct" prevail over common sense. There must be some good enough reason to use this type of layout. If you do decide to use it, make sure that the fluid layout of your site looks good on most people. screen resolutions. Otherwise, leave it, the game is not worth the candle;
• If you have fixed-width areas when using a fluid layout, then you actually have a hybrid of a fluid and a fixed layout, and its minimum width will be determined by the width of the fixed blocks or the largest of the objects (pictures, for example). Be careful. If you want to create a website for free with a flexible layout, it should be so in reality, and not just in words;
• If you do make a hybrid of a flexible and fixed layout (as for example shown in my CSS guide, make sure it looks good at 800;600 resolution.

And, in fact, an example:

Elastic Layout

When using an elastic layout, the size of the main container and other (important) elements is set to em. Em are directly proportional to the size of the text or font. Therefore, as the text size on the page increases, the section sizes specified in em will increase proportionally.

An example of an elastic layout can be seen in my CSS Zen Garden submission (a limited hybrid of elastic and elastic layout). As far as I know this is the only one CSS representation Zen Garden, which is flexible and as accessible as possible with a non-editable (originally defined) page layout. I am very proud of this fact (indeed, a very good example, but in Opera 9.22, with a width of less than 150 pixels, the blocks “run over” each other, this effect is described above in the disadvantages of the rubber layout).

Pros of Elastic Layout

• If done correctly, this is a very stable layout, because everything resizes proportionally. As a result, no matter the size change, everything is still good;
• Elastic layout is quite a complex thing, it’s incredibly cool and every time it’s a challenge to yourself first of all. My first encounter with him was on the Tommy Olsson website (which is apparently good example how to make elastic sites). He amazed me, made me smile and think deeply about how little I know (impressed the hell out of me). The best example It may be possible to enlarge the text on sites with an elastic layout: just hold down ctrl and roll the mouse wheel... I can already hear you saying “Wow”

Cons of Elastic Layout

• Despite its attractiveness and elegance, I don't know of any really good uses for it, which makes me wonder why it's even needed?
• If you don't limit the size of the outer container, then this layout can be a real disaster for the user: it will stretch wider and wider and wider - without any visible benefit.

Some tips for elastic layout

• If you're going to layout using a flexible layout, make sure it works on small monitors. Otherwise, why is it needed at all?
• Limit the dimensions of the elastic block by defining the dimensions of the outer container (using a rubber or fixed width, i.e. creating a hybrid layout). For example, #wrapper ( width:60em; max-width:98%; ). Followers of the “correct ideology” may object that this will no longer be a truly elastic layout, that it is limited or hybridized, but in response I ask: what difference does it make? Yes, the “correct ideology” is wonderful and beautiful, but not when it comes to user experience (golden words!);
• Remember that IE 6 and below do not support the max-width property, make sure that when setting the max-width large text The horizontal scrollbar does not appear in IE at 1024;768 resolution. Anyway, you can see my solution for CSS Zen Garden. The next step could be layout for a resolution of 800;600 with the same condition. As an example, you can see my elastic layout of a hosting site (a limited hybrid of a flexible and elastic layout). I plan to revise it within a year, but even now the example is quite working.

An example of elastic layout.

Dear reader, make yourself comfortable and I will introduce you to the principles of rubber block layout site.

The fixed model we previously considered turns into a rubber one simply by replacing the pixel width of the block