With the advent of mobile devices, a full world of screen sizes appeared. And responsive designs, such as fluid layout solutions were developed to offer visitors a cool and easy-to-navigate website.
Responsive web design patterns are constantly evolving, but there are a handful of established patterns that work well across desktop-size and mobile devices.
For instance, grid-based designs are all over the place. They are basically fixed-width squares which fall to the following row when there isn’t enough room. Grid-based designs are very common on portfolio-type websites (e.g. Portfoliobox), as well in “featured content” sections.
Another very common responsive design pattern is used by Facebook, where all elements adjust its width and font size so that they always fit on-screen, regardless of its width.
A fluid layout consists primarily of a flexible grid, with two or more columns.
On large or medium screens, it usually remains the same size, simply adjusting the margins on wider screens (usually centering content on screen to prevent having an area that’s too-wide to read comfortably.
On smaller displays, a fluid layout causes the main content to reflow, while columns are stacked vertically.
One major advantage of this pattern is that it usually only requires one breakpoint between small screens and large screens.
This layout takes advantage of CSS features, such as “box-sizing” and margins and provide a fluid content area (width adjusts to fit the available space) while maintaining a fixed-width sidebar.
This makes it very suitable for blog pages, how-to tutorials, and in most situations where there’s mainly text on the content area, and a sidebar is used for navigation links (which must remain visible at all times).
Example of fluid layout with fixed-width sidebar
Below is a simple example of this fluid layout, with a sidebar on the right. The sidebar is always 200px wide, with the main content area adjusts to cover the remainder of the screen width.
This example does not make columns with the same height but it can be done by using the: after pseudo-element and its associated CSS.