In 2009 Ethan Marcotte wrote the first article on flexible grids. Even after 5 years it’s still the same rules.
If you want to see where it all began you can relive that famous article, but I think you should just keep reading and get the scoop seeing as you’re already here. I’m not going to deep dive into all the tips and tricks to make sure your responsive design is perfect in every scenario… it’ll take this entire site for that. Instead, I’m going to cover the basic theory so that you have a better understanding moving forwards.
In 2009 Ethan Marcotte wrote the first article on flexible grids and, even after 5 years, it’s still the same rules you need to follow to achieve NIRVANA*.
*No guarantee that you will /actually/ reach Nirvana.
If you want to see where it all began you can relive that famous article, but I think you should just keep reading this article to get the information you need to start building responsively seeing as you’re already here.
First, what we are NOT going to do
I’m not going to deep dive into all the tips and tricks to make sure your responsive design is perfect in every scenario… that’s why I’ve built you an entire site. The problems with responsive design do not come from the basic three ingredients, but instead from real-world implementations with bizarre content requirements, difficult page layout requirements, adding to current browser features and ensuring older browsers still work. This 3 part tutorial will not go into those details but the remainder of the site will.
Second, what we ARE going to do
I’m going to cover the basic theory of responsive design. The three ingredients of flexible grids, flexible images and other media, and media queries.
GETTING FLEXY
To illustrate the fundamentals we’re going to start with a typical run-of-the-mill website based on a fixed width 960px canvas.
The most basic websites are usually made up from the following ingredients:
- Header
- Logo
- Navigation
- Body
- Content
- Sidebar Content
- Footer
- Copyright
- Social Links
Step 0 – Fixed Grid
Like I said there’s nothing special here. Also at this point I’m going to warn you that it’s not going to be the best-designed layout in the world, but in this case, the focus should be on the technique not the aesthetics of the design.
See the Pen RWD Introduction Lesson 01 by Justin Avery (@justincavery) on CodePen
The site is made up of the elements that I’ve mentioned above and you should already be able to see that it doesn’t quite look right when you’re viewing it on this page. It’s being rendered inside of an iframe and the width of the site exceeds that of the viewport it is sitting within, thus forcing a horizontal scroll.
There are fixed pixel sizes applied to each of the elements as well which I will highlight below…..
.container {
width: 960px;
}
.header {
width: 960px;
height: 100px;
}
.logo {
width: 100px;
padding: 10px;
}
.navigation {
width: 840px;
}
.main-nav {
width: 800px;
}
.main-nav li {
width: 198px;
border-left:1px;
border-right:1px;
}
.content {
width: 600px;
padding: 30px;
}
.sidebar {
width: 280px;
padding: 10px;
}
.footer {
width: 900px;
padding: 30px;
}
Setting the right viewport
When getting started building responsive designs I’ve found that 80% of the problems I get emailed about were fixed with the addition of this one line between the <head></head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1" />
When the iphone came out and we had a whole bunch of really big websites on really small screens Apple came up with the idea of making the viewport of the screen 960px wide to match what most of the websites were built towards. This allowed the whole site to kind of zoom out to fit on the screen and allow the double tap to zoom in on the content to find the tiny little link that we needed our tiny pinky finger to tap on.
By adding that one line it reset the viewport width to be the size of the device itself (therefore this works on EVERY device today and ALL new devices built in the future) and it sets the scale to 1 (which means it’s not zoomed in or out). If you’re interested we’ve covered all the viewport meta element options in another post.
Right, with that added into the head we can move to making things squishy.
Getting Flexible
Responsive design is all about letting go of a bit of control and learning to embrace that. The first thing we need to do is limber up our design. It would be far too hard and take far too long to work out every single size of the site and come up with the perfect layout for each width. Instead we find the major points of change and then let everything squish and stretch between them.
To do this we have to throw out the Pixels and embrace the % and EM units.
Working out the maths is pretty straight forward as well. To get the result you need to divide the target by it’s context and use that as a percentage. Take a look at the CSS below… for each PX value I’m going to take the value, then work out the parent contain size (the context), and divide.
.container {
/* width: 960px;*/
/* The container has no parent, so I'm going to set it to 100%. If I want to avoid it stretching too
far then I can apply a max-width value to it as well. To really illustrate the stretchyness I'm going
to extend the max width much larger.
*/
width: 1200px;
max-width: 100%;
}
.header {
/* width: 960px;*/
/* The header has a parent, the container. So I'm going to do the math. 960 / 960 = 1
1 * 100 = 100%
*/
width: 100%;
}
.logo {
/* width: 100px;
padding: 10px;
The logo is 100px wide and is contained within the header. So this time I'm going to do
100 / 960 = 0.1041666666666667
0.1041666666666667 * 100 = 10.41666666666667%
The padding is also target / context, but because the padding is one decimal place lower than
the width I'm just going to move it isntead of working it out again.
padding: 1.041666666666667%;
*/
width: 10.41666666666667%;
padding: 1.041666666666667%;
}
.navigation {
/* width: 840px;
The navigation is 840px wide and is contained within the header. So this time I'm going to do
840 / 960 = 0.875
0.875 * 100 = 87.5%
*/
width: 87.5%;
}
.main-nav {
/* From here on in I'm going to assume you know that we need to take the target / context
figure and times it by 100 to get the percentage value... and I'm just going to include the value.
width: 800px; 800 / 840 = 95.23809523809524%
padding: 0 20px 20 / 840 = 2.380952380952381%*/
width: 95.23809523809524%;
padding: 0 2.380952380952381;
}
.main-nav li {
/*
width: 198px;
border-left:1px;
border-right:1px;
198 / 800 = 24.75%
Because we can't provide anything smaller than a 1px border I'm not going to change that at all..
*/
width: 24.75%;
border-left:1px;
border-right:1px;
}
.content {
/*width: 600px;
padding: 30px;
600/960 = 62.5%
30/960 = 3.125%
*/
width: 62.5%;
padding: 3.125%;
}
.sidebar {
/* width: 280px;
padding: 10px;
280/960 = 29.16666666666667%
10/960 = 1.041666666666667%
*/
width: 29.16666666666667%;
padding: 1.041666666666667%;
}
.footer {
/* width: 900px;
padding: 30px;
900/960 = 93.75%
30/960 = 3.125%
*/
width: 93.75%;
padding: 3.125%;
}
If you follow all of those rules then you should end up with a page that looks a little bit like this
See the Pen RWD Introduction Lesson 02 by Justin Avery (@justincavery) on CodePen.
So that’s us getting flexible…. but what about if you’ve got images on the site? How do we make those responsive?
Fortunately that’s the next step, making our media flexible.
