Grids are good. I’ve said so many times, and I think people are catching on. Not that I’m taking credit for the rising stock of this creative tool among Web designers, mind you; I just wanted to say how happy I am that more and more thought is being put into what it means to use typographic grids as a layout principle in digital media.
What’s even better, a lot of this new thought goes far beyond what I myself would be capable of contributing to the conversation. Take the Blueprint framework, for example (not to be confused with the promising Blueprint content management system from Inventive Labs). It’s a foundation for developing typographic grids using Cascading Style Sheets that was developed by Norwegian tech student Olav Frihagen Bjørkøy and released last Friday after several months of development. It’s an impressive piece of work that’s leagues past what I could have offered in terms of technical insight into how to build grids more efficiently for today’s browsers.
A Framework Is Born
In just a matter of days, Blueprint generated a torrent of interest. Enough so that by Monday morning I was flooded with emails and instant messages from people pointing me to it. I downloaded a copy of the resources, had a quick look around, checked out the examples and was thoroughly impressed. Not currently being in the middle of a project I had no immediate need for Blueprint, but I nevertheless thought to myself, rather shamelessly: “Is there a way I can turn Blueprint into traffic for Subtraction.com?”
Above: Blue in the face. A demonstration of the grid flexibility provided by Blueprint.
So I started a quick email exchange with Olav who, in spite of being just twenty-one and not being a native English speaker, is smart as a whip and can more than hold his own speaking colloquial American. I was curious as to what motivated him to undertake this project and what went into it, and it very quickly turned into this interview, published here for your reading pleasure. Remember: News Channel Subtraction.com is your number one source for in-depth grid coverage.
An Interview with Olav Frihagen Bjørkøy about Blueprint
K.V.
What gave you the idea to develop your Blueprint framework?
O.F.B.
The idea of creating a CSS framework came from an article at A List Apart, where Jeff Croft told of the framework the designers at his company used to create LJWorld.com.
Being a Ruby on Rails developer, the notion of using a framework to circumvent tedious and repetitive tasks was an instant hit in my book.
The first CSS framework I checked out was the Yahoo User Interface Library, but found it to be way too bloated for what I want from a designers framework. I then checked out Jeff’s framework through the LJWorld site, and found it to be amazingly well thought out. They were not going to release it as a framework, so I [humbly] figured it was up to me.
So a lot of Blueprint is based on the works of the designers behind the LJWorld site, a fact I try to mention as often as I can (check out the credits section).
K.V.
Why should someone use the Blueprint framework? And do you think it will encourage people to be more experimental with grids, or just use the same basic grids you’ve provided?
O.F.B.
Well, I think Blueprint gives you a good foundation to build your project on. It isn’t well tested yet, but I hope that after a while, Blueprint will provide a browser-proof way of setting up a grid. That means that you don’t have to worry about problems that you really only should have to solve once (like setting up a grid that works in Internet Explorer 6).
Of course, Blueprint is much more than the grid. I think the default typography, browser CSS reset and print styles it provides more than justify the extra link tags in your HTML files.
We’re also trying to tackle stuff like PNG transparency support for Internet Explorer 5.5+ completely out of the users way, so that if you use Blueprint, PNG transparency will just work. (Soon, at least.) I think that’s the key: taking worries and [previously] solved issues away from the user whenever we can.
I’m not sure if Blueprint will encourage people to be more creative with grids, but I do hope so. We’ve set the default width of a column to be pretty narrow, which gives the user a lot of opportunities right away.
I think that’s a mistake many people make when creating grids: setting the columns to be too wide, so that the grid feels like a constraint. We’re trying to go in the opposite direction, where the grid feels liberating and encourages the user to try out sometimes daunting versions of vertical content flow.
K.V.
Aside from the writings and works of the influences you mentioned — Jeff Croft, Nathan Borror, Eric Meyer, and myself among others — did you turn to influences from the world of print design? For example, Jan Tschichold, Josef Müller-Brockmann, Massimo Vignelli, others?
O.F.B.
While I’d love to say that I’ve studied what print designers have to say about grids, content flow and such (or that I’ve even heard about those guys), all I know about this topic comes from Web design.
I’m sure having perspectives from the print profession (which has so much in common with ours) is a great idea, but I also have to say that the sheer number of high-quality blogs tackling and evolving these techniques today is staggeringly high.
The web design profession evolves constantly, and I think reading blogs are the best way to experience these developments. But yeah, experience from print design is something I really miss having. So please continue writing about that, will you?
K.V.
Haha. Okay, fair enough, I will. So, why do you think Blueprint was received so enthusiastically? And perhaps by extension, why do you think grid layouts are so popular in Web design?
O.F.B.
Blueprint is an unknown, untested and unused framework from an unknown guy launched from a highly irregular blog. This should make it quite clear that the craving for a proper designers framework almost couldn’t be greater.
As Blueprint is just a light breeze of a project, this gap in the market is a vaccuum waiting to be filled.
So I guess what I’m trying to say is that I’m absolutely overwhelmed by the magnitude of the response I’ve gotten on this project, and I do hope others will experiment with creating their own CSS frameworks.
All we can do now is try to live up to the hype. We’ll certainly do our best.
+
Good Interview. I have not been able to try out Blueprint yet but aim to do so very soon. PNG transparency would be amazing at the very least.
Great interview! I’m really glad to see Olav getting some run for this. And I’m glad to see a lot of that work that Nathan, Christian, and I did at LJWorld.com turning into something useful. We talked about releasing it ourselves, but just didn’t feel like we had the time and energy to support it. And, we probably wouldn’t have done as nice a job of packaging and documenting it. 🙂
I downloaded it on Friday and I’m well into my site’s redesign 3 days later. I’ll be writing more about this, but effectively for my money it takes away ALL the pain in the ass of setting up a grid. The more I do this the more I feel like I don’t really want to have to deal with this aspect every time I design a website, I just want something flexible enough for me to get on with other aspects of web designing that I find more enjoyable… so thanks Olav for putting the effort and work in, and thanks to Jeff, Khoi et al for providing the talking/discussions/tutorials and inspiration.
Great Interview, Khoi. It’s great to see that Olav has come up with a solid, clear solution to creating a grid from scratch without going through all the pain initially.
It’s all very impressive.
Not dissing blueprint, but now all the web 2.0 set are acting like they know about grid design because they read your blog post a handful of copycats
Thanks for having me Khoi, and to the guys commenting. This is all very motivating. 🙂
The next version of BP, which will be released any day now, will be an important one: elastic scaling everywhere, lots of fixes for IE, and instructions on how to make all this semantically correct.
Great interview and very timely.
It’s funny how many of us young cats have entered this world of design, user interface, and layout via Web Design. Grid principles and solid layout techniques pulled from the world of print are so important as our medium becomes more and more interactive and dynamic. Designers can get lost in the colors, the function, and all the other trappings of design while neglecting some of these more “core” principles.
I really enjoy this blog and all the hard work you’re all doing to bring some sanity to our medium. Great job Olav and Khoi.
Great interview, and thanks for the link, Khoi. I’ve been using something quite similar that I wrote myself, but having been involved in many open source projects it’s great to be able to pool resources on this. I found that while the Yahoo effort was a nod in the right direction, the design and typography weren’t up to scratch.
If you need any help on cross browser testing, Olav, I know IE bugs a lot better than the back of my hand.
“Being a Ruby on Rails developer, the notion of using a framework to circumvent tedious and repetitive tasks was an instant hit in my book.”
Ever get the feeling these RoR guys have never used another language/toolset?
Now I’m pissed. I had decided to start hacking a grid CSS skin into Sandbox (theme for WP) a couple of weeks ago and along comes this. And obviously both are incompatible (unless I hack Blueprint support into Sandbox, which defeats the whole purpose).
*sigh*
Nice interview, I haven’t tried Blueprint yet, but I’ll surely do on my next project which is grid based. Just sent Olav an Thank you email.
ps: I couldn’t agree more with Jeremy, I myself got into this whole grid, typography, layout stuff because of webdesign, I’m still a noob though.
cheers.
The problem with a CSS framework used for layout is that now the layout is fixed in the content. There is still a large flexibility available in the CSS alone I guess, the lineheight concistency is difficult to setup so that’s really helpful. Perhaps the ideal solution would be some kind of CSS framework that happens purely on the CSS level.
Whilst the ability to quickly and easily set up a grid is something I am quite enthusiastic about, I have to put my UI developers hat on and say that I do have certain problems with Blueprint in its current incarnation.
To me, content and presentation should be kept totally separate. Blueprint, at the moment, seems like it is taking a step backwards on that front. If Olav can make it work, and be semantically neutral (IE, so that we dont have to use “column span-3 prepend-2 first”), then I think I would be much more interested. I guess I will just have to wait and see, and reserve my judgement for when this comes around.
Olav – There’s no doubt you’ve accomplished something here. For me it needs to be worked on more from the semantics point of view. I’ll keep a very interested eye open, though 🙂
I’m cross-posting this (slightly revised) message regarding some common complaints about Blueprint, which I left on Olav’s site, since apparently Fabrice and djeglin didn’t see it there:
As one of the three original authors of the grids component (along with Nathan Borror and Christian Metts), I thought I’d pop in and address a few things (for the record, Olav made a few minor changes to what we did at The Lawrence Journal-World, but the framework is very, very similar. Olav is re-using it with permission and is giving credit where credit is due, so there’s no problem there).
Re: Class naming convention. The visual nature of the span-x class names bothered all three of us a bit when we first put this together, but we quickly came to realize that the benefits greatly outweighed the downsides. As Olav said, there’s really no way to build a framework like this and not use visual naming, and the speed we gained in putting together layouts just made it worth it, in our minds. The three of us are all web standards fans, who stick to best practices as much as possible, but we’re also people working in the real world with real deadlines and we understood that, in the enviroment we were working in, getting real work done very quickly was the most important thing. It’s also important to understand that we used this framework in conjunction with Django’s template language. If you know about Django template’s imheritance, you’ll see how almost all of the presentational nature of things was in our “base” template, and not in our content templates. In other words, the combination of this framework and Django helped to keep content and presentation separate more than you can mange using just the framework itself. Your mileage may vary.
It boils down to this: what’s more important to you? Getting stuff done well and fast, or having 100% semantic class names? To us, the answer was the former. We were often asked to put together layouts in a couple of hours, and non-semantic classnames don’t hurt a darn thing. They may bother your asthetic sense (and mine too, for that matter), but they don’t actually hurt anything at all.
Re: Relative font sizes. If Blueprint ever adds relative font sizes, I for on hope it will be optional (i.e. leave both the relative and absolute stylesheets, and let the end user choose which to include) — I much prefer absolute sizing, myself.
Re: Alternate layout widths. One component of the original grids framework we built at the Journal-World that Olav (nor anyone outside LJWorld) hasn’t seen is a Python script that generates the grids.css file based on a specified unit width, gutter size, and number of columns. Christian wrote this for us, and it works great. Without that script, the grid framework is definitely less flexible. It’s not mine to release, but I may talk to Christian about making it public, now that so much of our other work related to it has been made public.
I’ll second everything Jeff said, and go one further. 100% pure semantic class names and a grid CSS framework are mutually exclusive propositions. You can’t have both – it just doesn’t work.
That said, I also don’t see why visual class names are actually a problem. They’re not preventing you from adhering to a strong semantic structure. Use semantic class names and ids to define the semantic structure and use layout classes to define the visual structure. Separation of concerns is a great principle, but this is a fuzzy area where practicality intrudes on perfection. If you want the benefits of abstraction, you’ve got to give up a little control.
I don’t understand how Yahoo’s grids.css framework is bloated – it’s less than 5k! Five frigging kilobytes! What’s bloated about that?!? And it’s ROCK SOLID across all major browsers.
No, seriously, somebody explain, because grids.css has rocked my world on several projects in a row and I’d love to know if there really is something better.
Loved Khois original Grid series and glad to see this maturing,
I too would like to hear more details on the opinion that
“… Yahoo User Interface Library, but found it to be way too bloated for what I want from a designers framework.”
It reads to me as an evaluation of the whole YUI Library and not just the Reset/Fonts/Grids CSS components on their own:
http://developer.yahoo.com/yui/grids/
As with Al Abut above I’m using grids on all my projects because of browser support, documentation, utilities and flexible nesting/layout/width options, and would like to know what extra features Blueprint is supplying?
Oh, and I should state, that’s under 5k (uncompressed) for the version of grids.css that has the reset.css and fonts.css bundled in too, so it’s not just 5k for a nice layout, it’s for the whole grids, html default-resetting and scaling fonts package. It genuinely is a thing of beauty – and open sourced to boot! What the hell! Why aren’t we buying that guy (Nate Koechley) lunch too? I’ll pitch in for beers.
The PNGs-that-work-in-IE trick is the only thing I’ve heard out of blueprint that’s not in there, although that is pretty cool.
And it might be interesting to note that I’ve been using the grids.css approach in combination with Khoi’s write-up of how he used a background image of a horizontal grid to line up the html elements of his redesign of the onion. Works like a charm! I’ve even taken it a small step further and taken a stab at getting the vertical grid going too but that’s more challenging, as you can imagine.
Ignore IE 5.5 and below. I have stats to around 14 sites in Google Analytics and IE 5 usage doesn’t crack 1% on any of them.
It’s completely deprecated. Keep things lightweight and support the modern browsers, IE 6 and 7 have enough bugs as it is.
Nice interviews, ty!