# What’s Golden

The rule of thirds and ratios such as the golden section are fantastic methods for achieving designs that feel cohesive. The problem is these principles don’t really apply to web design.

Golden Ratio: When the ratio between two numbers is the same as the ratio of the sum of those numbers and the larger number. Basically, a+b is to a as a is to b. Also referred to as the “divine proportion” from its frequent occurrence in nature.

Rule of Thirds: Imagine your canvas divided into thirds, both horizontally and vertically. By placing important elements along a divider lines or at their intersections, you can create interest, energy, and tension.

Ratios and the rule of thirds are relative properties and are derived from inclusive measurements. Which means that not only is a height dependent on and relative to a width, but in order to have the full desired effect, a viewer must be able to see or perceive the boundaries of an object.

We usually just regard a piece of work as a whole entity, in much the same way we perceive a painting. But you don’t go to the Louvre and see one-third of the Mona Lisa, you see the entirety of the painting in one go (crowds notwithstanding). The web is more like looking through a window outside of the Louvre that partially obscures your view.

## Nature of the Medium

There are lots of tutorials, articles, and books that approach the topic of using ratios online. But many of these resources don’t really address the “why” behind using these methods, and none seem to tackle the topic of how they translate to medium of the screen.

By its very nature the web is a medium of displacement; content is not tied to being viewed on a specific device, screen, browser, and most importantly, at a standard size. Regardless of how well you plan your layout to work according to a ratio or principles such as the rule of thirds, you can’t predict how much of it will be viewable at a glance. If a visitor’s window or device prevents them from seeing the entirety of the layout, as you can by merely looking at a book or poster, the effectiveness of these principles is reduced drastically.

These methods are at their strongest when the sizes and relationships between all elements are based on them. Even if your page design manages to achieve the right balance, it’s almost certain that the size of the browser window, or the size of screen will not.

## Letting Go

I’m not saying that using these principles is a dead end, what I am saying is their usefulness is questionable for web design. The design geek in me wants to just ignore the problems and push forward anyway with a sly “I’ll still know it’s there.” And that might be enough for some. But I’m not in favor of restricting content to a scrolling box, or jumping through hoops to regulate the size of content, pages, and browser windows. These methods push the problems on the viewers.

I’ve been beating myself up about stuff like this for years. I originally came from a print background where ratios are a great starting point towards unified design. It took me a long time to embrace the fluid nature of the web and let go of that kind of control. The best you can really hope for is leaving viewers with an impression of the larger whole.

## New Foundations

Design has never been a cut-and-dried process. Just by using any of these methods, regardless of medium, will not ensure good design any more than coding with web standards will ensure a well designed website. For a long time we’ve been looking at web design through the lens of print design, and while some of the traditional design practices can make the jump to the screen, some cannot. The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles.

Good points there. In some ways I’ve shoved some of these school taught principles to the back of my mind since coming to the web. Always nice to have a bit of a refresher. Great layout too. :)

You and Andy Rutledge should get together and do a design education series btw.

• Permalink for this comment Paul Randall says: May 05, 2009

One of my fave topics. A magically subject when I found out about it!

• Permalink for this comment Hilde says: May 05, 2009

Good lookin’!
Even the daily photography matches!

• Permalink for this comment Christopher Scott says: May 05, 2009

A very thought/discussion provoking article. I would suggest that although direct application of those ‘natural’ or ‘harmonious’ methods isn’t necessarily possible completely on the web, they can still educate our designs and compositions. The main issue is that we can’t apply those harmonious methods/ratios to any sort of fixed-sized canvas. Excellent post!

• Permalink for this comment Brandon Passley says: May 05, 2009

The last paragraph says it all. However hard it is to take off the print designer “lens,” we must accept a new way of design. Of course having a good foundation in design — rules, ratios, etc. — always helps. Great post/topic.

I think we are all in the search of beauty.

What is beautiful? Why is one web site or photo or girl beautiful?

All those methods are just method to understand and define beauty with numbers. It’s like making beauty algorithms. I agree that if you are using golden selection of rule of thirds doesn’t necessary means that your site will be beautiful, but I don’t agree that these methods can be applied to “web design” it is just more difficult. We shouldn’t stop only with these two methods there are many “beauty patterns” to be discovered the beauty is everywhere :)
• Permalink for this comment Patrick Algrim says: May 05, 2009

While yes it’s true that the rule of thirds or the golden ratio may not directly be effective for the Web, it’s not true that it’s something you shouldn’t be looking at. You never made that point against that last statement, but saying that it can’t apply isn’t the fault of the rules themselves, it’s the fault of us. Imagine taking Shakespeare, translating it into Spanish, then into German, than back again into English. The whole prose would change due to the translations. Same thing here, we can’t directly relate it because of our innovations in technology and the rules non-innovations in it’s use. People have attempted to say things are this way and that way for a certain reason. Generally, the Web has certain sciences that are very limiting, and print doesn’t have as many. What I am trying to say is, we have put ourselves into the situations of not being able to have in-depth or thoughtful design for the Web. Through our transitions for the Web, we have created people who want colorful, texturized, and distorted looking Web sites. While I don’t appeal to that type of design, it’s because of the non-education that has transformed the nature of Web and it’s designers.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

You never made that point against that last statement, but saying that it can’t apply isn’t the fault of the rules themselves, it’s the fault of us.

I’m not sure I understand your point, how is it out fault? I don’t believe it has anything to do with us, it’s actually the nature of the medium of the web and the inherent way that these principles work, not a matter of us not trying hard enough.

• Permalink for this comment Jason Wehmhoener says: May 05, 2009

I think there might be a way to use the rule of thirds within various scroll zones on a page. The boundaries aren’t as clear as the frame of an oil painting, but there is some data that guide us: Visibility and Scroll Reach

• Permalink for this comment Davide Melis says: May 05, 2009

While is certainly true that the main aspect of the web is “a medium of displacemment”, on the other hand it still remains a strongly visual oriented media, subject to all the visual rules and phenomena we know.

As I see it, it’s the content of a web page which is becoming less and less container-related, but this loose tie with the visual media shouldn’t be an excuse to discard how powerful and helpful are the visual tools developed for the printed page.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

As I see it, it’s the content of a web page which is becoming less and less container-related, but this loose tie with the visual media shouldn’t be an excuse to discard how powerful and helpful are the visual tools developed for the printed page.

Of course! I’m only questioning the usefulness of these specific principles which depend on predictable dimensions. Which means it’s actually not subject to all of the visual rules and principles of traditional design. It’s subject to some of them, as well as some that are unique to the web.

• Permalink for this comment Antonio says: May 05, 2009

Interesting article. I like how it gets us thinking and questioning the methods we use. But I do disagree to a certain extent.

Even though the browser window or the screen size could possible “cut off” portions of the design, in my opinion the two principles are still valuable in web design.

Most sites are designed based on a common screen size, by doing this a majority of the viewers will see the entire design. Sure, the size of the browser window could be smaller but these are variables that the designer has very little control over, similar variables exist in print. It’s very difficult to design for such variables, unless you use a fluid layout, in which case these principles still apply to a certain degree.

The reasoning behind these methods still apply to web design, especially in fixed layouts, because they apply to design in general. The Rule of Thirds and the Golden Ratio are used to create a structure/layout that’s pleasing to the eye, and more interesting. Even if the browser is cutting off portions of the layout, you still want the design as a whole to have some kind of underlying structure or meaning.

That’s how I see it. Great article Jason.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

@ Antonio :

Even though the browser window or the screen size could possible “cut off” portions of the design, in my opinion the two principles are still valuable in web design.

I’d say it’s more than possible, it’s probable.

Most sites are designed based on a common screen size, by doing this a majority of the viewers will see the entire design. Sure, the size of the browser window could be smaller but these are variables that the designer has very little control over, similar variables exist in print.

If we’re being honest here, most websites are designed with a common width in mind, and the key there is “in mind”. Because we can’t really predict 1) what size monitor/device everyone will be using 2) what the resolution will be 3) what the window size will be and 4) what the viewport of that window will be, I’d argue that these variables hold a much tighter hold on how useful these principles can be. Yes, similar variables exist in print, but not the same variables at the sizes we’re talking about. I actually don’t believe them to be that comparable.

The reasoning behind these methods still apply to web design, especially in fixed layouts, because they apply to design in general.

I want that to be true, I really do, but it’s not. Designing for an infinite canvas with variable content at variable sizes inherently makes the web a very different medium for visual design. The principles we’ve used in print only go so far, and these ones that depend on known dimensions just don’t work in the same ways.

Even if the browser is cutting off portions of the layout, you still want the design as a whole to have some kind of underlying structure or meaning.

And that’s what I’m saying. You can use these principles to the best of your ability, but they won’t have the same impact or cohesion found in print or on a fixed canvas. The best you can hope for is an impression of the larger whole.

• Permalink for this comment Patrick Algrim says: May 05, 2009

I’m not sure I understand your point, how is it out fault? I don’t believe it has anything to do with us, it’s actually the nature of the medium of the web and the inherent way that these principles work, not a matter of us not trying hard enough.

Yes, I think the statement could be misunderstood easily. In an indirect way, it’s our fault. Why? Because not only is our industry the one where hobbyists become scientists, but the lack of education has created a feed for the public view on what they see as “good Web design”. As mentioned in Twitter, if we could define the points of transition in the Web (because the history of Web is much shorter than print), couldn’t we define why these sciences don’t work? Again though, you made an indirect and great point that these rules where not intended for the Web, which I completely agree on (see previous comment about language translations). But I truly think that if designers, and people on the Web understood the medium more (as something that isn’t necessarily just suppose to be decorative), we could have made a better transition into using these rules for Web, instead of just saying yes they work or no they don’t work. After hopefully getting that point across, overall we really haven’t tried out enough for the Web. Print maybe 50 years ago, was going through so many tests, transitions, assumptions, experiments, and we really haven’t even made a fraction of the dent for web that people in the print medium have attempted to do. We need to experiment more, question the result of the rule less, and question why the rule doesn’t translate more (which again ties back into your article).

Isn’t this such a huge loop? Hopefully that clarifies things more, but I must say, this is a conversation that can’t be directly answered (at this date) in any form.

• Permalink for this comment Beth Dean says: May 05, 2009

I’m in agreement about these old print adages not fitting a fluid medium where the end user controls delivery.

However, pattern libraries are largely contextual though so one size doesn’t fit all. Leveraging these is certainly helpful but couldn’t replace a “golden ratio” type principle. Pattern libraries are less design principle and more utilitarian like paints in your box.

This speaks to the need for some unified theories in web design. After all, there have to be some guiding ideas that ring true no matter what the site or its context right?

• Permalink for this comment Jason Santa Maria says: May 05, 2009

But I truly think that if designers, and people on the Web understood the medium more (as something that isn’t necessarily just suppose to be decorative), we could have made a better transition into using these rules for Web, instead of just saying yes they work or no they don’t work.

This is where I disagree, I don’t think it has anything to do with how hard we’ve tried or not tried, this is just the way the web works. Just as there are things inherent to print, there are properties inherent to the web. Which means no matter how hard we try, a piece of paper can only fit so much content. And that’s OK, because that’s how the print medium works.

It isn’t a matter of figuring out why it doesn’t work, I actually think that part is pretty clear, it’s a matter of figuring out the principles that are suited to this medium. Principles that build upon and adapt the tradition principles of design, but understand that this is not merely a new canvas, but a different kind of canvas.

• Permalink for this comment Patrick Algrim says: May 05, 2009

Most sites are designed based on a common screen size, by doing this a majority of the viewers will see the entire design. Sure, the size of the browser window could be smaller but these are variables that the designer has very little control over, similar variables exist in print. It’s very difficult to design for such variables, unless you use a fluid layout, in which case these principles still apply to a certain degree.

Very good points, mathematically I think you have this tied down. I completely agree. But I don’t agree that fluid layouts (or any code change) will make an impact on these rules. Why? Because the point of these rules is to make a direct line to what may be appealing to the human brain. Using mathematical numbers to associate the direct thought process. But as noted in all of my other comments, I think the human brain has changed, especially for what people find “appealing” for the Web. It’s a large loop hole if you really think about it. Great point though A!

• Permalink for this comment Antonio says: May 05, 2009

And that’s what I’m saying. You can use these principles to the best of your ability, but they won’t have the same impact or cohesion found in print or on a fixed canvas. The best you can hope for is an impression of the larger whole.

Yes, I absolutely agree with that. But at the same time it doesn’t mean the rules no longer apply to web design. I think they do but their impact will be different.

Some people might misinterpret this article and believe it’s suggesting to no longer use the Rule of Thirds or the Golden Section for web design. That would be a travesty.

• Permalink for this comment Patrick Algrim says: May 05, 2009

It isn’t a matter of figuring out why it doesn’t work, I actually think that part is pretty clear, it’s a matter of figuring out the principles that are suited to this medium.

To be honest, I don’t think it’s very clear at ALL! Or else why we would all be having this conversation right now? There are too many limitations in Web that result in these rules not working the way they were designed, but again, it doesn’t mean that the rules can’t be transformed for the Web (not through design, but through a NEW rule). Technically, we are relying on something that was created over 200 years (Leonardo Pisano “Fibonacci” BORN c. 1170) ago for this new technology that was made 20 years ago. To me that’s CRAZY! We can’t just subside and say yes it works or no it doesn’t work, because that makes us seem amazingly lazy.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

@ Antonio :

Some people might misinterpret this article and believe it’s suggesting to no longer use the Rule of Thirds or the Golden Section for web design. That would be a travesty.

True, though I think the travesty would be them not knowing or understanding the principles in the first place, which would lead them to understand how they don’t really work online :)

We can’t just subside and say yes it works or no it doesn’t work, because that makes us seem amazingly lazy.

haha :) Frustrating, no? I agree, what we need are new principles suited to this medium, which is what I allude to at the end of this article. But as of now, these principles do not translate to the web in the same way. It’s not a matter of us trying harder, the mediums are different. And that’s OK.

• Permalink for this comment Steve Kirkendall says: May 05, 2009

I have to agree – using the golden section and the rule of thirds works beautifully when a design’s boundaries are set and immovable as they are in print. That’s how designers achieve dynamic tension through use of white space, after all. However, even though designing for the web is a little like setting type in water, using grids and knowing the basic principles of typography are essential.

Beautiful post, as always!

• Permalink for this comment Patrick Algrim says: May 05, 2009

haha :) Frustrating, no? I agree, what we need are new principles suited to this medium, which is what I allude to at the end of this article. But as of now, these principles do not translate to the web in the same way. It’s not a matter of us trying harder, the mediums are different. And that’s OK.

It’s totally frustrating! Haha! It’s a huge loop. We could ask, why does grid based layouts (Jan Jan Tschichold) work and the golden ratio doesn’t? I agree with you on asking which principals do translate and which ones don’t. But I still think we aren’t asking what changes have resulted in this (Golden Ratio, etc.) rule not working or translating. It can’t be as simple as, “we tried, it failed, it doesn’t work.” Overall, I agree with almost 85% or more of your notes though!

@Antonio

Some people might misinterpret this article and believe it’s suggesting to no longer use the Rule of Thirds or the Golden Section for web design. That would be a travesty.

Very true. Comes back to the non-education. More people need to start thinking or else we are going to stay in the same place we are now with zero to no innovation towards the design of this technology. A very large public conundrum.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

We could ask, why does grid based layouts (Jan Jan Tschichold) work and the golden ratio doesn’t?

Technically, grids don’t entirely work either. They work well enough horizontally, but they lose almost all of their power on a vertical axis due to the flexible nature of the web. Luckily, the horizontal axis is enough to make them very valuable to use online.

It can’t be as simple as, “we tried, it failed, it doesn’t work.” Overall, I agree with almost 85% or more of your notes though!

Well, not that simple, but also not that complicated. I have tried to make it work for a number of years. Only then did I really start to reflect on the nature of the web as a medium before I really started to understand why it wasn’t working. I actually think it’s OK that these things don’t work at present. My beef was getting people to understand that and also embrace it.

Even by not having the ability to reign in our layouts with these principles, we gain so many more things. An infinite canvas is a tremendously useful thing! Scalable text, dynamic flow to layouts, portability to many devices, the list goes on and on. I’ve become more focused on finding ways to adapt my own methods for design to these new constraints.

…even though designing for the web is a little like setting type in water…

Love this :)

• Permalink for this comment Peter Richardson says: May 05, 2009

Amen, brother. This will only become more true as the variety of resolutions continues to increase. Larger monitor sizes also mean browsers are less likely to be full-screen.

One day we’ll throw off the yoke of our tyrannical pixel overlords! …I don’t know what we’ll use instead, but it’ll be interesting.

• Permalink for this comment Seth Nickerson says: May 05, 2009

I can’t believe nobody has mentioned this, but the title of the post has to be a reference to the Jurassic 5 song, right?

• Permalink for this comment Geoff Thibeau says: May 05, 2009

For some reason, I think of food preparation as a perfect analogy. When ordering sushi from the sushi-bar, the customer asks for a particular type of food and the chef prepares it exactly as (s)he chooses, given the limits of the plate.

Sushi is print media.

When a customer walks into a buffet, the content is the same: food. The plate is probably different in shape and size, but it’s still a plate (design medium). But the presentation is almost entirely in the hands of the customer, and not the chef. The chef can control some presentation, by including broccoli with steak for example, but if the customer only wants steak, (s)he can choose not to pick up the broccoli. And a different customer might not even have the steak and broccoli at all.

Buffet is web media.

So, as chefs at a buffet, I think our best bet is to suggest the preparation, because controlling it goes against its very nature.

But maybe I’m wrong, and it’s lunch time so all I’m thinking about is food.

• Permalink for this comment Erik Wallace says: May 05, 2009

Great article Jason. I also took some print classes in school and am sometimes frustrated that the two disciplines aren’t more connected. You put it well, “It took me a long time to embrace the fluid nature of the web and let go of that kind of control.” I think the fluid nature you mentioned is exactly what makes designing websites so interesting. Technology changes over time and things like RSS, Twitter, Blogs etc. can change and remix what was originally published online. It keeps us web designers on our toes.

• Permalink for this comment Chris Meeks says: May 05, 2009

Great discussion, all the way around. Nice to finally see comments that are thoughtful and add to the conversation.

Maybe my perspective is shallow, but should we even be thinking about the height of an entire web page at all?

I know width isn’t perfect on the web, but it certainly can be controlled to some reasonable degree. With site after site of massive content making the heights of web pages less important, should we focus on the only semi-controllable dimension, width?

Take this site for example, after reading 30+ comments, I haven’t altered my design impression of this site in the slightest. I don’t think I even notice the ratio or porportions of the heights of the elements on the screen. The only importance height serves is as a spacing mechanism to allow the content to breath.

Basically, the heights of small chunks of content are important, though the sum of those vertical pieces on top of one another may be ignored. The overall ratios of the height on the entire page seem irrelevant.

• Permalink for this comment Seth says: May 05, 2009

Good news = I finally get the “golden ratio”.

Bad news = Now it’s useless!

Damn you Santa Maria!!!

• Permalink for this comment Keith says: May 05, 2009

My very first web design was a tribute to the golden rule. It was done in FutureSplash (Flash) and had lots of fun spinning animations to help a user know they were drilling down into the content.

:)

• Permalink for this comment Luke Williams says: May 05, 2009

The thing you have to take into account when considering the golden ratio for use in any design is that it is used to increase appeal because it relies on our sense of familiarity with things in nature.

Buildings, artwork, print, video: all things are physical objects or taken on physical events (gross oversimplification), whereas the web is more of a nature within itself, that doesn’t have to inherently reflect or interpret the real world.

Top of my head there, not sure how much sense that makes but there you go :)

• Permalink for this comment Christopher Ross says: May 05, 2009

Jason, I totally agree with your approach here in theory but I worry that as we move further away from websites as works of art and more towards websites as products of an interface (iPhones, mobile devices, TV based devices) I fear that many designs will lack simple interface rules and instead be the product of developers screen limitations … like in the old days :)

• Permalink for this comment Chris Wallace says: May 05, 2009

Interesting discussion for sure. I suppose getting my start as a web designer I see the print-turned-web designer as a fish out of water, flopping around on the deck of web standards, usability, and accessibility.

• Permalink for this comment Jason Santa Maria says: May 05, 2009

I suppose getting my start as a web designer I see the print-turned-web designer as a fish out of water, flopping around on the deck of web standards, usability, and accessibility.

Hey, I’m a print-turned-web designer! ;)

• Permalink for this comment Matt Robin says: May 05, 2009

Really good article Jason! I wish more Web Designers were writing this sort of stuff actually (Design in Web Design)…it’s very relevant and it matters!

Keith: I’d want to see that design! Haha! :D

• Permalink for this comment Chris Wallace says: May 05, 2009

@Jason Santa Maria I guess you turned out ok. ;)

• Permalink for this comment Peter Green says: May 05, 2009

Jason, i can’t disagree with you!

But after reading your article i realized that i have a somewhat controversial impression of the web – that it’s in fact overloaded with far-from-print-design things, overly interactive tricks,… in short, it’s gone too far in that direction already, and i’m feeling a certain lack of those
“ancient” rules. Just my impression.

Maybe i’m surfin a slightly different part of internet than you)) But that’s hardly so – fwa for example is one of my sources of daily web-design “news”.

• Permalink for this comment Matías says: May 05, 2009

This is where I disagree, I don’t think it has anything to do with how hard we’ve tried or not tried, this is just the way the web works. Just as there are things inherent to print, there are properties inherent to the web. Which means no matter how hard we try, a piece of paper can only fit so much content. And that’s OK, because that’s how the print medium works.

[…]

Designing for an infinite canvas with variable content at variable sizes inherently makes the web a very different medium for visual design. The principles we’ve used in print only go so far, and these ones that depend on known dimensions just don’t work in the same ways.

This article certainly deserves plaudits for the discussion it stimulates. Having say that —I beg to differ on some basic fundamentals here. The golden ratio, as every proportion humanity has created in order to mold the world it inhabits, matters to perception; and perception transcends all mediums (not just print) while being at the same time particular to each one of them. I believe the mistake lies in attaching the virtues of proportions to a fixed canvas. The proportions are not exclusive of a secluded point of view: as history has shown (given that the golden ratio is quite more ancient than print work, as we all know), ratios and proportions have applied to all sorts of human art, from architecture —and one could argue that there is no art that holds such a broad space for movement, differences in scale, boundaries which remain unseen and numerous points of view as architecture does— to cinema.

Ratios and the rule of thirds are relative properties and are derived from inclusive measurements. Which means that not only is a height dependent on and relative to a width, but in order to have the full desired effect, a viewer must be able to see or perceive the boundaries of an object.

The specificity of the web as a flexible medium is not that different in essence to us perceiving The Arnolfini Marriage hanging from a wall, watched in a movie in a detailed pan across the painting, or staring at the background mirror as a framed portion of the whole: in all this cases the painting keeps its proportions while we complete ourselves the perception of its boundaries —it is true though that we already know how it is as a whole. What I try to convey with this arbitrary analogy is that the painting still holds its proportions although the mediums vary. And the viewer does not need to see or perceive the boundaries for ratios to operate underneath. It could even be said that our mind sets the boundaries of the unfathomable according to the ratios and proportions we have learned to incorporate in our perception. The web has to accommodate proportions, proportionately. We come as viewers to the Web with all this baggage on our backs.

Content has its shape. And design is, in this sense, the content itself given that it changes the perception of the body of words in a web page —what is often regarded as the content. Design is not about giving a message; it constitutes the very message due to the fact that we perceive the synthesis of the content and its shape. We cannot separate content from design and what we perceive as content is actually the synthesis of the very content and the design that conforms it. Rules and ratios conforms the content and pertain to its perception; and the web is still perceived even though it is done involving interactivity. Proportion and ratios do not necessarily need known dimensions to remain tacit. Maybe the quest is not to find what new principles the web unleashes, but how the canon of perception may be applied to it and evolve from it.

• Permalink for this comment Jason Santa Maria says: May 06, 2009

@ Matías :

Exactly what I was hoping. The level of design geekery in this thread makes me giddy. And “plaudits” might be my new favorite word.

First off, very well said on this response! You raise some great valid points. I haven’t wavered on my viewpoint though for a couple of reasons:

Art is a great example of this stuff in action because it comes in a myriad of shapes and sizes. But art and design aren’t as comparable. They have different goals, constraints, and measurements for success. The most obvious constraint is the potential need to convey a considerable amount of text-based information. A book or a newspaper is a more comparable subject when it comes to a webpage.

While I completely agree that the fundamentals are the same, the idea that perception and not strict measurement are what really matter, the difference between a fixed canvas and a virtual one cannot be underestimated. And though ratios are as old as dirt, a lot has changed with regard to designing for a screen. Despite the physical bigness of something, perception isn’t a constant. The Parthenon might fall in line with the golden ratio, and it’s friggin’ huge, but do its proportions have the same effect if you’re looking at it up close through a keyhole? I don’t think they do, because a viewer’s perception is affected by the vehicle by which they peer through.

To me, the same holds true for the web. Even if a ratio is at play, what’s the tipping point where it is actually perceived? Can it work on a page that’s one screen long? Possibly. What about 30 screens long? I think the likelihood drops considerably. I’m also simplifying the idea of a “screen”, which is obviously dependent on screen size, content, window, viewport, and device. These are all factors that play into that perception, and nearly every one of them only serves to negatively impact it.

At the end of this, I’m arguing that merely using these principles as we have in printed matter for so long isn’t straightforward. The web alters the way they work and their strength.

Thanks so much for your very well thought out response. It’s a pleasure having so many intelligent people discussing this.

• Permalink for this comment John Dilworth says: May 06, 2009

It seems to me that your argument is more about the concept in print design where the selection of the “ratio” or proportion starts at the “page” size and then helps dictate everything else in the design.

Your argument for this is sound because the idea of the page as it exists in books is not the same on the web. Even then, there are still many reasons why a designer might want to choose—or not choose—the rectangles that they work with.

There are many ratios with unique properties (the golden section being just one of them) that can come in handy in web design as well as any other type of design.

For example, let’s say that you need to develop a design that will work well on the web, and will al so scale proportionally to different sizes of the German DIN paper standard. If that is the case, you might choose to use elements that use the square root of 2 ratio. That’s the only rectangle that you can divide in half where each portion will retain exactly the same proportions as the whole. This makes things much easier for you when you need to produce design elements that will be printed on DIN size paper and displayed on the web.

Another important fact to consider is that every web site design is made up of lots of rectangles—not just the bounding container. You can intentionally select the rectangles and their ratios for those individual components, or you can let them remain arbitrary.

If a designer chooses a rectangle with certain ratio for a good reason and takes advantage of the unique properties of that ratio to make a better design or to add meaning, I would have to argue that those decisions apply perfectly to the web or any other kind of design.

That said, there is little value or benefit added to any design if the designer uses the golden section—or any other ratio—in a magical attempt to create harmony and proportion.

• Permalink for this comment Jason Grant says: May 06, 2009

I wonder if anyone has done any empirical research on this topic and whether this blog post can be substantiated as ‘true’ or ‘false’ with some of that research?

• Permalink for this comment André Gonçalves says: May 06, 2009

Fist of all sorry for my english… I’m Portuguese :)

As you say (in a way), its a question of looking to the problem in a right way. I think what we have to do is find what we can control and what we can not. measure is one thing that me can not control so it will be difficult to apply a rule in such variables (different devices, resolutions,).

But if we see a website in a architectural point of view… or if we compare the fact that we can not see the all thing at a time (like music) and try to take advantage from that other dimensions, them we can apply other rules…like rhythm, visual rhythm.

Great post Jason.

• Permalink for this comment Antonio says: May 06, 2009

Some things I want to add to the conversation.

There has been some mention about height and how it’s not fixed so in turn the rule of thirds and the golden section could never apply. I think this is what’s causing problems. I personally always consider the height of a web page, relative to the width. When create grid systems, I mainly use the rule of thirds and apply it to the space that would be viewed above the fold. I think repeating that structure further down to create a taller page, usually in 3’s. Even though the user can’t view the entire page at once, you’re still establishing a fundamental system for which the design is based upon. Whether the user can see the grid or the golden section is actually irrelevant. Actually, if designed well, these elements should be invisible to the user.

They guys at IA are using the golden ratio to redesign their site. You can see by this example how well the golden section works for web design.

http://www.flickr.com/photos/formforce/3507239320/sizes/o/

• Permalink for this comment Jason Santa Maria says: May 06, 2009

@ Antonio :

When create grid systems, I mainly use the rule of thirds and apply it to the space that would be viewed above the fold.

And this is the important part, the “fold” isn’t a constant. It’s a nice thing to aim for, but it’s an unpredictable value.

I think repeating that structure further down to create a taller page, usually in 3’s. Even though the user can’t view the entire page at once, you’re still establishing a fundamental system for which the design is based upon.

I totally agree! And this is what I mean by leaving people with the impression of the whole and the organized system you design around.

They guys at IA are using the golden ratio to redesign their site. You can see by this example how well the golden section works for web design.

Right, but this is exactly what I’m talking about. Yes, the page is very well organized and designed, but merely using the golden ratio doesn’t have the same effect for this because of how limited the view can be. Plus, everything fits in here nicely when creating a mockup, it might be different over time with different length content in the mix. I know they could regulate the lengths of their content blocks, though not every site can do so.

Don’t get me wrong here, I don’t want people to think I’m lobbying against organization or grids, I’m merely saying that our old methods aren’t immediately transferable to a different medium. They need to be reconsidered and adapted.

• Permalink for this comment Antonio says: May 06, 2009

Right, but this is exactly what I’m talking about. Yes, the page is very well organized and designed, but merely using the golden ratio doesn’t have the same effect for this because of how limited the view can be. Plus, everything fits in here nicely when creating a mockup, it might be different over time with different length content in the mix. I know they could regulate the lengths of their content blocks, though not every site can do so.

Don’t get me wrong here, I don’t want people to think I’m lobbying against organization or grids, I’m merely saying that our old methods aren’t immediately transferable to a different medium. They need to be reconsidered and adapted.

We’re on the same page with this. :)

Great points here Jason. We can’t just take the methods we use for print and expect them to fully work for the web. They need to be adapted.

• Permalink for this comment brandon says: May 07, 2009

Great article. A small detail, but I like that you used white text on black. It’ a great way to highlight the difference between reading on a screen and reading on paper.

• Permalink for this comment Matias says: May 08, 2009
Thanks so much for your very well thought out response. It’s a pleasure having so many intelligent people discussing this.

I am glad I have somehow contributed in a way you deemed useful. Thanks to you!

The most obvious constraint is the potential need to convey a considerable amount of text-based information. A book or a newspaper is a more comparable subject when it comes to a webpage.

I believe here is where some of the discrepancies we have come to surface: the extent of the meaning of design. I do not believe that design is conveying information per se. I believe design is the information and the information is the design as they are molded into one unity; and as one unity they remain. I do not think we can regard the information separate from the design that shapes it because what we perceive as content is actually the synthesis of the very content and the design that conforms it. In this particular sense the dichotomy information–design might be compared to other forms of expression beyond just books and newspapers.

And yet somehow we have spoken the same. Ratios, proportions and rules are not constants to perception —but not just when it comes to the web! Perception never remains a constant no matter how constant the medium shall be.

The difference is subtle: we still can apply those principles of design to the web, we just have to do so differently. The thing is that human expression through the web is still conveyed by virtue of perception, and our perception does not elude the guides and rules it has followed throughout time.

• Permalink for this comment Peter V Cook says: May 13, 2009

I’m a divine ratio fan and was getting ready to be offended, but you have some excellent points. Thank you for acknowledging that the golden ratio still has some usefulness on the web by using it in this article’s layout.

Commenting is not available in this section entry.

### On the Subject of Me

Jason Santa Maria is a graphic designer living and working in sunny Brooklyn, NY. More »

### A Book Apart

“Insightful, witty and practical, Responsive Web Design points us in the direction of a new web.”
—Mark Boulton
Order »

### With Support From

Graphics Artists Guild Handbook: Pricing & Ethical Guidelines
by Graphics Artists Guild
All Books »

### Oddities & Diversions

#### Design Is History

Design Is History, created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. Chock full of great info.

#### Education at FontShop

Education at FontShop, a great resource for tips, tricks, and type knowledge.

#### A List Apart: Issue 311

A List Apart: Issue 311, Start web design projects the right way. Learn when and how to say no. Articles by Whitney Hess and Kevin M. Hoffman.