- Unless your web-building workstation is buried deep in the earth, you've probably heard the term, "Responsive Design". Or maybe, "Responsive Web Design". Responsive Design is far more than last year's buzz phrase. It's the answer to particularly vexing challenges now facing web designers. The problem is the ever-growing number of internet capable screens of varied widths, heights, and higher and higher resolutions. Most of which can change orientations and thus, dimensions, with the flip of a wrist.
Before we get into a more or less formal definition of Responsive Design, let me show you to it in action, practically applied. Here's the Boston Globe Site. And, like many newspaper websites, it's laid out in a series of columns. Much like newspapers themselves. So, if I scroll down over here, you can see that there's one, two, three major columns up top, and, as I start to go below, we still have kind of a three-ish format, although it changes somewhat.
Now, maybe there's five across the middle, and then it's back to three or four, depending on how you count them. And then down towards the bottom, we're back to like five, so as you can see, it's definitely a grid-type layout. Now, let's go back up top, and watch what happens when I start to make the windows smaller, just by dragging it in from the right. You can see things begin to shift around. But they largely stay in the same proportion.
Now when I get to a certain break point, things change. There we go. Now we have two major columns up top, and let's scroll down and see what happens down below. Again, two, back to four here, three or two, depending on again, how you look at it. And so on. Now let's go in a little bit further. And now, we've cut to one. This is what's called a linear column layout. The term, Responsive Web Design, and the philosophy behind it, came from a gentleman named Ethan Marcotte, in a May 2010 article in A List Apart.
Now Ethan is far more than a theoretician. He was the primary consultant who worked with the Boston Globe on their re-design that we were just looking at. If you haven't read his article, it's definitely worth your time. Here's the link. The primary take-away of the article is that Responsive Web Design has two key components. Fluid grids, and media queries. We'll explore each of these concepts fully in the other lessons in this chapter, but I want to give you a brief intro to both, starting with fluid grids.
Again, let me show rather than tell. Here's and example site, also by Ethan, that implements fluid grids by themselves. Again, I'm going to reduce the window size and let's watch what happens. Now notice that, again, the columns are getting smaller but they're maintaining the same proportions. As we get further and further in, that continues to happen. The columns on the left and the column on the right all remain exactly the same width. Now, if I continue to go in, you can see that we start to get into problems.
And that's because this is just the fluid grid concept. This is not the other part of Responsive Web Design, but, as a fluid grid, it does work very well up to a certain point. As the phrase, fluid grid suggests, there are two components to fluid grids. First, they use a grid-based design. The grid is used by many designers, both in print, and the web. Let me show you a comp that depicts how grids were used in the example page I just demoed.
You'll notice that the first and last columns are confined to the width of a single column on the grid, whereas the main content in the center takes up five columns. So, the basis of a fluid grid is the grid itself. The other aspect of the grid, just as obvious visually, but so important I have to mention it separately, is consistency. Both the columns, and the spaces between the columns, the gutters or margins, are a consistent width across the page.
The width adjustment is handled through CSS, which uses percentages, for a declared width. There's a whole mathematical formula behind the concept of fluid grids, which I'll cover later in the chapter. But right now, I want to give you a brief intro to the other main part of Responsive Web Design, media queries. Media queries are a widely supported CSS3 specification, that allows styles to be applied conditionally. In code, a media query can be stated within a link or an import tag to an external style sheet, via the media attribute, which can have numerous arguments.
Here we see three, only screen, min-width, and max-width. Or, the media query can also be included in an @media rule, like this one. I'll be exploring media queries in depth later in this chapter as well as fluid grids. But the take-away is that they give you the power of Responsive Design, which can create sites that are the answer to today's challenging, multi-screen web.
- Structuring fluid grids
- Adding a new fluid grid layout
- Adding building-block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Building media queries from scratch
- Working with additional media queries
- Handling orientation changes
- Manipulating CSS
- Adding new media