A Brand New Log

  Feb 28, 2004

So, what's this, the fifth or sixth redesign yet, or what? I'm not entirely on top of things yet, there are things here, and there, which need to be tweaked and fixed. Possibly a couple of browser bugs which need to be taken care of, I'm guessing Internet Explorer 5 for Windows and version 5.2 for Mac is going to give me trouble once I look their way.

Interestingly, or not, the only reason I had to rebuild my pages in Movable Type at all, was because I slightly changed the per-entry footer (where there is now an icon for the permlink), and because I made the entry title a link. That's it. Everything else in the re-design could be changed without rebuilding a single page. Thanks to CSS and PHP, redesigning and restructuring is a breeze.

Like last time (gosh, so long ago), I've taken the easily-skinnable approach. Whenever I get tired of this theme, which I've named simply "paint", I can easily change the key design elements without breaking my back in the process. I'm thinking about making a "lime" version next.

Kenzo & Tomas

I saw a CSS trick over att Clagnut's which I hadn't thought of myself; a simple way of adding drop-shadows to images with CSS. Actually, I couldn't quite get his code example to work, so I implemented my own, but the idea came from there.

Another first is changing the way bullet points look in ordered lists, haven't done that before here, nothing fancy, but here's how they look now:

  • isn't supposed to matter.
  • the options' respective order
  • In an undordered list

The blockquotes look similar to the way they've always looked over here:

There's an old saying in Tennessee -- I know it's in Texas, probably in Tennessee -- that says, fool me once, shame on -- shame on you. Fool me -- you can't get fooled again. George W. Bush

I used to think of non-repeating positioned background-images as a bit of a shaky way to implement designs with CSS, but with this design I've gone crazy with them and used them exclusively. There isn't a single img-tag related to the layout of this site, which is obviously the way to go. I'm late as usual.

What else? I've gone back to using Verdana in 11px, 19px line height for text. It's common, but in my opinion hands down the most attractive font/size combination among the few ubiquitous optimized-for-screens-at-small-sizes fonts available.

Update:

I've checked the design in every browser known to man, on both Windows, Linux and Macintosh. Internet Explorer, version 5.x for both Mac and Windows, display different design errors, but nothing more serious than I expected. Opera 6 has a couple of similar quirks, Opera 7 has some too, although different ones than the older version. The design looks just about exactly as I want it to in Internet Explorer 6, Mozilla for any platform, Netscape 6 and later for any platform, Konqueror, as well as Safari. Good enough for me.

Permanent link

Comments

  1. Nice work Thomas - it looks great! I like the brushed artwork look on the left side. You should move to San Mateo and start working for Six Apart.

    Comment by Greg at 01:16, 28 Feb, 2004 #

  2. You have the same problem as Clagnut when it comes to how the image-border renders in I.E. 5.2 for Mac. The shadow goes beyond the bottom of the image, about 2 - 3 pixels.

    Really annoying. It works fine in Safari, but not in I.E. I tried to figure out what was wrong, but couldn't get it to work (using Clagnut's code, not yours).

    Comment by Pythagore at 03:12, 28 Feb, 2004 #

  3. Like this:
    http://www.pestsmitta.se/dumps/ie1.jpg

    Comment by Pythagore at 03:24, 28 Feb, 2004 #

  4. Greg: You're too kind, as always.

    Pythagore: The browser in question, IE for Mac, is a buggy piece of shit, so I expected as much. Thanks for the tip though.

    Comment by Tomas at 03:28, 28 Feb, 2004 #

  5. I like the dropshadows effect. Just yesterday I saw it on:

    http://www.alistapart.com/articles/
    cssdropshadows/

    Liking your new design, it's totally
    different than the one before.

    Comment by Darice at 09:49, 28 Feb, 2004 #

  6. It looks good, though I would like to see a broader width on your main body (where the text is) since that is the important part of the page if you know what I mean.

    Comment by talisyn at 09:53, 28 Feb, 2004 #

  7. talisyn: Yeah I know what you mean. In my last design I had a dynamic width on the main column, what bothered me about that was that the amount of words per line wasn't optimal. With this fixed width the words-per-line is pretty much optimal, about 12-14 words per line with this font, in this size.

    Comment by Tomas at 12:28, 28 Feb, 2004 #

  8. I like it a lot. I'm still poking around with my own (the last modifications were CSS only, so I didn't need to rebuild anything), but still haven't found something I'm fully satisfied with yet.

    My biggest problem feels like getting the sidebar the way I want it.

    I'll steal that CSS dropshadow, though. Very simple idea, wish I thought of it myself.

    Comment by Johan Svensson at 14:21, 28 Feb, 2004 #

  9. That came unexpectedly. Very clean. The brush strokes remind me of the 'coffee cup' styling that was in effect when I first encountered Jogin.

    I was going to ask what had become of the 'contemporary links', but I see they're back now. Your reason for having a separate and self-titled permalink in addition to permalinking the entry title?

    Comment by Ryan at 23:59, 28 Feb, 2004 #

  10. Ryan: Regarding the double permalinks; Well, I only really wanted to have the one at the bottom (accompanied by a comments-icon on the front page, but absent from individual archives where it wouldn't make sense), but I figured that it'd be stupid to unnecessarily dissapoint or confuse those who expected the title to be a permalink, too.

    Comment by Tomas at 00:54, 29 Feb, 2004 #

  11. Nicely done, Tomas.

    Comment by resonance at 02:58, 29 Feb, 2004 #

  12. Beautiful.

    Comment by beerzie boy at 17:05, 01 Mar, 2004 #

  13. Very nice design. Very nice, indeed.

    Comment by Tommy at 08:50, 03 Mar, 2004 #

  14. The new design looks great, Tomas. My only problem is that the shadows look fine, except that the photo of you and the cat doesn't appear at all -- until I click and drag the image, which produces a version of the image at about 30% opacity.

    And, of course, I'm using the browser you hate so much. You'll pardon me, however, if I gloat about the fact that IE 5.1 Mac shows true PNG transparency while IE 6.0 Win doesn't. That's supposed to be a superior browser?

    Comment by Cheshire at 23:34, 04 Mar, 2004 #

  15. Cheshire: Hmm, odd, it looked ok in the BrowserCam screens.

    Oh, and I'm pretty sure I never called IE 6 "superior", because that would really be a travesty. IE for Mac is pretty weird though; it's better than IE 6 in some ways (proper PNG support, for instance), but fantastically diseased in others.

    Comment by Tomas at 23:56, 04 Mar, 2004 #

  16. Don't I know it. I didn't mean to suggest you debased yourself so; I just figured that a 6.0 anything ought to be an improvement over a 5.x version. Just sayin'.

    Comment by Cheshire at 01:36, 05 Mar, 2004 #

  17. Man, you're brilliant. Every time you re-launch, I have to fight an urge to copycat your design.

    Comment by Tomas Kohl at 11:22, 11 Mar, 2004 #

The discussion has been closed on this entry. Thanks to everybody who participated.