Adaptive layout

What is the difference between rubber, adaptive and responsive layout? How to use them correctly?

Let's understand the differences of approaches and try to formulate one common instead of three.

When the mobile web was not even in the wildest fantasies, the entire Internet was on desktop computers with small screens. Optimized for 1024 by 768 resolution and Internet Explorer 5 browser! - proudly wrote then on sites. But as time passed, the screens grew older and had to somehow adjust to this. At first they were just rubber tables: columns of 25% each, contents of 50%, and in a separate line colspan=3 and a spacer for a minimum width. I hope you did not understand what I was talking about now.

Rubber layout - this is when you set the entire layout and its individual parts not a fixed width, but an elastic one - as a percentage. Except for the minimum and maximum widths. In principle, it is not customary to set the height on the web - it usually adapts to the content. Fix or rubber? - asked the designers of the 2000s about the layout and secretly hoped for a second, more interesting one. Now it is difficult to imagine, but once it was a breakthrough idea that complicated the layout, but took the first step in the right way.

Layout tables are gone, but the rubber layout remains. If you have elastic floats, flexs ... yes at least grids! - it's still a rubber layout. But if the width of the outer container is fixed - this is a fix, no matter how much rubber is inside. Slightly more universal fix, but still. In general, the main thing is that the site moves one way or another along with the window, and not stuck with a brick somewhere in the center or on the edge.

When the range of devices with the Internet expanded and the first mobile browsers appeared, the task was to somehow adapt to them. Simple tires here could not cope - it was necessary to rewrite styles. One of the first, in 2006, appeared the technique of adaptive layout Mark van den Dobbelstein. In an article on A List Apart, Mark suggested adding classes when loading or resizing windows and hanging styles for each range. Two years remained before the first implementation of media expressions in Safari.

When at the beginning of the tenths there appeared for what to adapt and how to adapt - mobile browsers and media expressions - books appeared that gave names to the approaches: “Adaptive Web Design” by Aaron Gustavson and “Responsive Web Design” by Ethan Marcot. The approaches of Aaron and Ethan continued the ideas of Mark, but with more modern technologies and were somewhat different direction of thought.

"Responsive Web Design" Aaron offered the flexibility to adapt sites to the capabilities of devices and browsers. An important part of this philosophy was unobtrusive JavaScript with progressive improvements — all on top of semantic markup. Although Aaron didn’t write about it at all, today it’s accepted that the most important thing about adaptive layout is binding to specific resolutions and devices. The styles switch from one breakpoint to another, that is, you have fixed layouts for the iPad and iPhone, but what you don’t care about between them.

Ethan's “Responsive Web Design” put three things in mind: rubber mock-ups, flexible images and media expressions. All sizes and indents Ethan offered to specify in percent with crazy fractions for accuracy. A distinctive feature of the approach was the smooth change of the site, with a focus not on specific devices, but on content. That is, your rubber layout looks good not only on the iPhone and iPad, but at any point between them.

A little later, Ethan formulated another important principle in the book "Mobile First" . If, until then, the desktop version served as the starting point for adapting the layout, he suggested that the scheme be reversed and started with the mobile version, and then improved. Why is that? Because, to complicate a simple is easier than to simplify a complex. Think about it! And also because there is no temptation to simply hide difficult adaptable and deprive mobile users.

Well, it became clear? Here is adaptive, here is responsive ... Mmm, no, not really. Due to the confusion between the adaptive layout technique and the adaptive web design philosophy, due to the fact that all these approaches are perfectly combined and no longer follow the clear boundary between them - because of all this, I spat on the terminological clarity and began to call everything This is an adaptive design or adaptive layout. This concept has always been broad enough to accommodate all other methods.

And the principle of discrete adaptation of the size of the device and without rubber made sense about 10 years ago. With today's variety of devices, relying on specific dimensions and hard switching between them means that it is very painful to miss one day. Moreover, no one bothers you with a completely rubber imposition to build on the adaptation for the necessary permissions.

So how to make up now? Simply! First, make a mobile rubber layout that fits well with small devices. And when the size of the screen or the window starts to grow - start using the space that appears to improve the interface. A sidebar appears, a second, the size of the images grows and new resolutions are loaded, and so on. That is, media expressions do not change styles when you get to the screen of the most fashionable phone, but when it is necessary for the site content and user convenience. This is exactly what we learn to do on the intensive with an advanced layout.

To make a good responsive website, you need to understand a lot of nuances : viewport, media expressions, adaptive pictures and more. Today we took the first step and dealt with the approaches: it turns out to be only one. We'll talk more about the rest.

Video version

Questions can be asked here .