« The Real Lock-In | Main | Lotus Agenda Wannabe? »
January 28, 2004
New Year, New Design
No, you are not imagining things. There is a big pair of stone lips in the header. It doesn't have any significant meaning; it just looks cool.
You might have noticed some other changes -- like just about everything. I started the re-design during the week between Christmas and New Year's with the idea that it would launch on New Year's Day. Oh well. A little bout of insomnia gave me the time over the last few days to get it to a point where I can roll it out.
I had to learn some new CSS stuff and a touch of XSL for the new RSS feed. I don't pretend to be an expert in this stuff, so I'm sure someone much more skilled will recoil in horror at my stylesheets, but it was a fun exercise to learn some new stuff.
One of the cooler parts of the redesign is the new RSS feed. When you take a look at it in a web browser, you might not think it's an RSS feed, because it doesn't look like one -- i.e., it's not a page of unrendered XML, but an XSL-styled page with an explanation of RSS and how to use it. However, it is a valid RSS 2.0 feed.
Since I've written about the bad interface for RSS before, I'm glad to be able to demonstrate a different approach.
Kudos go to Dave Shea of Mezzoblue who described this approach in Plugging the RSS Usability Hole. I've totally cribbed from Dave's code, since I know squat about XSL. A shout out also goes to Brad Choate for a non-funky RSS 2.0 template for Movable Type
There's still some sprucing up of the style to take place and I might apply the same approach to the RSS 1.0 and the new Atom 0.3 feeds if I get a bit more comfortable with XSL. But it's better than raw XML.
Anyway, for the most part, I think I'm about 85% complete on the redesign.
I know that the comment pages (e.g. the pop-ups and the previews) are still styled wrong. I'll get to that in the next day or two.
The content column (this white column) looks a little hinky when the content is shorter than the sidebar on the left, which only happens in a few of those categories where there aren't many posts. Not sure what to do about that. CSS gurus? Any ideas?
Also, my primary browser is Mozilla Firebird. I've checked the site briefly in IE and noticed at least one error in the comment form on the individual entry archive pages. I'd love to hear more feedback from IE users on Windows and Mac and as well as Safari and Mozilla users on the Mac. (And I suppose Konquerer et al on Linux, but don't expect to be a priority!)
I'm sure I've forgotten or missed some other stuff, so pardon the incorrectly styled comment pages and tell me what you think. Suggestions, feedback, constructive criticism -- all welcome.
I'm going to bed now. Nothing like coding CSS to cure insomnia. Sheesh.
Posted January 28, 2004 01:35 AM
Comments
Wow,nice work- looks rather modern, busted out of the standard MT template candy canes.
The top image is slick, maybe roating it every month would jaz things up. The white text gets lost a bit over the bright part of the lips.
On Mac OSX Safari, the main pages are fine. Yes the short content boxes are very "hinky"- the footer overlaps across the whole screen and the left side links dribble way down the side. No quick fixes off the cuff.
I have a site bookmarked at home that has a 2-3 column template that does not dribble when content is unbalanced...
The RSS feed link is just plain text code in Safari but all RSS comes that way. In IE/Mac, I saw formatted explanation, but there was no feed content below "the stuff below this point is the feed information.". Also the top banner reads:
"RSS Feed for
"
It is blank after "for"
The feed works fine in NetNewsWire (RSS reader).
Anyhow, thumbs up on the new design. Fresh.
Comments by Alan Levine . Posted January 28, 2004 05:38 PM
More- this comments pop up has my previous comment all center aligned- doubtfully the intent.
FYI, for font-family style sheet declarations, you should put font names that are more than one word in quotes- rather than:
times new roman, geogria, serif;
You need:
"times new roman", georgia, serif;
Some browsers I think choke on multi word unquoted fonts. You might want to toss a "times" in after georgia. Georgia is more distinctive and pleasing on the Mac than a PC (where it looks just like a slightly puffier Times), sometimes I toss in a "Bookman Old Style" before Georgia.
cheers
Comments by Alan Levine . Posted January 28, 2004 05:57 PM
To the hinky column problem:
put this at the end of your content div:
<br style="clear:both;"/>
Also, fixing Safari problems will fix most of the Konqueror ones, as Safari is a derivative. Apple's been contributing code back, but I'm unsure of how fast it's being integrated back into core.
Comments by anthony . Posted January 28, 2004 07:41 PM
Alan: yep, the white text on the image gets washed out. Looks fine on my notebook's LCD, but was really washed out when I looked at it on the CRT at work. I want to keep it as text, though, instead of including it in the image (as on scripting.com). I wish there was a way to stroke text in CSS.
I'm gonna have to work on the short content column issue. I staged the new design on a local MT install on my notebook -- since there were no archives to speak of, I always had a short left hand column and didn't catch this problem.
It's a shame Safari doesn't support XSL for the styled RSS feed. (I'm assuming you saw raw XML, not raw HTML correct?) Appears that IE/Mac doesn't render it well either. It's odd the top banner doesn't work, as that's just pulling the blog title from an MT template tag.
Mozilla renders the styled RSS best. IE/Win ignores some of the CSS styles of the XSL file.
I just haven't gotten to the comment and trackback pop-ups yet.
Anthony: tried your BR clear on the category pages template, but it didn't work. Tried it at several locations -- after the content DIV (right column), after the bodyblock DIV (which contains the content block and sidebar block) and after the outer block DIV (which contains header, navbar, sidebar, content, and footer DIVs). Didn't seem to have an effect no matter where I put it. :-(
From what I've read, the footer spanning multiple columns is difficult to make work in CSS. I may wind up just scrapping the footer and putting that info at the bottom of the content column.
Comments by Greg . Posted January 29, 2004 08:38 AM
Yeah columns are tricky (especially with floating elements), and I always forget the set of magic CSS rules that make them work.
I just cheated for my site by making my left column very short. :)
Comments by anthony . Posted January 29, 2004 09:26 AM
the XSL-transformed RSS feed looked even better for me when I changed the description value-of line to:
Comments by Sam . Posted February 4, 2004 12:44 PM
Cool, very very very cool. I also like your straightforward RSS thingy. And the lips :o) Any chance you shifting from bus dev. to tool design??? ;o)
Happy new year! Cheers, James
Comments by James Farmer . Posted February 5, 2004 09:04 PM
Nice design!
Comments by Steve . Posted February 19, 2004 01:39 PM