RESPONSIVE WEBSITE LAYOUT

Responsive website layout or responsive web design can be described as an approach that suggests that design should be such that it responds to the behaviour of the user. The environment  is based on screen size, platform or orientation. The approach consists of flexible grids, and images, layouts, and clever use of CSS media  queries.

Responsive against Adaptive web design

Both of them seem to look the same. But, the fact of the matter is that they aren’t . Both approaches tend to complement each other. It’s the content which is the ultimate decision maker.

The Flow

It’s a general common sense that as screen size becomes compact or small, the content tends to take a vertical form and the everything below is pushed down. This is called flow. It’s up to you that whether you use pixels or points, but soon one tends to get used to it.

Relative units

The screen can be a desktop, a mobile screen or anything. The density of pixel can vary, so the units need to be flexible. This is where units like percents are used. So, this means if you make an item 50% wide , it will take half of the screen or viewport.

Breakpoints

Breakpoints help to change the layout, at predefined points. This means that if there are 4 columns on a desktop, there are only 1 column on a mobile device. Most CSS properties can be converted from one breakpoint to another breakpoint. Ultimately, as already told it’s the content

which is the deciding factor. One, however, needs to be cautious, for if it is difficult to comprehend, that what influences what.

Max and Min Values

It’s a great thing that the content occupies the whole dimensions of a screen, like a mobile device because this means that the user can get a clear view of the content and can read it well. But, if you overdo it and the whole content stretches the whole width of the screen, then it tends to become senseless. This is where the MIN/MAX values helps. Example : Having a width of 100% and width of 1000px means that the content will occupy the whole screen. But, it’s important that one does not go over these figures.