Converting a fixed pixel design to a fluid proportional layout
Responsive web design has been a prime necessity for every enterprise ever since Google announced that responsive, mobile-friendly websites will see a hike in their search engine rank in 2015.
Fluid web designs, if implemented with precision and proper technique, can adjust themselves to be seen correctly on large screens, small screens, and even tiny PDA screens. Fluid grids enable you to position elements on your page and deploy them out in a visually appealing way, following a specific hierarchy. In this article, we will learn how to transform a rigid design into a fluid proportional layout effectively.
This article is an excerpt from the book Responsive-Web-Design with HTML5 and CSS, Third Edition by Ben Frain, a completely updated version of one of the biggest best selling and most comprehensive books on the latest HTML5 and CSS tools and techniques for responsive web design.
Graphic composites, or “comps,” as they are often called, made in a program like Photoshop, Illustrator, or Sketch all have fixed pixel dimensions. At some point, the designs need to be converted to proportional dimensions when recreating the design as a fluid layout for the browser.
There is a beautifully simple formula for making this conversion that the father of responsive web design, Ethan Marcotte, set down in his 2009 article, Fluid Grids (http://alistapart.com/article/FLUIDGRIDS):
target / context = result
Put another way, divide the units of the thing you want by the thing it lives in. Let’s put that into practice. Understanding it will enable you to convert any fixed dimension layouts into responsive/fluid equivalents.
Consider a very basic page layout intended for desktop. In an ideal world, we would always be moving to a desktop layout from a smaller screen layout; however, for the sake of illustrating the proportions, we will look at the two situations back to front.
Here’s an image of the layout:
The layout is 960px wide. Both the header and footer are the full widths of the layout. The left-hand area is 200px wide, and the right-hand area is 100px wide. That leaves 660px for the main content area. Our job is to convert this fixed-width design into a fluid layout that retains its proportions as it is resized. For our first task, we need to convert the middle and side sections into proportional dimensions.
We will begin by converting the left-hand side. The left-hand side is 200 units wide. This value is our target value. We will divide that target size by 960 units, our context, and we have a result: .208333333. Now, whenever we get our result with this formula, we need to shift the decimal point two points to the right. That gives us a value that is the target value described as a percentage of its parent. In this case, the left-hand section is 20.8333333% of its parent.
Let’s practice the formula again in the middle section. Our target value is 660. Divide that by our context of 960 and we get .6875. Move the decimal two points to the right and we have 68.75%.
Finally, let’s look at the right-hand section. Our target is 100. We divide that by the context of 960 and we get .104166667. Move the decimal point and we have a value of 10.4166667%.
That’s as difficult as it gets. Say it with me: target, divided by context, equals result.
You can use values with long decimal values with no issues in the CSS. Or, if you would rather see more palatable numbers in your code, rounding them to two decimal points will work just as well for the browser.
To prove the point, let’s quickly build that basic layout as blocks in the browser. To make it easier to follow along, I have added a class to the various elements that describe which piece of the “comp” they are referring to. It’s not a good idea to name things based on their location ordinarily. The location can change, especially with a responsive design. In short, do as I say and not as I do here! You can view the layout as example_04–01 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.
Here’s the HTML:
<div class=”Wrap”>
<header class=”Header”></header>
<div class=”WrapMiddle”>
<aside class=”Left”></aside>
<main class=”Middle”></main>
<aside class=”Right”></aside>
</div>
<footer class=”Footer”></footer>
</div>And here is the CSS:
html,
body {
margin: 0;
padding: 0;
}
.Wrap {
max-width: 1400px;
margin: 0 auto;
}
.Header {
width: 100%;
height: 130px;
background-color: #038c5a;
}
.WrapMiddle {
width: 100%;
font-size: 0;
}
.Left {
height: 625px;
width: 20.83%;
background-color: #03a66a;
display: inline-block;
}
.Middle {
height: 625px;
width: 68.75%;
background-color: #bbbf90;
display: inline-block;
}
.Right {
height: 625px;
width: 10.41%;
background-color: #03a66a;
display: inline-block;
}
.Footer {
height: 200px;
width: 100%;
background-color: #025059;
}If you open the example code in a browser and resize the page, you will see the dimensions of the .Left, .Middle, and .Right sections remain proportional to one another. You can also play around with the max-width of the .Wrap values to make the bounding dimensions for the layout bigger or smaller (in the example, it’s set to 1400px).
Now, let’s consider how we would have the same content on a smaller screen that flexes to a point and then changes to the layout we have already seen. You can view the final code of this layout in example_04–02 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.
The idea is that, for smaller screens, we will have a single “tube” of content. The left-hand area will only be viewable as an “off-canvas” area; typically, an area for a menu or similar, which sits off the viewable screen area and slides in when a menu button is clicked on. The main content sits below the header, then the right-hand section below that, and finally the footer area. In our example, we can expose the left-hand menu area by clicking anywhere on the header. Typically, when making this kind of design pattern for real, a menu button would be used to activate the side menu.
As you would expect, when combining this with our newly mastered media query skills, we can adjust the viewport and the design just “responds” — effortlessly moving from one layout to another and stretching between the two. I’m not going to list out all of the CSS here, it’s all in example_04–02 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.
However, here’s an example — the left-hand section:
.Left {
height: 625px;
background-color: #03a66a;
display: inline-block;
position: absolute;
left: -200px;
width: 200px;
font-size: 0.9rem;
transition: transform 0.3s;
}
@media (min-width: 40rem) {
.Left {
width: 20.83%;
left: 0;
position: relative;
}
} You can see that, up first, without a media query, is the small screen layout. Then, at larger screen sizes, the width becomes proportional, the positioning relative, and the left value is set to zero. We don’t need to rewrite properties such as height, display, or background-color as we aren’t changing them.
This is progress. We have combined two of the core responsive web design techniques we have covered; converting fixed dimensions to proportions and using media queries to target CSS rules relevant to the viewport size.
In a real project, we should be making some provision if JavaScript isn’t available and we need to view the content of the menu.
We have now covered the essentials of fluid design. To surmise, where needed, make the dimensions of elements proportional rather than fixed. This way, designs adapt to the size of their container. And you now have the simple target/context = result formula to make the necessary calculations.
In this article, we looked at a general example that showed how fixed dimension layouts can be turned into responsive/fluid equivalents using media queries. For more details on responsive web designing using modern CSS3 features such as flexbox and grid, I recommend giving Responsive-Web-Design with HTML5 and CSS by Ben Frain a read.
About the Author
Ben Frain has been a web designer/developer since 1996. He is currently employed as a Senior Front-end Developer at Bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance.
He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures. Playing indoor football while his body and wife still allow it, and wrestling with his two sons. His other book, Sass and Compass for Designers is available now.
