Join Chaz Chumley for an in-depth discussion in this video Discovering fluid layouts, part of Responsive Design with Drupal.
Unlike their pixel-based, fixed-width counterparts, fluid layouts use percentage-based measurements, and are designed to fit any browser size. In the case of Responsive Design this allows for the design to render appropriately in mobile, tablet, and browsers. Instead of having to design various fixed-width designs, fluid layouts allow you to design a single layout and then worry about how content will flow within your document through various responsive techniques. Let's take a look at some examples of fluid layouts, some CSS frameworks that use fluid layouts, and why you would want a fluid design as part of your Responsive toolbox.
Trying to find a good fluid layout only site is actually more difficult than you may think, since everyone is now doing Responsive Design on top of it. If we tab over to Google, and we Google the word fluid layouts, we will see that we return results that date all the way back to 2006 and older. So, fluid layouts have been around for quite a while, the question is why are we just worrying about it now? So that we don't confuse ourselves with fluid layouts that more than likely have responsive characteristics.
Let's go ahead and open up the HTML Rendition of our drupal.responsible website that is part of the exercise files for our premium subscribers. You can locate the inside of Exercise Files/HTML/ responsive.fluid, let's go ahead and double-click on the index.html file to open up in the browser so that we are not distracted with the scrolling slider. I'm going to go ahead and click on the right arrow once to stop it from scrolling. The first thing you should notice is that the layout seems a little wider than our fixed-width version of our theme.
The reason is that unlike the 960 pixel-based design, this fluid layout starts off at 1140 pixels, which is more the standard today with larger monitors. Next, let's grab the right-hand side of our browser and slowly shrink the width of our viewing area and notice how the content begins to reflow without truly breaking our design. Unlike our fixed-width design which is based on pixels, and there is a set unit of measurement, our fluid width design utilizes percentage-based measurements.
So, as the user resizes the browser, the content is able to grow and shrink in response to the viewing area. Already you should be able to see the advantage of using a fluid design, such as a more user-friendly design, the amount of extra white space, similar designs that look good on different screens and most important, the elimination of those horrid, horizontal scrollbars produced by fixed-width designs. However, though, you might be asking yourself what fluid framework if any I am using? I have actually Bookmarked a few for us to take a look at.
The first is the 1140pxl CSS Grid, which the responsive.fluid theme that we are looking at is based off of. Another Grid for you to take a look at would be the twitter Bootstrap, this is another good CSS framework to use as a starting point when you are thinking about fluid in Responsive Designs. The last and not necessarily the least is Skeleton. Skeleton is a Beautiful Boilerplate for Responsive, Mobile Friendly Development and the great thing about these three frameworks is that there is a Drupal theme equivalent that you can use as a starting point for any design.
We now review what fluid layouts are, how they differ from fixed-width, and some of the CSS frameworks that help us in creating a fluid layout. But how do we actually go about converting our fix-width layout into a fluid width layout? The answer is all relative, well, so to speak. Simple math is involved in converting the pixel-based widths to percentage-based widths, and we will discover that next, as we begin to convert our theme into a fluid layout.
The course starts with setting up the Drupal environment in Acquia and defines some basic principles of responsive design before moving on to creating a new Drupal theme with fluid layouts, fluid media, and responsive tables and forms. Chaz also covers writing media queries, which allow you to create different style sheets for each device type.
The course wraps up with a look at Respond.js and content-aware image sizing in Drupal—responsive design tools that can optimize your project for maximum performance.
- What is responsive design?
- Understanding fixed-width vs. fluid layouts
- Working with fluid margins and padding
- Writing a media query
- Creating responsive menus and forms
- Adding min- and max-width support with Respond.js