How I Created the CSS Grid for HarryLove.org
Background Reading
Designing With Grid-Based Approach
My Approach
1. Determine Your Site’s Main Content
I’m using the epicenter design approach to create the site. In his seminars, Edward Tufte says the only thing that differentiates your site from anyone else’s is the content. Not the fancy graphics, not the layout, not the navigation. So I started by determining what my content is. What is this site’s raison d’être, if you will?
As it is, the text I write makes up the bulk of the content on this site. There are other items from time to time like screen shots and photos, but mostly, I write. Working from the inside out, if people can’t read the text of the articles, the design has failed. So I started with the type as the base element of my grid.
If this site was about photographs, I would have used photographs as the base element. If it was videos, I would have used those. Diagrams, diagrams. Illustrations, illustrations, and so on.
2. Let the Content Determine the Dimensions of the Grid
Having decided that I’m going to use type as my base element, I must determine the dimensions of the type. To do that, I have to make some decisions about the type.
First, it must be readable to me. I’m 34. I wear glasses when I’m on the computer. I don’t have a strong prescription, but when type is too small, I have to squint pretty hard and I find that annoying. I don’t like re-sizing text with the browser: also annoying. In fact, it’s enough to make me use the back button on a site with otherwise good content if the majority of the text is set below 11px.
I’m making an assumption, based on my content, that the people visiting my site are close to my age or younger. Therefore, I’m following this readable-to-me guideline because I can be reasonably sure that if the type works for me, it will work for the majority of people who visit this site. Younger eyes can read smaller type, usually.
What if I discover later my assumption is incorrect? Answer: I’ll redesign. Make a decision and move on. Without more information you can only go with what you know. Don’t agonize over it.
I went with 16px Georgia using a color of #3f3f3f and a line-height of 24px. After playing around I found this combination to be very pleasing. There’s no science behind my decision. (Well, if there is I’m unaware of it.)
The key property there is the line-height. 24px is the basis of almost every measurement on this site, vertically and horizontally.
3. Determine the Maximum Width of the Layout
Most sites these days are opening themselves up to work on larger screens. 1024px is a typical target. I went with 24px * 45, which is 1080px. Done.
4. Layout the Grid
The site must fit somewhere inside of that 1080px. I decided I wanted a content section on the left and a sidebar on the right. Just two columns. I also decided I don’t want to fill the whole screen from left to right. I like white space on the sides. How much white space?
I could set the columns anywhere on the 24×24 grid if I wanted. I decided instead to go with my pal, the Golden Section. Again, I just find it pleasing. 61.8% of 1080px is 667.44px, but let’s round up to 668px just because we can. So, the wrapping div for the site will have a width property of 61.8% and a max-width property of 668px. Why use the max-width property? I don’t want the reading lines to be too long.
What about Internet Explorer 6, which doesn’t support the max-width property? Answer: IE6 was released in 2001. IE8 is about to be released. To Hell with Bad Browsers! (Yes, I know hacks are available to make it work in old browsers. You’re welcome to use them. I have decided to move on.)
Moving on, within that wrap of 668px I still have to set two columns. Golden Section to the rescue again. The left content column is set to a 61.8% width and floated left. The sidebar takes up the remaining area on the right after applying a small 24px gutter between the two.
5. Everything Else
The top margin is 24px. My head shot at the top is 96×96, a multiple of 24. The sidebar text line-height is 12px, half of 24. The margins between elements is either 12px, 24px, or 48px. I’m sure you get the idea. Take the rest of the things you need to layout and look for a way to apply your dimensions in a way that makes sense to you and to the purpose of the site. That’s all there is to it.
Is everything perfectly aligned to the grid? Not really. A few things are out of place. I tweaked a few elements to make them more pleasing when following the dimensions didn’t make sense. As in all things, use your tools and rules and know when to deviate.
Also, I am not a typographer or graphic designer by training or trade. I just pick things up as I go. Take my advice with a grain of salt. And if you know how I could tighten things up, please say so.
Cheers!
