Modular Grids

Couple months ago while I were designing a website I remembered a technique I had long forgotten. I used to use this technique before I moved from print design to web design about eight years ago and it was, for me, an essential way to utilize modular grids better. Grids in design are kind of like the scales in music. They give you a way to anchor your layout elements and typography to a certain rhythm.

What is a modular grid

A modular grid is a grid which has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. Modular grids are created by positioning horizontal guidelines in relation to a baseline grid that governs the whole document. Baseline grids serve to anchor all (or nearly all) layout elements to a common rhythm. [1]

Modular grid

Illustration from the book titled Thinking with type, by Ellen Lupton.

How to use a grid

The thing is, I don’t actually even know the reason why I abandoned this good practice when I moved forward on my career. I might have though that the same practices won’t work in the digital world, but oh boy, I was so wrong back then.

This technique is also so bloody simple that I wouldn’t be surprised to hear if most of you are already doing something similar.

My method is this: While you are aligning elements to a grid, zoom out the layout (in browser or Photoshop) so much that the size of the layout is around 30-40% of the original and about the size of the iPhone’s screen in landscape orientation.

Zoomed to 33,3% in Photoshop

This way it’s much easier to see the balance of the whole layout—if it works or not. I also promise that it will make you much faster (and hopefully better) designer. At least that is how I feel it transformed my own process. Of course, after you have zoomed back in to see the layout in its real size, you have to then fine-tune elements and typography and start working on the smaller details.

Remember though that not all layouts work the same way and because of that you shouldn’t always force elements to a grid.

Tools to get you started

There is this tool called Modular Grid Pattern which has a Photoshop extension which allows you to create modular grids directly inside Photoshop. Then there’s also this interesting experiment which uses a fluid modular grid framework. There are also a number of tools that allow you to create and use responsive grids, but they are mostly multicolumn grids (with or without baseline grid) and not modular.

Tools are just tools though and the best way to actually start learning is to pick or make a grid yourself and start using it. Check also my resources below, thegridsystem.org for example has a lot of interesting articles and templates if you want to dive deeper.

Modular Grid Pattern App

Screenshot from the Modular Grid Pattern app.

Further reading

Extending CSS With Sass

CSS is designed primarily to enable the separation of content from presentation, including elements such as the layout, colors, and fonts. This separation improves content accessibility and provides more flexibility and control over the presentation. CSS is quite flexible language on its own, but as websites become more and more complex we sometimes need to have more control.

I’m using Sass to extend the basic behavior of CSS and this post is mostly about some basic things I’m using. I’ll also assume that you know something about Sass already and that’s why I won’t dive deep into what it actually is. If you are running OS X, you can get Sass up and running using these two commands below. The first one installs Sass Ruby gem and the second one translates your .scss file into a .css file.

1
2
gem install sass
sass --watch style.scss:style.css

Partials

Using Sass’s @import you can organize your styles into a smaller partials. @import in Sass works a bit differently if compared to CSS @import statement. The difference is that when Sass is processed all the partials will be combined into a single CSS file which reduces unnecessary HTTP requests and speeds up the loading time. I usually have one “main” Sass file where I have all my variables, mixins, etc. and where I do the importing.

1
2
3
4
5
6
@import "fontface";
@import "reset";
@import "header";
@import "content";
@import "footer";
@import "print";

This way you can separate different sections/features.

Variables

Variables are good when you need to, for example, use the same colors again and again. They allow you to specify widely used values in a single place and I usually specify them as the first thing in my main stylesheet.

1
2
3
4
5
$color-red: rgb(124,42,0);
$color-blue: rgb(0,109,143);
$color-green: rgb(55,87,25);
$font-body: sans-serif;
$font-headers: "PTSansCustom", Arial, sans-serif;

And then later we can use them like this:

1
2
3
4
h1 {
  font-family: $font-headers;
  color: $color-blue;
}

The benefit of this is that when you need to later adjust or change that shade of blue, you only need to change it to one place.

Converting Pixels to EMs

One of the most useful features for me has been the ability to convert pixels to EMs without the need to use calculator. This function below does that and it works by taking two arguments, pixels and context. You can either use the default context and specify only the pixels you want to convert – or you can specify pixels and a custom context for the conversion.

1
2
3
4
5
$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

And then later this function can be used like below (converts 36px to EM units):

1
2
3
h1 {
  font-size: em(36);
}

If you’ve converted all your pixels to EMs you can even scale the whole layout inside Media Queries with this simple percent conversion:

1
2
3
4
5
6
7
@media screen and (min-width: 60em) {
  body { font-size: percentage(16 / 16); }
}

@media screen and (min-width: 80em) {
  body { font-size: percentage(18 / 16); }
}

Making a simple grid system

Making your own grid system is also pretty straightforward in Sass. The following example is a Sass @mixin from David Demaree’s article on A List Apart which takes one argument—$span—which will be passed into our @mixin as a variable:

1
2
3
4
5
6
7
8
9
$column-width: 21em;
$gutter: 1.5em;

@mixin grid($span) {
  float: left;
  margin-right: $gutter;
  margin-bottom: $gutter;
  width: ($column-width * $span) + ($gutter * ($span - 1));
}

And then later that mixin can be used with containers using simple @include:

1
2
3
4
5
6
7
8
9
10
11
12
header {
  @include grid(3);
}

article {
  @include grid(2);
}

aside {
  @include grid(1);
  margin-right: 0;
}

To make this a bit easier to understand, our grid (layout) would now look like this when containers are laid on top of it:

Grid

More Resources

I’m just scratching the surface here on what’s possible, and I suggest you to read more about some of these techniques from A List Apart and from the resources I’ve provided below.

Scaling with EM units

Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries which are targeting larger screen sizes.

The reason why I started doing this, is that I wanted to rethink my current approach to responsive design and try something which would make the process at least a bit easier.

Warning: You’ll need to view my demo on at least 24" or 27" monitor with 1920×1200 resolution or bigger. Otherwise you won’t see this method in full effect and it might be harder to understand the benefits.

Demo viewed on 27" and 15" screens:

The idea is that when the screen size grows, the demo still takes approxi­mately the same amount of screen estate.

CSS and @media queries

This method makes most sense when combined with mobile first approach. After you’ve reached the “optimal desktop size” you can start scaling the layout up for larger screen sizes. The most important thing is to specify all units in your stylesheet with EMs, so that we can scale everything by changing body’s font-size. That works because EMs are relative to parent element’s font-size.

You can easily figure out the needed break points by scaling the window bigger and looking when the layout starts to break apart or look awkward. That’s the point when you’ll want the next @media query to trigger and scale the layout a bit bigger.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
  font-size: 81.25%;
}

@media (min-width: 68em) and (min-height: 53em) {
  body {
    font-size: 87.5%;
  }
}

@media (min-width: 75em) and (min-height: 57em) {
  body {
    font-size: 93.75%;
  }
}

@media (min-width: 80em) and (min-height: 62em) {
  body {
    font-size: 100%;
  }
}

Check out my demo to get a better picture of this. Try also scaling the browser window bigger/smaller + remember to do the testing on a big screen.

Images

I recommend using either SVG or some sort of adaptive images approach with this technique. You can get going with just one image version, but you should remember that when you optimize for the largest size possible it’s usually way too heavy for mobile devices + can also look quite awkward when browsers scale it down too much.

The future

This method won’t work with all designs, but at least when combined with a design which has elements which are somehow relative to the viewport dimensions, it makes it much easier to adapt the layout to different sizes.

Also: I heard two days ago that Webkit nightly builds started supporting viewport-relative lengths through the “vw” and “vh” units in CSS. In addition to Webkit, IE9 is the only browser out there right now that supports these new units. We cannot probably start using them right away, but they’ll open up many new possibilities to make it much easier to scale elements according to the viewport. Before we reach the point where all major browsers support these units we can use this EM method.

Resources

Please note that the demo layout I’m using is copyrighted work and cannot be used as a template/boilerplate for your work. The actual site will be launched later on different URL. The actual site is here. ❦

Adaptive vs Responsive, What’s The Difference?

There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.

Resposive design is a subset of adaptive design. Responsive design is fluid layout only, while adaptive design is fluid layout combined with progressive enhancement.

Responsive design” is a subset of a larger concept which is called “Adaptive design.” When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).

Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.

Finally, “Adaptive layout” means a layout done by combining multiple fixed widths. Right now, I feel that Adaptive layout—when done right and when fixed widths are combined with fluid widths—is one form of responsive design and not just an alternative to it. Zeldman shared a bit similar idea in his blog post from 2011.

Adaptive design explained

Update v1. If my post made things look more complicated than they actually are, then this all in short: Resposive design is a subset of adaptive design. Responsive design = fluid layout only, while adaptive design = fluid layout + progressive enhancement. ❦