If all users to access our site with browsers whose windows were all the same size would be an almost perfect world and the developer could have a perfect control of your layout.
But we know that our reality is quite different, Long ago I gave up to the developer to “cheat” and create websites with a standard size such as 640, 800, 1024 pixels. But doing so has always been an illusion, and I say this even before we think of mobile devices.
Responsive layout – Improved Progressive
The big secret is to make fluid layouts, setting aside – not entirely – the pixel unit. In its place we work with proportional units (percentages).
An important note a layout to be considered responsive besides having a fluid layout you must use images and flexible media and also the media queries .
Converting into practice
Take a look at the example of the layout below. We use it as a reference for converting to fluid.
Formula fluid layout
To convert a layout that is based on pixel and is proportional fluid use the following formula:
Goal / Context = Result
Applying the formula
Let’s take a look at how we can apply the formula in our sample layout.
We will base our proportions in a size, in this case 960 pixels wide. Our reference layout has this size. It would be the maximum size of our layout. Everything within it is proportional.
If we look at our layout realized that the header and footer occupy the entire width of the layout, i.e., they extend the full width of the layout. It soon becomes very easy to see the result of the application of our formula. See:
The columns of the left and right are 240 pixels wide within 960 Total pixels. For us to get a proportionate measure we use the same formula, just changing the values. See:
The calculation is quite logical. We realize that the columns extend a quarter of the width of our page, just the proportional value is 25%.
Now we will convert the center column of the page. In the example we take into consideration that it is positioned without being floated. Its positioning is done with banks, then your CSS would be:
The 250px values on the left and right are used to match the center speaker in the middle of the two columns. Now we have to convert these values to share. The formula with its result is:
The CSS rule looks like this:
In the above examples it seems that we will always divide the total amount of the page. But often the context changes. For example look at our layout columns of 220 pixels.
In this context the division would not be 220/960. The result would be 22.9166667% of its parent element (element with 460px) By doing this we are telling the browser to render about 23% 460.
Note that now we want to let the elements in proportion to the central element that has 460 pixels, so the correct formula would be:
In the latter fixed conversion fluid sample to note that we use the layout of the context element in our formula, the context here is the element 460 pixel where the other two elements 220 pixels were within.
See the layout with the measures as a percentage.
In this quick tutorial I wanted to show an example of how to convert a fixed layout fluid. The secret is the formula target / context. This is what I need to have a responsive layout? no. This is only the first pillar to have a responsive layout quality.