Adaptive - Fluid - Responsive Design
What is the difference between Fluid, Adaptive and Responsive layout? How to apply them correctly?
Let's look at the differences of approaches and try to formulate one general instead of three.
When the mobile web was not even in the wildest fantasies, the whole Internet was on desktop computers with small screens. Optimized for 1024 at 768 resolution and Internet Explorer 5 - proudly wrote then on the sites. But time passed, the screens grew and it was necessary to adjust to it somehow.
Fluid Layout
Fluid layout is layout with elastic width - in percent. Except for the minimum and maximum width. The height in the web is generally not customary to ask - it usually adjusts to the content.
When the range of devices with the Internet expanded and the first mobile browsers appeared, the task arose to somehow adjust to them. Simple fluid here already could not cope - it was necessary to rewrite the styles. One of the first, in 2006 appeared technology adaptive layout Mark van den Dobbelstina. In the article on A List Apart Mark suggested adding classes when loading or resizing windows and for each range of hanging styles. Prior to the first implementation of media expressions in Safari there were two years.
When at the beginning of the tenth years there appeared for what to adapt and adapt - mobile browsers and media expressions - books appeared that gave the names to the approaches: "Adaptive Web Design" by Aaron Gustavson and "Responsive Web Design" by Ethan Marcot. The approaches of Aaron and Ethan continued Mark's ideas, but with more modern technologies and were somewhat different in the direction of thought. "Adaptive Web Design" Aaron offered to flexibly adapt sites to the capabilities of devices and browsers. An important part of this philosophy was unobtrusive JavaScript with progressive improvement - all over the semantic markup. Although Aaron did not write about this completely, today it is considered that the main thing in adaptive layout is the binding to specific permissions and devices.
Ethan’s "Responsive web design" put in the chapter three things: a fluid layout, flexible pictures and media expressions. All sizes and indents Ethan offered to indicate in percentages with crazy fractions for accuracy. A distinctive feature of the approach was a smooth change of the site, with an orientation not on specific devices, but on content. That is, your fluid layout looks good not only on the iPhone and iPad, but also at any point between them.
Mobile First
A little later Ethan formulated another important principle in the book "Mobile First". If until then the starting point for adapting the layout was the desktop version, then he proposed to turn the scheme over and start with the mobile version, and then improve it. Why is that? Because it is easier to complicate the simple, than to simplify the complex. Think about it! And also because there is no temptation to just hide the hard-to-adapt and disrupt mobile users.
Well, it became clear? Here's an adaptive, that's responsive ... Mmm, no, not really. Because of the confusion between the adaptive layout technique and the philosophy of adaptive web design, because all these approaches are perfectly combined and no longer trace a clear boundary between them - because of all this, I spat on the terminological purity and began to call everything this is an adaptive design or adaptive layout. This concept has always been wide enough to accommodate all other methods. And the principle of discrete adaptation from the sizes of devices and without fluid made sense about 10 years ago. With today's variety of devices rely on specific sizes and hard to switch between them - then once a very painful miss. Moreover, no one bothers you with completely fluid layout to add the adaptation to the required permissions.
Well, how do I now make up? Just! First, make a mobile fluid layout, which fits well into small devices. And when the sizes of the screen or windows start to grow - start to use the appeared space to improve the interface. A side column appears, the second one, the sizes of pictures grow and new permissions are uploaded and so on. That is, media expressions do not change styles when you get to the screen of the most fashionable phone, but when you need it for the content of the site and the convenience of the user. We do just that and teach you how to do it on the intensive by advanced layout.
To make a good adaptive site, you need to understand many nuances: viewports, media expressions, adaptive pictures and more. Today we took the first step and sorted out the approaches: it turns out to be only one. About the rest we'll talk.
Related Articles
Thank you!
Will be posted after admin approval.
Upload more
