Design of this site
I thought that I’d post some brief comments about the new design of this site (later, I’ll post about the WordPress Hacks I’ve used). As much as anything, it will serve as a reminder to myself when I forget how the heck I did something. I also found that when I saw something I liked on another site, I missed an explanation of how it was done. I plan to link to this post on the About page, so that anyone who gets the same feeling coming here will have some answers.
I had started to feel that my old design was a bit sombre and tired. It used a fluid design which was quite nice, but difficult to do well in all browsers, and only really looked best at a particular window width. I had admired a number of other sites which used centred designs, and so decided to use that structure. The main content is 800 pixels wide, and so should work well on low resolution screens, but it looks nicer on higher resolution screens or larger windows. I came across a fantastic tutorial on A List Apart about faking columns so that the background colour for both extends all the way to the bottom, regardless of the amount of content in them. It’s explained very clearly in the tutorial, but to summarize, you produce a PNG image which is the width of your content, but only a couple of pixels high. This has the two colours and borders on it, and also a drop shadow on the outside of the content. All you need to do is set this image as the background of the content and tile it vertically. I was surprised how well that worked.
I went a bit drop shadow crazy actually, and added a drop shadow to images using this method (another good ALA article), as well as having drop shadows in Safari on the date header like this. I’ve also added a graphical bullet to unordered lists in the main body of the text like this:
.storycontent ul li {
list-style-image: url(images/bullet.gif);
}
The rest of the changes are fairly cosmetic, with some brighter colours for links and highlights, and with navigation links and the sidebar content styled as unordered lists—this makes much more sense semantically. Overall, I’m pretty pleased with the way it turned out. It looks fine in Opera, Firefox (and other Mozilla browsers), but it probably looks at its most spiffy in Safari. Anyone with any experience of web design won’t be at all surprised to hear that all kinds of things break in Internet Explorer. I’ve tried to mitigate them where possible, but I refuse to break a simple, standards-compliant design just to accommodate a broken browser, especially when there are such good (and free) alternatives.
1
Sorry Iâm a bit late. Hard to believe but I like this design even more than the last one. Loving your work, as ever.
Iâd also like to thank you for being the only one who links to me using the actual title of my blog (not that Iâm hung about such triviaâ¦)----- A great design - youâre one of those people whoâs technically proficient and have a good designerâs eye, so good on ya
Very nice preview pane by the way, I just noticed it and it rocks
by Matthew @ 14/04/2004 1:04 pm • Permalink •
2
Thank you for the links to the ALA article on faking colums!
I had given up on my own site design halfway through (Iâm certainly not happy with it the way it is now) because I wanted to do the exact same thing but couldnât figure out a way to do it. I thought Iâd scoured all of the ALA site for the information, but quite obviously missed this one.
Now I have a reason to get working againâfix the columns, colours, etc.
by Nathan @ 14/04/2004 3:04 pm • Permalink •
3
Jann: Thanks, and youâre welcome. Iâm still not sure I understand your blog title, thoughâ¦
Matthew: The preview thingy was a cool hack I picked up somewhere else. In due course Iâll list the sources of all my hacks.
Nathan: Glad to be of service. Itâs a great tutorialâin fact ALA is a fantastic resource all round.
by bsag @ 14/04/2004 5:04 pm • Permalink •
4
Re Jannâs blog title: I believe it is a quotation from âDesmondâs", the Channel 4 TV sitcom of yesteryear.
by David @ 14/04/2004 11:04 pm • Permalink •
Page 1 of 1 pages