Rubber design html. CSS layouts: fixed, fluid, elastic

From the author: Hello dear readers of my blog! Surely many of you have already heard the legends about dragons, Santa Claus and an incomprehensible beast called rubber web design, which is able to change its shape. John Tolkien's manuscripts will tell you about the first character, parents about the second, but I take over the information about the third. As strange as it may sound, however, in this article I will try to chew rubber web design and talk about its advantages and disadvantages.

When developing a site, a webmaster, first of all, should start from the goals of the project. If it is important for the customer that the web page can adapt to any monitor screen, then rubber (adaptive) design will come to the rescue.

This format got its name due to the fact that its width is set not in pixels, but as a percentage. With it, the page will open on the entire screen of the monitor, regardless of the resolution.

For your career as a web designer to develop rapidly, it is imperative to study this direction. Many customers with an already assembled loyal customer base are especially demanding at this point, because they want to provide their users with maximum convenience.

The birth of rubber web design

As an interesting observation, one can note the fact that in our country specialists began to perceive "rubber" web design from a positive point of view earlier than in the West. The fact is that there, at the birth of the web direction, a large number of narrow-minded printers came to this area.

Foreign experts simply did not realize the possibility of creating non-fixed graphic developments. But the concepts of “web” and “design” came to us almost equally, as a result of which such visual flexibility of the image was perceived by developers as ordinary creative freedom.

Are fluid and responsive web design the same thing?

Often people confuse these two concepts, however, they are not purebred synonyms for each other. Responsive web design involves working with different site layouts in order to create the maximum usability on all kinds of devices, taking into account all kinds of screen resolutions.

It "reasonably" adjusts the overall picture to fit the screen, depending on the size of the display on the device. Well, the rubber design is, in fact, one of the elements responsive web design. He, in turn, only makes changes to the proportions of the web page.

Thus, we can conclude that responsive web design is a combination of rubber and other progressive improvements. Although, due to congenial definitions, confusion can sometimes arise. It is especially unpleasant when disagreements in this regard occur with the customer, so be careful and always clarify what the customer meant when talking about the rubber site design.

Benefits of Resin Web Design

With css fluid design, you have the ability to design a web page that fills everything free space browser regardless of screen size. If there are any changes to the settings related to the permission, the entire site structure will again adjust to the updated conditions. Miracles and magic, right?

This feature guarantees that the web page will completely occupy the browser window, regardless of whether the picture is displayed on a small HTC or on a 20-inch widescreen monitor. This can be attributed to the main advantage of the rubber design.

Those users who have small monitors do not experience problems with horizontal scrollbars, but owners of large widescreens are sometimes disturbed. Consequently, in this regard, the latter will be able to fully enjoy the picture, because the entire display area will be effectively used.

If we consider the question of which sites rubber web design is suitable for, then everything here again depends on the goals of the customer. This visual flexibility will look good on sites where placement on a single web page is a priority. maximum number content, and aesthetic norms fade into the background.

It is on this basis that rubber web design is widely used in the creation of news portals, blogs, as well as all kinds of information sites. In these cases, its use is most appropriate.

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Disadvantages of Fluid Web Design

Apart from good points, such web design has some specific disadvantages. One of them is that, in fact, the final result of "auto-adjusting" the page to certain screen resolution conditions is unpredictable. Some graphic elements on the site may suddenly find themselves in a different place, as they were forced out by neighboring colleagues.

Another disadvantage of such "rubber" is the fact that page loading with it can increase 2-3 times compared to the standard duration. This happens due to the pickiness of some browsers to page layouts. this format. They have a hard time rendering variable-width elements, which also increases the risk of visual errors.

Fluid and Responsive Web Design Examples

For clarity, I want to show you a few good examples rubber and adaptive designs from enough successful developers.

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

To begin with, consider the rubber site of an American blogger who is engaged in web development in parallel. Full version site:

mobile version site:

As you can see, in this case, the picture only adjusts to the size of the device, and general structure site remains unchanged.

2. http://www.fork-cms.com/

Now I suggest that you familiarize yourself with the website, which adapts to specific device and, depending on its size, completely rebuilds its own structure. Full site version:

Mobile version of the site:

That's it. I hope today's material was interesting, and you did not waste your time in vain. If so, please comment and share own opinion. I enjoy both the positive feedback and the expert opinions of the Web Design 2.0 masters. Subscribe to the blog so as not to miss further interesting and useful information.

That's all for me, see you soon!

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

What is the best layout (using Cascading Style Sheets, CSS)? Each of them has its own hacks (quirks) and its own unique advantages and cons. Will one of them be more user-friendly than all the others? How easy will it be to use? What problems do each of them have, and how to get around them? Does one of them make it easier than all the others? Are there any flawed, completely unusable ones among them? Most likely, many will unambiguously 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 for ease of use and the same accessibility for all categories of users. They are all part of the presentational layer for a website, so most accessibility questions stem from the correct use of semantics and general rules layout. Next, I'll describe my take on rigid fixed, adaptable 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 fixed width regardless of the user agent's screen resolution. The most common and reasonable width is 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.

Advantages of this layout

• The container for the main content of the site is hardwired, it does not need to set a maximum or minimum width (which does not really have cross-browser support at the moment);
• In some cases, fixed-width layouts are easier to use for certain effects or design considerations (such as positioning a drop-down menu or tooltips for form fields). Some design layouts only sensibly lay out using a fixed-width main container;
• A layout based on the width of the main field declared 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 200 more pixels can be taken to side menu, and the site will fit in 1024;768 in width, however, then, rather, the width of the main field will be 1000 pixels).

Its cons

• The declared “optimal for maximum text readability” width cannot adequately fulfill its role if the text on the site has been significantly increased while the ratio of text line height to its size has not changed (in this case it turns out that the text is "rarefied", and it is very difficult to perceive). However, it should be noted that if there good design this problem occurs only when the text is enlarged very strongly;
• For users with small monitors (640; 480 pixels, you should also not forget about mobile devices) will create a 760px horizontal scrollbar on the site. Although this is a very infrequent problem;
• A website that is 760 pixels wide can look quite ugly (too narrow) on monitors with high resolution screen;
• The small width of the main container can limit a reasonable number of columns when layout, but this can also be a plus, because it forces you to create a site, taking into account such rigid frameworks (i.e. a lot of frills and design tricks cannot be applied, because such are the imposed restrictions ).

Fixed Width Layout Tips:

• Place the main content of the 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 stylesheets to support portable small (portable) devices. It would be great if you also create style sheets to support projectors and TVs.

Fixed Width Block Example

Rubber layouts

A fluid layout is obtained if the main container does not have a width at all (the default will be 100%) or if the width is set as a percentage. In other words, regardless of borders and padding, a site that has a width of 100% will take up the entire visible part of the screen without creating horizontal bar scroll.

An example of such a layout is GrayBit.com. It shrinks down to 755px before the horizontal scrollbar appears, but it's not required to view the main content of the pages. In fact, the site looks great up to a width of 560 pixels, beyond which design elements begin to overlap, disappear, or fall off. Most fluid layouts have these limitations and I've seen them behave incorrectly on mobile devices unless styling is disabled at all or a mobile-specific style sheet is applied.
Pros of a Rubber Layout

• When properly laid out, fluid layout allows for great display versatility, regardless of the width of the user client window. In practice, this is quite rare, but, theoretically, if everything is done correctly, then this is possible;
• The fluid layout is the same as the browser's default layout, which allows it to be considered "ideologically correct". But can the desire of the developer to make an “ideologically correct” site be considered a plus in terms of ease of use? I think it's possible;
• The fluid layout of the site allows you to use the available screen resolution to the maximum. Most of the content on the page will be "above the fold" (i.e. visible without additional scrolling of the page). However…

Consider the disadvantages of such a layout

• Too much readable text on a page and its urge to fill all available space can be detrimental to user experience. Too much text can put pressure on the user and make the site look cluttered or chaotic. There is an expression: “White space sells”, I don’t know the Russian equivalent of this expression, it means that empty space needed to increase the focus on content), and this is true even for websites;
• If you use the max-width CSS property (which is not supported by Internet Explorer(IE) 6 versions and earlier, in short, generally (poorly) supported) and being just a layout guru, as a result of striving for the “right ideology”, you can get, at best, a site that will be hard to use. Imagine that you need to read a line with a length of more than 1000 pixels, and you realize the problem.

Some tips for using this layout

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

And, actually, an example:

Elastic Layout

When using elastic layout, the main container and other (important) elements are sized in ems. Ems are directly proportional to the size of the text or font. Therefore, as the size of the text on the page increases, the sizes of sections given in ems will increase proportionally.

An example of elastic layout can be seen in my CSS Zen Garden view (a limited hybrid of elastic and fluid layouts). As far as I know, this is the only Zen Garden CSS view that is as elastic and as accessible as possible with a non-editable (default) page markup. I am very proud of this fact (really, a very good example, but in Opera 9.22, when the width is less than 150 pixels, the blocks “run into” each other, this effect is described above in the minuses of the fluid layout).

Pros of an elastic layout

• If done right, this is a very stable layout, because everything resizes proportionally. As a result, with any resizing, 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, apparently, is good example how to make elastic sites). He struck me, made me smile and think deeply about how little I know (impressed the hell out of me). best example there may be text enlargement on sites with elastic layout: just hold down ctrl and roll the mouse wheel ... I can already hear you saying “Wow”

Disadvantages of elastic layout

• Despite its attractiveness and elegance, I don't know of a really good use for it, which makes me wonder why it's needed at all?
• If you don't limit the dimensions of the outer container, then this layout can be a real disaster for the user: it will stretch wider and wider and wider - for no apparent benefit.

Some Tips for Elastic Layout

• If you're going to layout using an elastic layout, make sure it works on small monitors. Otherwise, why is it needed at all?
• Limit the size of the elastic box by defining the dimensions of the outer container (using a fluid 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 will ask: what's the difference? Yes, the "correct ideology" is wonderful and wonderful, but not when it comes to user convenience (golden words!);
• Keep in mind that IE 6 and below do not support the max-width property, make sure to set the maximum big text IE doesn't have a horizontal scroll bar at 1024;768 resolution. In any case, you can check out my CSS Zen Garden solution. The next step may be layout for a resolution of 800; 600 with the same condition. As an example, take a look at my hosting site's elastic layout (a limited hybrid of fluid and elastic layouts). I plan to retype it within a year, but even now the example is quite working.

An example of elastic layout.

A couple of days ago, one visitor to this site, Maxim, asked me to show how the site was laid out.

Maxim, the fact is that the entire content of the site (any page) is formed in such a way that it completely expands to the entire width of the browser window, regardless of the screen resolution and the absolute width of the monitor.

Although I myself know little about html-layout (the profile of a programmer, not a layout designer), nevertheless, many years of joint work with layout designers could not but have a positive effect on my knowledge of html/css.

Of course, any ASP.NET proger must at least know the basics of html / css, otherwise nothing worthwhile from pure ASP.NET will turn out.

So, look - the question is in the following aspects:

a) how to arrange the blocks on the site in such a way that there would be one horizontal header on top, three vertical blocks in the center, the extreme ones of a given width and adjacent to the edges of the screen, the middle “rubber” one and placed between the extreme blocks. Under all these blocks, a footer is placed, which, like the header, occupies a horizontal 100% position.

b) how to force all blocks to be in exactly the specified positions without overlapping each other and not moving out when the content inside them changes.

Layout based on tags