New Design
Jul 22, 2003
My previous discussions with Cheshire and Jeff on CSS ignited something of a burst of inspiration, or something to that effect. The result, as you can see, is a new design.
Actually, this is not just a minor tweak as one might think or expect, the markup and the stylesheets have been completely re-written from the ground up. The markup is significantly cleaner than before and should be very readable in a text-only browser.
For the first time here, at casa de la Jogin.com, we now come in several different flavours. Fun for the whole family. The flavours are:
"Charlock" is the default theme, mostly because I want to keep the Familiar Look and Feel (TM) that's supposedly so important. I might change it. Or not. What do you think? Which do you prefer?
Chesh mumbled something about mixing primary colors and that he will publically "disown" me if I include the "Pacific" theme, and I wouldn't want that to happen so I'll leave it up to you guys; does "Pacific" stay or go? Be advised that I don't know what Chesh will do to you, or me, if some of you happen to vote for it, it could get ugly.
Update: Oh gosh, I think I misunderstood Chesh completely, he was referring to this test theme, probably.
Update: How could I forget? Thanks, Darice, for reminding me; one can switch between different themes in a new listbox in the right hand side column (way down there).
The author page has been renamed and re-written; it's now the Colophon, it's not quite finished yet though. Colophons are popular nowadays and since I want to be thought of as a happening kind of dude, I'm jumping on the bandwagon. The problem with irony is that you never know how much to add; if you just sprinkle ironic hints it might not convey itself properly, and if you soak it, it's just not funny.
I used Browsercam to see what the site looks like in different browsers, it seems that it looks just peachy in everything but Internet Explorer 5.x for Mac. I'm trying to fix that but I don't know quite where to begin. Other than the mentioned offender, the site looks and works as intended in every reasonably new version of every major browser for every platform which I've been able to test it for.
Update: Just to clarify; I've used zero CSS tricks which take advantage of rendering bugs, or syntactical bugs in different browsers. I have, however, exploited the fact that IE does not have support for adjacent CSS sibling selectors, and that way applied more, or less, margin to certain elements in Mozilla, than in IE. See my Browsercam line-up for results.
It validates, almost. W3's validator complains on this single line:
<p class="separator"><hr /></p>
I'm not sure what I'm going to do about that. What it does is that it shows the little center aligned symbol to everybody who's got stylesheet support, and a horizontal rule to everybody else. Perfect, except it doesn't validate.
It comes down to pleasing the validator or pleasing the browsers, I guess. An easy choice if you think rationally, but that "Not Valid" message stings like hell.
Update: I downloaded the XHTML Transitional 1.0 DTD and modified my version to treat hr like a "%special" element instead of a "%blocktext" element. Now it validates, as my homebrew version of XHTML Transitional 1.0.
Uhm, is this legal?
I think I'm done converting all pages now.
Comments, please!
Comments
I like your new design. I must say I like your
Pacific, it is bright and eye catching. But I prefer
Carbon. It is more relaxing if you spend a lot of time looking at the website.
Why don't you add a standard design switch for three
different designs? So everybody can choose the one
they like.
Comment by Darice at 16:56, 22 Jul, 2003 #
Nice! and you know that my fav. is the Burgundy theme. Something for the ladies. I guess wanting a pretty flower somewhere is pushing it too much? *grin* J/K.
And you should definitely not get rid off the pacific theme. It's nice to have some colours on a grey rainy day. No matter what Chesh sez! :)
Comment by Maria at 17:33, 22 Jul, 2003 #
I like them all. You have done a superb job, Tomas! "La casa de Jogin.COM" is looking better and better...
Comment by David Collantes at 18:29, 22 Jul, 2003 #
I’m voting for the ”Test theme”. Very uhm… abstract, and somewhat original... =)
Comment by Magnus at 19:03, 22 Jul, 2003 #
"Pacific" theme rocks :)
Comment by Lawrence Oluyede at 20:48, 22 Jul, 2003 #
I have been maligned. I thought the Pacific theme was very nice. It was indeed the test theme to which I objected, as you noted in your update.
As to the validation problem of the horizontal rule -- just wondering about the syntax: what is the slash in that hr tag doing there? Could it be that simple a fix, removing the slash? Or is that a CSS thingy?
Comment by Cheshire at 23:55, 22 Jul, 2003 #
Nice! You're doing better than I am cross-browser at this point.
I'm not sure why IE6 is happy, but AOL 7 is retarded.
Oh well.
:-)
Comment by Chris at 23:57, 22 Jul, 2003 #
Cheshire (and anyone else curious): The slash in the <hr /> is there because it must be; XHTML does not allow any kinds of open tags, at all. All tags must be closed, even the single-tags like hr and img, and the trailing slash is how you close a single-tag.
It didn't validate because a %blocktext element (hr, blockquote, etc) isn't allowed inside a %block element (p, div, table, etc). I modified the DTD to treat hr as a %special element (img, applet, iframe, etc) instead, which is allowed inside a %block element.
The DTD -- Document Type Definition -- is the document that defines what tags and attributes are allowed and how they should be treated, any HTML or XHTML document should have a reference to it as the very first line in the file (the DOCTYPE).
Comment by Tomas at 08:29, 23 Jul, 2003 #
The topnavigation (weblog/archive/colophon) doesn't work in Opera (on my PC anyway), just so you know. Otherwise I like the design.
Comment by talisyn at 14:49, 23 Jul, 2003 #
Thanks for the head's up Talisyn. What version of Opera are you using? It looks fine in Opera 6.0 (Mac) and Opera 6.05 (Win).
Maybe 7.0? Hmm, if Opera accuses me of using some style-sheet thing to deliberately thwart their browser, it won't be the first time.
Comment by Tomas at 14:57, 23 Jul, 2003 #
hey nice update. and padded text boxes :P rather cool. must say i like carbon although the default is still cool.
Comment by cyberhill at 12:02, 24 Jul, 2003 #
I'm currently using the 7.10 version of Opera. Don't know what they've done on this new version, but as I said the navigation doesn't work.
Comment by talisyn at 12:54, 25 Jul, 2003 #
May I chime in?
My first reaction (no matter what the flavor) was "what's that blank color bar at the top for?" Now, before going on, I want to make sure that I am seeing what everyone else is supposed to be seeing. I'm using IE 5.2 (OS X) and, as in your previous design tweaks, Tomas, the right column is now at the bottom of the page).
So, given that the design may not be rendering correctly on IE Mac, IS there supposed to be text or something in the top color bar? If there isn't, I think it "looks" like it should have something there. Otherwise it appears to be gratuitous.
Comment by Jeff at 17:46, 26 Jul, 2003 #
Jeff: You can check my browsercam results for how the site looks in all other modern browsers (slight quirk in Opera 7, it seems).
Comment by Tomas at 20:09, 26 Jul, 2003 #
The discussion has been closed on this entry. Thanks to everybody who participated.