Great article! Finally something fresh and original.

Wouah! Impressive!

I do not think it was possible to conduct this type of design with only CSS and HTML… Clever!

Mr. DeSandro: Check out the talk I gave at Build 2010, More Perfect Typography about using modular scales in web design. I’m writing an article to explain the technique in detail.

Nice article, Drew! I think there’s a lot of harmony to be had if we harness proportions like this in web-native ways — even in full page layouts. And I think starting with type is the key.

I love reading about the golden ratio and the fibonacci spiral, but I’m unsure how to implement it in design. Though the article was great, I’m still not sure how to use it for myself.

Brilliant article, Drew…
blows my mind ~ though I’d prefer not to do the maths in such way – but brilliant to have it all explained and shown live.

inspirational :)

Very good writeup Drew. I especially like the dynamic resizing explanation.

It appears that the new Twitter no longer incorporates the Golden Ratio in its design. I wonder what the reason for this is…

If you are not already designing with golden proportions, then perhaps this will inspire you to begin.

Yes indeed it is inspiring. I will definetely use it in the future!

One of the best articles ever on 24ways. Original and well-written. Thanks a lot Drew :)

Fantastic. Drew, you are 1.618 times cleverer than me.

Nice! I did something very similar back in May.

Loved the article!!!!!

<whisper>The border radius properties are flipped in the markup provided; bottom should be top and top should be bottom.</whisper>

Neat demo!

I’m interested in your take on Mr. Jason Santa Maria’s article regarding ‘framed’ porportions The central argument still stands: these rules were developed for fixed-sized compositions. Given the mercurial natural of the web as a canvas, how could these same rules apply appropriately?

Utterly pointless and all the more worthwhile for it. Great article.

As a developer it’s great to reminded of something like the Golden Ratio that I messed around with years ago (as an artist) but which had slipped right to the back of my mind.

Cheers

@prisca I’m glad it inspired you.

I’d prefer not to do the maths in such a way

I didn’t want to labour the point, but using percentages for dimensions saves you from doing a lot of sums. In an earlier draft, I calculated the precise pixel dimensions for each nested div. The resulting code is not pretty!

@AndyWebber I wasn’t aware that the Golden Ratio had been removed from the #newtwitter design. Did you read that somewhere, or did you get a measuring tape out and figure it out for yourself?

@JonathanSchofield if that were true, we’d totally have to hang out together!

@JonGlick Snap! I also dreamed up my example whilst offline in an airport. Perhaps all of those propellers served us the inspiration.

@BrandonStephens thanks for pointing that out! I’ll be sure to fix it before the magazine goes to print.

@DavidDesandro I’m glad you asked. I don’t have a satisfactory comeback for that, but Mr Tim Brown’s response is very interesting. If you haven’t already watched it, set aside 30 minutes for the video of his talk from Build. He puts forward a convincing methodology for harnessing proportions in a way that is web native. I am looking forward to experimenting with modular scales myself. Thanks Tim!

I understand now, a lifetime of listening to the golden spiral and I just understand it now, Thank you, Drew, for this magical post, wow!. thanks a lot!