If you have been working in web design for any time now, you have probably heard the term responsive design, or maybe responsive web design. Responsive design is more than a buzz phrase at the moment. It's the answer to particularly vexing problems increasingly facing web designers. The problem is the ever-growing number of Internet capable screens of varied widths and heights, many able to swap dimensions with the flip of a wrist. Before we get into a more or less formal definition of responsive design, let me show it to you in action, practically applied.
Here's the Boston Globe site, and like many newspaper websites, it's laid out in a series of columns. So if I scroll down, you can see there's one, two, three major columns, but as I start to get below here, there is now five columns going across here, back to three, back to four, it keeps moving around, so definitely a grid type layout. So watch what happens as I start to make the window smaller by dragging it in from the right. You can see things begin to shift around, but they largely stay in the same proportion.
The columns are basically all the same width, and once we get to a certain point, however, the entire layout shifts. Now we have two major columns up top and two columns there. We still have our four columns. Let's continue to move in, and now it's shifted again, so we have our two big columns and single columns here. Let me reopen the window, and let's go into one of the stories, this one on the Kenmore club's heavy metal heyday looks good.
Now take a look at this general layout, one big central column, and then over on the left, and this is the key area to watch. In this section there is a much smaller sidebar. Let's bring it in, and this time when we hit our breakpoints, now the main column takes over the layout entirely, so where did the sidebar go? Well, if you scroll down, it's listed also in a full column, and it's gotten much bigger. So now not only did they move the sidebar, but they really have re-emphasized it.
So, one of the things that you can do with responsive layouts is to shift your layout design around so that it makes sense for the people who are looking at it in a particular situation. This is a so-called Tablet view, so those are all eminently touchable, and let's go down a little bit more and here is the Phone view, again, a single column and of linear layout that will work really well on a mobile device. The term responsive web design and the philosophy behind it came from an article in A List Apart written by Ethan Marcotte.
Ethan is far more than a theoretician. He was the primary consultant who worked with the Boston Globe on their redesign that we were just looking at. You should definitely read the full article if you haven't and here's the URL for you. The primary takeaway 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 movies in this chapter, but I wanted to give you a brief intro to both, starting with fluid grids.
Again, let me show rather than tell. Here is an example site, also by Ethan, that implements fluid grids by themselves. So 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. And as we get further and further in, that continues to happen. The columns on the left and the columns on the right, all remain exactly the same. Now if I continue to go in, you can see 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 incorporated, 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 web. Let me show you a comp that shows 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, while the main content in the center takes up the five columns. The other aspect of the grid, that's a bit obvious, but so important that I have to mention is consistency.
Both the columns and the spaces between the columns, the margins, are a consistent width across the page. The width adjustment is handled through CSS, which uses percentages for a declared width. Now there's a whole mathematical formula behind the concept of fluid grids, which I'll cover in structuring fluid grids later in this chapter, but 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 allow styles to be applied conditionally.
A media query can be stated within a link to an external style sheet via the media attribute, or it can be included in an @media rule. Again, I'll be exploring media queries in depth later in this chapter in the movie titled Exploring Media Queries, but the point you should remember is that they give you the power to create sites that--like the Boston Globe-- present a different layout for differently sized screens. That's a very broad introduction to responsive web design. We'll be diving much deeper into the subject throughout the course, but this should give you the foundation you'll need to take your responsive designs further.
- Exploring the default Fluid Grid Layout
- Adding building block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Adjusting column widths and margins
- Building media queries from scratch
- Handling orientation changes
- Setting up server-side solutions