A key part of our journey through the essentials of responsive design is laying out content on the page—in the early days of the Internet, this was a simple process!
With the advent of mobile devices (and those non-PC devices) that can access the Internet, content layout has become ever more critical; for example, how many images do we have, or do we include content X, or show a summary instead? These are just some of the questions we might ask ourselves. It goes to show that it can open a real can of worms!
To simplify the process, we can use grid or fluid-based layouts. Throughout the course of this chapter, we'll take a look at using them in more detail; we'll start with setting the available viewport, and take it right through to future grid-based layouts.
In this chapter, we will cover the following topics:
- Introducing grid layouts and understanding different types
- Setting the available viewport for use
- Exploring the benefits and mechanics of using grid layouts
- Implementing a prebuilt grid layout
- Exploring the future of grid-based template layouts
Curious? Let's get started!
For many years, designers have built layouts of different types; they may be as simple as a calling card site, right through to a theme for a content management system, such as WordPress or Joomla. The meteoric rise of accessing the Internet through different devices means that we can no longer create layouts that are tied to specific devices or sizes—we must be flexible!
To achieve this flexibility requires us to embrace a number of changes in our design process—the first being the type of layout we should create. A key part of this is the use of percentage values to define our layouts; rather than create something from the ground up, we can make use of a predefined grid system that has been tried and tested, as a basis for future designs.
The irony is that there are lots of grid systems vying for our attention, so without further ado, let's make a start by exploring the different types of layouts, and how they compare to responsive designs.