A New Layout!

After years of work my latest layout is revealed.

10th June 2008 · Last updated: 5th October 2016
 

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.