Ethan Marcotte is widely credited for coining the term "Responsive Web Design" in his 2010 article, "Responsive Web Design", and in his book he defines the core components of responsive web design as follows:
So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:
- A flexible, grid-based layout,
- Flexible images and media, and
- Media queries, a module from the CSS3 specification.
- Ethan Marcotte, Responsive Web Design, p.9
In this article were going to take a look at the first component...
In layman's terms Ethan's "flexible, grid-based layout" means a webpage that proportionally fits itself into any screen it is viewed in.
In other words a layout grid with dimensions that resize relative to the screen size or viewport it renders in; a flexible grid.
If a pages major containing element like the
<body> tag or containing
<div> were given a width of 1024 pixels, as the screen real estate decreased – let's say when viewed on a tablet – it wouldn't make sense to continue to draw the element at a size greater than the screen real estate available right?
The problem with this would be that content like text (that looked great on a desktop) might suddenly get cut off in unpredictable places when viewed on a tablet. Users would have to scroll left and right to read it, line after line. Yikes! What a pain that would be.
It would make better sense to decrease the width of the element to 768 pixels when viewed through a tablet, and by less when viewed on a smaller device like a smartphone.
So how do you find the right width for each and every element where it matters? (And does it really make sense to use a static number like 768 pixels? Not really. There's got to be a better way! Some kind of number that can change as screen sizes change...hmmmm.)
The answer is you use relative measurements when declaring the dimensions of things like grid elements, margins, and/or padding – and with that those elements become variable.
Pretty cool, huh? But what is a freaken' relative measurement!? In a word: percentages. At least that's the one Ethan Marcotte recommends using. He uses the following formula to find them:
Target ÷ Context = Result
...where target is the element in a layout you wish to apply the relevant measurement to, and context is the containing element the target responds to.
Use Case "Practice Problem"
Let's put this into practice. Let's say the container in your webpage, call it
.container, has a width of 960 pixels and within
.container there are two equally sized containers called
...what would there relative measurement widths be?
In this case, using the formula jargon, the context is
.container and since it contains two equally sized grid elements we can easily surmise that since they are equal, each will have a width of 480 pixels (half of 960 pixels).
Rather than use
width: 480px in our CSS for both elements, which would be counterproductive in a device with a 320 pixel wide viewport, we use `width: 50%, and wallah! problem solved across different devices.
Mathematically using the formula this is calculated as follows:
480 ÷ 960 = .5 or 50%
In our CSS we then write:
Now if you were to change the size of
.right-side would proportionally resize themselves to the new container size because they use a relative measurement.
Expand this example out to all grid elements including converting the 960 pixels in .container to a percentage, and you have a responsive grid that will resize itself depending upon the context it renders on.
Forget the Math!
As you can imagine there's quite a lot of math involved in a real-life website project, so rather than calculate all the different percentage for your flexible grid you can use a grid system that does this for you. My preference is to use Susy since it is a Compass plug-in – which you are already using right?
Besides being a Compass plug-in it is extremely flexible and powerful for grid purposes, and I promise you I will publish an article about it very soon!
Want to know when the next article is published? Subscribe here. Thanks for reading!