Grid based design - comparing architecture to web pages

One of the hallmarks of Renaissance art and architecture is stability in composition and design in both art and architecture. The desire of the Renaissance artists and architects (often one and the same person) was to create a sense of solidity and permanency in all that they did. This required, as they discovered, adherence to some basic laws of math. They discovered ratios that universally achieved balanced, pleasing designs. Graphic designers, especially web designers, could learn much from this.

Grid based design and HTML

Web designers for some time eschewed grid based layouts. This was due in large part not to a disdain for grids, but rather a lack of HTML suited to the task. Table-based layouts where the pinch-hitter stand in that ended up going 313 innings for no other reason than there was no other way to get the job done and stay in the game. Then along came CSS and most designers immediately shuddered and 1) embracing a new way of doing layout since tables and “1px transparent gif shims” just worked and it was predictable. Not easy to edit, those tables, but they were predictable. CSS layout, or “tableless layout” as it was first monikered, was not easy to grasp nor easy to implement. After about five years of bickering and reluctant education, along with much CSS griping, graphic designers en masse adopted CSS layout.

Grid based CSS systems

With the advent of easy-once-you-know-how-to-use-them CSS layouts (“easy” might still reasonably be called a relative term), the focus sharpened on grid based layouts. Today, there are entire CSS frameworks built on Grids. The 960 Grid System system is the foremost advocate of this design / CSS approach to solving the problem. Any system is going to have it’s strengths and constraints, but the 960 system works for many people. There are many ways to achieve a grid based system, from open source collaboratives to home-spun frameworks adapted to a graphic designers own peculiar way of working. But what about results? And how does this connect to the Renaissance?

Grids and the Renaissance artists

The Renaissance has had a permanent affect on all Western architecture present to this day. Of course, we have to go all the way back to Greek architecture to give full credit. But let’s stick to Renaissance for now, since it was during that time that a clear and communicable rationale was established for their methods of design and architecture. By way of a quick musical analogy, a famous musician (nobody know who for sure) was once asked in an interview about what notes or scales he chose while improvising. The musician responded “writing about music is like dancing about architecture.” Well, in this case, writing about grid based layout is like designing a building about poetry. Instead, lets look at some pictures. So here are 6 Renaissance building fascades and 6 grid based layouts. We can see immediate parallels to the idea of header, footer, side bar, main content, etc. One obvious note is that a building is going to have a grid layout focus exactly upside-down compared to a web page. We don’t (not usually anyway) enter a building at the top floor, but we do enter a web page that way. Hmm…imagine a site that scrolls up? There’s a thought…Enjoy!

6 Renaissance inspired building facades.