Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Fluid grid and responsive web design
422
single,single-post,postid-422,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
unicornsarereal

Fluid grid and responsive web design

Unfortunately it requires math.

Fortunately, my iPhone has a calculator.

We’ll start with a basic design to demonstrate the fluid grid that is the foundation of the entire page. Our designs at Seven2 can sometimes be really sexy complex, so every situation is going to require it’s tweaks, fixes, and adjustments, but the core of it will always be the same. We’re going to create a page where every element has a size that’s dependant on the browsers width.

You may be thinking “How do we do this?” (Along with “You’re crazy” and “I love your boots.”)

Let’s take a look at our very basic design.



 

Before we start coding, we want to make sure the design fits a grid, whether fluid or fixed; this will save you heartache and sore fingers later when you’re trying to calculate container widths on your iPhone Ti-81 Graphics Calculator.

 

The design itself lies over 5 columns that are 124px wide with 20px gutters, along with two more columns and gutter spaces that act as a buffer on either side of the main content. Besides saying this because it makes me seem cool and knowledgable, it’ll also be useful later when calculating buffer spaces for those times when you DON’T want 144 empty pixels on either side of your design. Like when viewing this site on a mobile browser, or in the reflection of a charging unicorn’s eyes.

We then mark out our main containers, figure out what’s going to go where, and how big the “where” part of it is going to be.

 

Normally, if we were creating a space for that nifty header, we’d give it it’s own div id or class, and a set width of 705px. The design also comes with 144px of dead space to the left of the main content area that acts as a buffer, so we’d end up with something like this.

#header {
margin-left: 144px;
width: 705px;
}

But we’re trying to make the whole thing flexible, aren’t we? So a fixed width and margin won’t work so well across the board. We want the aspects of our grid; width, height, distance from the sun, etc; to be measured as a relative proportion in relationship to it’s container. We can do this by using the mighty em.

EheM.

Most of you are probably familiar with it but I’m going to discuss it anyway. The em, in typography, is a unit of measurment that is equal to the currently specified point size. It’s usually the size defined by the capital M in a typeface; whatever that pixel measurement may be, that is a unit of 1 em for that typeface. In regards to web design, if, in a css stylesheet, you’ve dedicated a 16px font as the default size for body copy on a site, then 1 em = 16 px. If you’ve set it at 14 px, then 1 em = 14 px, and so on. It all depends on what size that font is set to.

For the sake of this website, we’ve set it at 16px.

body {
background-color: #2a3735;
font-family: “Helvetica-Light”, Helvetica, Sans-serif, normal, 100%;
font-size: 16px;
color: #ffffff;
line-height:170%;
}

Now that we know what 1 em is, we can use that proportion to define width and heights with em units, as well. We know from earlier that our site is made up of 988px broken up between 124px wide columns and 20px gutters. We’ve got a header that spans 705px; in order to make our width relative and yet still accurate to the design, we need to find out how many em’s our header is. We do that by a simple formula (iPhone’s ready…)

705 px / 16 px = 61.75 em

We also know we have 144px of space to the left of our design, so we calculate that gutter using a similar formula:

144 px / 16 px = 9 em

So our code is going to look something like this:

#header {
max-width: 61.75em;
margin-left: 9em;
}

And voila! With minimal math, the header is not only correctly sized, but the size is proportionate to the screen. Add in some flexible image coding:

img {
max-width: 100%;
}

And you’ve not only got containers that resize in concordance with the screen resolution, but you’ve got images that resize intelligently as well. Instead of getting something like our example on the left when a screen is sized down, you get something closer to the right example.

The combination being scalable containers and images that resize fluidly to fit your browser window.  No extra stylesheets, and possibly one or two @media queries to finagle some small details, but this pales in comparison to re-designing and re-writing an entire website 2 or sometimes 3 times in order to compensate for different browsers and platforms.

To play around with the current (and ever-changing build) of this very informative site, you can find it at katieirvin.com/Unicorns/