The unnoticeable redesign
A few months ago I read a very intriguing article on typography and vertical alignment (Setting Type on the Web to a Baseline Grid). I am not a designer and I have always found very hard to understand why certain elements and composition are pleasing, and other are not. The article in question explains that it has got a lot to do with mathematics and proportions.
I have recently had a chance to implement the tips from that article on Bitful. If you are curious and are reading this via an RSS reader, go and read this post at bitful.com.
Are you there? Good.
Now, assuming you are familiar with my un-design of the last few months, nothing much has changed. Except that everything aligns vertically in multiples of 18 pixels. Compare the following two links:
and you will probably be able to appreciate the difference. If you don't, I will have spent a fun day anyway.
As usual, please let me know if you notice anything going very wrong, or if there are any display glitches (I was lazy and only tested the design in Firefox 2, IE 7 and Opera 9).
Sunday 30 December 2007 at 12:09 pm
As a magazine designer, I'm aware of the importance of baseline grids in print, but I hadn't really thought about it on the web. But it really does make a difference. Looks good in Safari.
Sunday 30 December 2007 at 12:39 pm
I wouldn't have noticed the difference if you hadn't provided before and after designs. But after looks swish-er than before.
Monday 31 December 2007 at 9:21 am
Now you just need to fix the width of your comment box. In Safari, it overlaps the right-hand column.
Monday 31 December 2007 at 9:30 am
Thanks David. I think I know what that might be, but could you please send me a screenshot if it's not too much trouble? That'll help, thanks.
BTW I've just noticed that IE 6 has a similar issues, the comment box is wider and pushes the sidebar below the main content area.
Monday 31 December 2007 at 2:37 pm
Fixed. I was not aware that the horizontal spacing of textarea fields varies from browser to browser, so I defined it in the stylesheet and the values are not too dissimilar now.
I also found that the previous design in IE 6 behaved in the same way. The advantage of having so few readers is that nobody noticed (or cared to let me know).