Adaptive, Fixed, Liquid or Responsive design. What's the difference?

Adaptive, Fixed, Liquid or Responsive design. What’s the difference?

Hi to whoever reading this post. Today I want to talk about such concepts as adaptive, fixed, liquid and responsive website layouts. Many people are confused in these terms, so I want to give some clarification.

The idea for this article I got from a guy messaged me on facebook, so yes – if you would like to know some answers to your questions, and that might be interested to other people – feel free to contact me, and I’ll try to answer you questions in my blog posts.

Fixed Layout

So, we are all familiar with a fixed layout. This is when the widths, heights, fonts, and other elements are defined strictly in pixels and do not change with changes in the size of the browser window. User can shrink size of web browser windows, but  in this case,  that annoying horizontal scroll will appear.

Nowadays, this type of layout is dominating , but is rapidly going away. Of course, there are some people that will not agree with me, but the fact is – that mobile market is growing. So  mobile users would like to have easy and  pleasant experience in using websites.

Liquid Layout

This type of layout is also rarely used in nowadays. Values specified in relative terms (percentages) and content adapts to any screen size. The site will look good and readable only on a limited number of fairly large resolutions. And everything will be too small on mobile device. Just proportionally reduced content and the structure does not change.

Adaptive and Responsive Layout

Adaptive and Responsive layouts are very similar, but each of them has its own characteristics. Adaptive layout is based on the use of pixels and media requests, and responsive only in relative terms, and media queries.

Moreover, in the adaptive design elements can hide and be replaced by others. A responsive design, purpose and functions of the elements are not changing with adjusting resolution of the browser window.

Some people can say, that if adaptive design is used and you shrink down browser window – it will likely jump through the “checkpoints”, which are defined in media inquiries. But I think, if designer is not too lazy – all resolutions will be considered in the process of development.

For example, the maximum width of the screen was 1170px, then we start to reduce the browser window and look for the point when our design starts falling apart, then add media query with the desired resolution, the necessary styles and move on, up to 320px. Nothing complicated … The question of motivation. ( I usually watch Rocky Balboa…or at least listen to original soundtrack to raise my motivation level)

Lets try to wrap everything up:

Responsive layout – it is a type of layout, where the site is designed to provide  easy and smooth experience no matter what device or screen resolution you are using, with a minimum of re-sizing, media requests, and additional code. Without making significant changes to the original layout. All reduced proportionally (reasonably), but when it becomes uncomfortable to read, it will re-size.

But in practice, it is often necessary to use a mixed layout. Since stick to one style (or Adaptive or Responsive) is difficult. But if necessary – it is possible. It is important to understand that when you use only a responsive design, it is necessary to use svg graphics, as the resolution of over 2000 pixels png of your icons will look horrible. And it is stupid to upload image that prepared to be used with high resolutions for devices with a screen of 800 pixels.

If you are interested in the topic of adaptive design, then sign up for updates. Soon we’ll talk more about media queries, Adaptive pictures, fonts, and other interesting things. And that is all for today. You are very welcome to comment and share you thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>