A New Layout!
After years of work my latest layout is revealed.
10th June 2008 · Last updated: 7th September 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.
Comments (0)
Add A Comment
Please Note: Only the Comment form field is essential. Your email address (and how you found this site) will not show up in your comment when published.
Only plain text is allowed at the moment. For HTML code examples, just type it in. The tags will appear in your comment but will not be acted on by the browser.
Very long comments may be truncated.
The comments system uses cookies to store information on your computer. These contain your contact details as entered above so the form remembers them next time you wish to make a comment.
All comments posted express the views and opinions of the commenter and may not reflect those of the webmaster of this site. Any comments deemed unsuitable will not be published. These include racist, hateful, sexist or abusive comments, anything deemed illegal, or links to such material. Repeat offenders may be banned from making further comments (and their Internet Service Provider may be informed).