A problem that has faced web designers for some years is the type of layout their site should use—should it be fluid, fixed width, have the benefits of being elastic, or a hybrid version that draws on the benefits of a mix of these layouts?
The type of layout we choose to use will of course depend on client requirements—making it a fluid layout means we are effectively one step closer to making it responsive; the difference being that the latter uses media queries to allow resizing of content for different devices, not just normal desktops!
To understand the differences, and how responsive layouts compare, let's take a quick look at each in turn:
- Fixed width layouts: These are constrained to a fixed width; a good size is around 960px, as this can be split equally into columns, with no remainder. The downside is fixed width makes assumptions about the available viewport area, and if the screen is too small or large, it results in lots of scrolling which affects the user experience.
- Fluid layouts: Instead of using static values, we use percentage-based units; it means that no matter what the size of the browser window, our site will adjust accordingly. This removes the problems that surround fixed layouts at a stroke.
- Elastic layouts: They are similar to fluid layouts, but the constraints are measured by type or font size, using em or rem units; these are based on the defined font size, so 16px is 1 rem, 32px is 2 rem, and so on. These layouts allow for decent readability, with lines of 45-70 characters; font sizes are resized automatically. We may still see scrollbars appear in some instances, or experience some odd effects if we zoom our page content.
- Hybrid layouts: They combine a mix of two or more of these different layout types; this allows us to choose static widths for some elements while others remain elastic or fluid.
In comparison, responsive layouts take fluid layouts a step further, using media queries to not only make our designs resize automatically, but also present different views of our content on multiple devices.
How do we set the available space though, and be sure that our content will zoom in or out as appropriate? Easy—we can do this by adding the viewport directive to our markup; let's go and explore what is required to allow our viewport to resize as needed.