Responsive web design is here to stay. Jeffrey Zeldman’s press, A Book Apart, has published a book by the name. The HTML5 Boilerplate has responsive elements built into its code base. Everybody and their uncle is promoting their new responsive web template.
Why? Because responsive design allows us to address the needs of many (and conceivably all) screen sizes — from small handhelds to tablets to desktops to giant widescreen monitors — all with one code base.
The Magic is in the Media Query
With the advent of CSS3 Media Queries, we have the ability to create CSS rules designed specifically for a variety of screen sizes. These rules wait in the wing, only being called upon IF and WHEN the device fits the parameters of the media query. As Andy Clarke has written, in his excellent 320 and Up, these media queries make it possible to:
load assets and layout styles progressively and only as they’re needed
Thus, it becomes possible to produce a single “device agnostic, one web boilerplate” for your designs.
It’s a Beautiful Thing
In this short tutorial, I’ll provide both a basic review (or introduction) to the basic concepts of responsive design while building a handy CSS3 Media Query Reporter which you may find handy in your future design projects. (I know I have.)
Then, using that reporter, we will take a first step toward converting a fixed-width grid system into a fluid and responsive grid system. We won’t build the entire grid today, but we’ll gain the concepts which will prepare us to do so.
What we’ll do here:
- Start with a very basic grid.
- Create a little CSS3 Media Query Reporter.
- Make our grid fluid instead of fixed.
- Add a media query to help the grid adjust to small screen widths.
This will equip us with concepts and tools to help us tackle the bigger steps to come.
1: Introduction
In this brief video, I’ll show you what we’ll create today.
2: A CSS3 Media Query Reporter
One of the small challenges in building a responsive layout is deciding when to have certain rules apply.
For instance, at what point will your site make the transition from a single narrow column for handheld devices to a multi-column design? Will you have one big transition (from one-column to many-column), or will you provide an intermediate step or two along the way (one-column, two-column, 8-column, and so on)? And if you want to supply intermediate steps — WHEN will they apply? At 480 pixels wide … 768 … 1024?
One thing that can be helpful in making these decisions is an on-screen media query reporter, which can provide visual feedback as we cross each width threshold.
Let’s use CSS3 media queries to build ourselves just such a tool.
Code for the Media Query Reporter
/* ======================================
MediaQuery-Reporter Styles
========================================= */
body:after {
content: "less than 320px";
font-size: 300%;
font-weight: bold;
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
background-color: hsla(1,60%,40%,0.7);
color: #fff;
}
@media only screen and (min-width: 320px) {
body:after {
content: "320 to 480px";
background-color: hsla(90,60%,40%,0.7);
}
}
@media only screen and (min-width: 480px) {
body:after {
content: "480 to 768px";
background-color: hsla(180,60%,40%,0.7);
}
}
@media only screen and (min-width: 768px) {
body:after {
content: "768 to 1024px";
background-color: hsla(270,60%,40%,0.7);
}
}
@media only screen and (min-width: 1024px) {
body:after {
content: "1024 and up";
background-color: hsla(360,60%,40%,0.7);
}
}
3: Toward a Fluid Grid
With our Media Query Reporter ready, we can use the same basic concepts to build a responsive grid system. In this brief tutorial, we will only take an initial step, but it will get us started in the right direction.
In the downloaded file, style.css, I’ve provided a very basic version of the grid system that comes with the awesome Twitter Bootstrap framework. By stripping it down to just a few lines, we can easily get a handle on what it takes to convert a fixed-width grid to a percentage-based fluid grid.
CSS for the Original Pixel-Based Fixed Grid
.container {
width: 940px;
margin: 0 auto;
}
.row {
margin-left: -20px;
}
[class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span-one-third {
width: 300px;
}
CSS for a Fluid Version of the Grid
.container {
margin: 0 40px;
}
.row {
margin-left: -3%;
}
[class*="span"] {
display: inline;
float: left;
margin-left: 3%;
}
.span-one-third {
width: 30%;
}
4: Media Queries
A fluid grid is a start. But even a fluid grid has its limitations.
Once the screen size becomes too narrow, it does not allow enough room for three columns to live comfortably side by side. This is where the media query comes to the rescue.
In this next video, we’ll complete our basic grid system by providing a single transition. At widths smaller than 768px wide, our design will have a single column, so that the content can easily flow vertically down a narrow screen. But once we have a screen size that is at least 768px wide, the three-column layout will kick in, allowing us to make efficient use of the available screen space.
CSS for our Fluid & Responsive Grid
.container {
margin: 0 40px;
}
.row {
margin-left: -3%;
}
[class*="span"] {
display: inline;
float: left;
margin-left: 3%;
}
@media only screen and (min-width: 768px) {
.span-one-third {
width: 30%;
}
}
Conclusion
Obviously, we will need to do more work to create a full-fledged responsive grid-system. But it will be more of the same kind of work we’ve already begun. With the above concepts in tow, the remaining steps are not difficult. I intend to return with a demonstration of the full process in a later tutorial.