A New Layout!
After years of work my latest layout is revealed.
10th June 2008 · Last updated: 15th June 2008
I've been working on this new layout for over a year. Originally it was a fixed-width design as you can see in the initial demo I made. I liked the way the menus slid out on hover. But I wanted a fluid layout, one that stretched with the browser window. So I came up with a three-column demo. But something didn't seem right about it. Firstly, I struggled for a long time with the menu links. I found that today's current crop of browsers were impossible to please. A long strip of background colour I had behind the menu buttons could not be rendered in the same way by all browsers. Some had it too tall by a pixel (ruining the effect) while others fit just right. Then I had the simple idea to drop the background strip altogether (a shame as it looked good) and just have the menu floating. Note that the buttons change to indicate which page you're on. I also wanted to reduce the number of buttons to just four - there were far too many menu options in my last layout.
As for the columns, I suddenly realised that the sides of extra information running down the right didn't fit nicely with long lines of text and links, as they were quite narrow. The solution was to make them wider and put one underneath the other. Amazing what you can't see sometimes when working on a project until later on.
What also took the layout so long was that I'd left it alone for lengthy periods at a time. I got stuck with how it should progress. Also I had a lot of problems getting the columns to float in a way I was happy with. In the end I grouped both sides into a single column, so the smaller blocks would appear grouped.
The best thing about the new layout is how it can be reduced to a really small width and still make sense. I've made the columns flexible, but with a maximum width so larger screen sizes don't create lines of infinite length. The trick was simply to apply a maximum width to the body element. Try resizing the browser window and see what happens!
Because the layout is now flexible, I had to drop the fixed-width background image used for the progress bars showing how much I have read of the current books I'm reading. To compensate, I've added the cover of each book. (Note: the images don't contain any ALT text as it would be the same as the titles, so I felt it incorrect to repeat the information twice.)
So there you have it. The result of more man hours than I care to recall. I hope you like it.
Earlier Posts
Leopard Forms Issues
18th March 2008 · Last updated: 18th March 2008
On an Apple Mac running OS X 10.5.2 ('Leopard') there are issues I've noticed regarding form buttons and text areas on web pages... [More]
Netscape 9
30th November 2007 · Last updated: 30th November 2007
I missed this, but on October 15th 2007, Netscape Navigator 9 was released. It's available for Windows, Linux and Mac and is based on Firefox 2... [More]
Safari 3 Beta Problems On Windows
12th June 2007 · Last updated: 27th July 2007
I was gonna call this "Apple Safari Sucks On Windows" but I felt that was a little harsh, and I haven't seen anyone reporting the same problems as myself yet. But for me, I'm afraid it's a bad start... [More]
A Fragile Beauty Called Glass
Because sometimes Flickr thumbnails can look as gorgeous as this.
13th February 2007 · Last updated: 13th February 2007
