The CSSification of Advogato

Posted 27 Mar 2002 at 00:09 UTC by gary Share This

As part of the project to merge the codebases of Advogato, Badvogato and robots.net, we are considering moving some of the formatting of this fair site into CSS. If we don't get any major complaints then we'll do it, so speak now or forever hold your peace.

This move is being considered since the each of the three codebases contain a certain amount of hardwired formatting. We could resolve this by adding a myriad of configuration options somewhere, but this is clearly suboptimal considering that the W3C have gone to the trouble of designing a technology for just this purpose.

This buys us, the guys coding mod_virgule, cleaner code to work on and merge, but you'll want to know the impact on you, the users of this site. Well, the advantages are:

  • Smaller downloads (the CSS mockup is less than half the size of the original)
  • Better rendering in textual browsers (although it was fairly good anyway)
  • Immeasurably better for users with speech readers and the like

and the main disadvantage is that some browsers may not render the site properly. The purpose of this article is to convince everyone that this is not as bad as you may expect. I've produced a mockup of a CSSified frontpage (see the original for comparison) and made a few screenshots in various browsers to serve as examples:
  • Galeon (and hence Mozilla) before and after, Konqueror before and after, and Opera before and after: these guys all have good CSS support, so there are no problems. The coloured boxes are stretched across the screen but there is otherwise no difference in appearance.
  • Netscape 4 (the nemesis of CSS) before and after: the coloured boxes have lost their borders but that's about it.
  • Netscape 3 (before and after) was the main casualty -- the site has lost its colours. Netscape 2 (before and after) didn't have colours anyway, so that one is a draw.
The notable exception here is IE: I don't have a Windows box so I can't produce screenshots for this, although if you send some to me I'll post them with the others. The same goes for anyone else whose browser is not represented here.

The time to complain about this is now, so like I said before: speak now or forever hold your peace!


Damn CSSies, posted 27 Mar 2002 at 00:37 UTC by crackmonkey » (Master)

AH'll be dayumed if mah 'vogato grows up t' be a sissy!

other browsers with colour problems, posted 27 Mar 2002 at 01:37 UTC by rillian » (Master)

FWIW, IE 5.1 has the same no-colour problem on MacOS X.I don't have access to a windows machine either, so I thought I'd offer what proprietary help I could. The problem also occurs with Omniweb, but its CSS support is known to be poor. Mozilla is just fine, of course. Screenshots forwarded.

Still, seems worthwhile if we can merge the various forks. One presumes stylesheet support in other browsers will improve over time.

One thing though: the right-hand column seems to come out a bit narrow under Galeon.

BTW, I don't know if everyone's aware; there's been a virgule-dev list at zork.net for some time, and we recently moved the 'official' cvs for raph's branch to cvs.ghostscript.com:/cvs/mod_virgule from its previous home at the gnome.org. Please look there if you're interested in helping with the merge.

Complain?, posted 27 Mar 2002 at 01:58 UTC by Telsa » (Master)

Do it!

I need all the example css files I can get :)

More seriously, I thought that if it passed the W3 validator you were well on track to pass WAI and Bobby. This is surely a good thing.

I switched to CSS on my website. I get 1000-2000 hits a day. I got five comments about it, mostly along the lines of "Looks fine here". (Btw, Advogato should allow <q> tags :)) I got far more as a result of putting a character encoding in that wasn't us-ascii. I think you're safe with CSS :)

MacOS X screenshots, posted 27 Mar 2002 at 01:59 UTC by gary » (Master)

I posted rillian's screenshots for comparison: Omniweb (before and after) and IE 5.1 (before and after).

Sweet!, posted 27 Mar 2002 at 02:14 UTC by jdub » (Master)

Whilst we lose a bit of Advogato's randomness with the title bars and user bars all being the same width, a move to CSS would be tops - especially if it validates. :-)

Re: Netscape 4, posted 27 Mar 2002 at 02:28 UTC by jlbec » (Master)

Netscape 4 will lose its colors and behave like Netscape 3 if the user has turned of either stylesheets or JavaScript. I'm not saying that I care, just that it will happen :-)

background colour, posted 27 Mar 2002 at 05:50 UTC by jamesh » (Master)

Is there any reason to not continue setting the background colour in the <body> element? That would make the page suck a bit less in non CSS capable browsers.

cache friendly CSS, posted 27 Mar 2002 at 06:57 UTC by lev » (Journeyer)

i'm expecting to see something like,

    <link href="css/default.css" rel="stylesheet" type="text/css">

in the future advogato page source. please, please don't embed actual CSS codes in the HTML sources. with a little planning, the appearence of the whole site can be changed by altering that line of code, and this approach should be more cache friendly.

css source tag, posted 27 Mar 2002 at 06:58 UTC by crackmonkey » (Master)

Oh yes, I believe that was always the plan. Remember that virgule is a compiled .so that gets loaded into apache. We're all against making configuration knobs that require recompiles!

Go for it..., posted 27 Mar 2002 at 08:40 UTC by davidw » (Master)

Sounds good to me - the more sites that start doing this, the more people will eventually upgrade. I use CSS for my own sites, because I don't have a lot of time to futz around with tweaking things by hand.

older browsers, posted 27 Mar 2002 at 09:40 UTC by zephc » (Journeyer)

there is absolutely no reason to abandon older and weakly-compliant browsers with CSS. Just leave the old font tags in there, and use CSS too... maybe even have a user prefs setting that will toggle between CSS and traditional decoration tags.

Re: older browsers, posted 27 Mar 2002 at 11:02 UTC by gary » (Master)

zephc, whole point of switching to CSS is so get the formatting out of the generated source. Advogato and Badvogato look superficially the same, but they have to have font tags in different places to make them work. Must I spend two weeks merging the trees without CSS just to save a few people the five minutes it would take to upgrade their browser?

We won't "abandon older and weakly-compliant browsers" -- you'll at least be able to read the site -- and the switch to CSS actually helps really old browsers that don't support tables (and, of course, the difference is immeasurable if you use a speech reader).

IE6 screenshots, posted 27 Mar 2002 at 11:06 UTC by gary » (Master)

In other news, logic sent me some IE6 screenshots: before and after.

Raph's point, posted 27 Mar 2002 at 11:25 UTC by gary » (Master)

raph just made a fantastic point in his diary:
"One idea that might be worth considering is to use a tiny bit of text to indicate cert level. This would not only distinguish certs on CSS-losing browsers, but also help with screen readers, tiny wireless devices, and other less popular web browsing technologies."
CSS actually allows you to specify that a block of content should not be displayed, so you could make it so that a person's name in a coloured box as usual if you have CSS and "gary (Journeyer)" if you don't.

Go Ahead, posted 27 Mar 2002 at 16:00 UTC by DV » (Master)

As Telsa suggested it would be good to check with Bobby and the suite of W3C accessibility testsuite. Ultimately asking people from that community feedback would be an important step too. I have one person in mind, but there is so many reasons to make our pages clean and accessible...

Go for it, posted 27 Mar 2002 at 16:34 UTC by barryp » (Journeyer)

I'm genreally in favor of this sort of thing - there comes a point when you just have to give up on trying to make a page look exactly the same on old browsers like Netscape/IE 1,2,3 - as on a modern browser.

If it's done correctly, they'll still see the actual content - which is the main thing.

other browsers, posted 27 Mar 2002 at 16:41 UTC by crackmonkey » (Master)

It's true that using an older browser on a CSS'd virgule loses you nothing that using lynx doesn't lose you. I still haven't tried links with the colors turned on (I recall badvogato looking stunning that way!).

I like the notion of using the CSS to turn "(journeyer)" into a colored box. That actually results in a net win for lynx users!

Before any of you start moaning and rolling your eyes about lynx, I used it exclusively for advogatism in the early years. Why? Simple, because I could drop into a text input box on a Web page and easily launch $EDITOR, complete with HTML syntax highlighting. It's something I still hope for with mojira.

Yes, please!, posted 27 Mar 2002 at 16:53 UTC by Dom2 » (Journeyer)

Don't forget that using CSS will also allow themes to be easily applied to the same page. I just found the "View/Use Stylesheet" menu option in mozilla, which if there are several stylesheets with different titles, will give a choice of how to display the site.

Poisonous Web Candy, posted 27 Mar 2002 at 19:49 UTC by Zaitcev » (Master)

So far, every time anyone put CSS into their diary, it looked very poorly and used some unreadable font, so I had to skip most of such entries. Somehow it does not encourage me to expect anything good out of CSS. At least defaults can be adjusted by user.

If you want looks, make a website with PDF based diaries or something. I want to read the content in decent sized letters, not too big, not too small.

Mostly fine to me, posted 28 Mar 2002 at 06:23 UTC by tk » (Observer)

I use Netscape Communicator 4.73, and I don't mind the borders disappearing, but having certain articles titles rendered in a different font just looks ugly -- please refer to the title "Free Software: tools for Freedom and democracy" in the Netscape 4 screen shot). I suspect it is a browser bug, since if I shorten the title text, e.g. by removing the last two words, it renders just fine.

Removing the part of the style sheet that says

/* HACK: NS4 mangles it without a border */
border: 0px solid white;

seems to solve the problem, though I guess this hack was introduced due to some other reason.

Go all out, posted 28 Mar 2002 at 08:03 UTC by neil » (Master)

This is a site for free software developers, no? Of all audiences, this one should know the value of standards, and be best equipped for keeping up with standards. Advogato should take advantage of that fact, and make a stand for good compliant HTML.

Use XHTML for content and CSS for presentation. Of course, the XHTML should validate against the Strict DTD. Forget the old proprietary browsers; making the site accessable, standards-compliant (the current HTML doesn't validate against any HTML version), and more efficient is more important.

/me says go go go, posted 28 Mar 2002 at 09:27 UTC by bagder » (Master)

/me likes css

I agree with Neil, posted 28 Mar 2002 at 16:09 UTC by TheCorruptor » (Master)

In this day and age we should really be pushing for XHTML with CSS, my site uses it, is compliant (last time I parsed, which is a few weeks ago now), looks pretty identical on Linux/Mac and Windows, and itsn't all that shabby. If Advogato did things properly I'd be able to view the whole site on the 9210, or PDA as well, without getting odd artifacts or fixed sized fonts. XHTML is the way to go if you want to broaden the site to more than just the desktop and the savings on page generation are tremendous. No more table tricks for instance...

Advogato can easily look good without resorting to horrid kludges and deprecated markup, and I'm dubious as to why a site should be held back by Netscape 4 despite the number of FS coders that seems to cling on to it. ;-)

The tools are out there for validation and authoring! Go for it I say...

XHTML + CSS, posted 28 Mar 2002 at 17:45 UTC by julian » (Master)

I've been using XHTML + CSS for quite some time now... CSS even longer. I love CSS.

Why worry about it looking the same for everyone?, posted 28 Mar 2002 at 21:39 UTC by dlc » (Apprentice)

One of the things I've never understood about how people design for the web is the (compulsive?) desire to have about a page or site look identical for everyone. People don't think twice about "skinning" applications, heck, there are entire sites devoted to skinning apps, but people get very defensive about how a web site looks. While a reasonable attempt should be made for consistency's sake, spending time ensuring that every pixel lines up for everyone is a waste of time. I don't mean to imply that the time spent so far was wasted, or shouldn't be applauded; just that we should ensure that the layout and design doesn't become more of a focus that it absolutely has to be (at least not to the detriment of everything else!).

CSS fixes the "everything has to look the same" problem, to a certain extent; reasonable client software will allow the user to substitute their own stylesheet for the site-provided one (or ones), thus (potentially) rearranging the entire layout of a site. The accessibility issues that have been brought up several times here is a perfect example -- some people absolutely need to be able to use their own layout and configuration when accessing information.

I say, as long as the content is still accessible from as many clients as we can test it with, move forward with the CSSification. If it doesn't look the same in every browser, then so be it.

Control, posted 29 Mar 2002 at 00:37 UTC by barryp » (Journeyer)

There's a certain control-freak mentality in the graphic-design world, where they're used to exactly specifying how something will look when printed or whatever. No way would they send a job off to a print shop just expecting that the printer to do something reasonable with the fonts/colors/layout. They decide how things are going to look and expect the final product to be *exactly* what they planned.

I think a lot of that attitude carries over to the web. It's not necessarily a bad thing - wanting to control the impression you give viewers.

The problem is that the idea of precisely controlling how something looks just isn't practical given all the different displays/browsers/printers that may be used to render your work. But a lot of designers just aren't used to thinking in those terms, and go to great lengths to try and retain the control they're used to having over how their work appears. I think it's one of those deals that will just take time for attitudes and expectations to change.

Cased CSS considered harmful, posted 29 Mar 2002 at 13:30 UTC by gary » (Master)

Just got an email from a guy called Kenny Grant who says:

"Just in case you don't have a mac box to test on - I think the reason your page won't render properly on many of the mac browsers (IE 5.1, Opera, and iCab) is simply that the classes in [the stylesheet] are uppercase while those used in the actual page are lowercase..."
I didn't think this mattered, but I'll lowercase them all for the final design and hopefully it will all work out for the best.

Amen on Appearance vs. Content, posted 1 Apr 2002 at 20:41 UTC by Waldo » (Journeyer)

I say, as long as the content is still accessible from as many clients as we can test it with, move forward with the CSSification. If it doesn't look the same in every browser, then so be it.

Can I get an "amen?" Somebody buy this man a beer.

Bring it on, Gary!

IE5 screenshots, posted 2 Apr 2002 at 15:20 UTC by gary » (Master)

MikeCamel sent me before and after screenshots of IE5 on Windows.

do it, posted 2 Apr 2002 at 22:50 UTC by splork » (Master)

there is no reason to support browsers older than netscape 4 and IE 4 or to support people who turn CSS off.

turn on user-agent logging on your existing system and you'll see why.

Re: do it, posted 3 Apr 2002 at 02:17 UTC by gary » (Master)

"there is no reason to support browsers older than netscape 4 and IE 4 or to support people who turn CSS off."
It's real easy to handle browsers that don't support CSS: trying to stop Netscape 4 tripping over its big stupid feet is the hard part ;-)

It is done, posted 3 Apr 2002 at 08:45 UTC by raph » (Master)

Thanks again, Gary!

Good., posted 3 Apr 2002 at 08:59 UTC by realblades » (Journeyer)

Good that this is done.

HTML is absolutely horrible. Nothing good in it anywhere. CSS takes a tiny step in the right direction.

And it shouldn't break anything on broken browsers. Maybe they can't interpret the look anymore but the content should still come out right.

:( I dislike change to CSS, posted 3 Apr 2002 at 09:54 UTC by Malx » (Journeyer)

First of all (before you made alternate styles, so nn4 can't select them) I can't read pages at night!!! before I just type javascript:void(window.document.bgColor='grey') Or click on Bookmark item "SetBackground" , with points to same link.

Now I can't do this in Mozilla and Netscape4 both :(((((((((

And I dislike that all boxes are 100% of space, not those random as it was before :(

Re: Good., posted 3 Apr 2002 at 10:23 UTC by tk » (Observer)

Netscape 4.73 now crashes on me unfortunately, unless I turn off CSS. :( Apparently this time round it's caused by the use of the td.sidebar style.

Re: Re: Good., posted 3 Apr 2002 at 12:20 UTC by gary » (Master)

tk, I tweaked the stylesheets so it should hopefully be fixed now.

user agent?, posted 4 Apr 2002 at 21:57 UTC by xtifr » (Journeyer)

splork: while I agree that CSS is not a problem, your comment about "turn on user agent logging" is simply silly. Most alternative browsers support user-settable user-agent strings. So, all that user agent logging is going to tell you is that a lot of people find it convenient to claim that they're using IE, whether they are or not.

how many people munge their user-agents?, posted 5 Apr 2002 at 02:18 UTC by splork » (Master)

xtifr: yes, many other browsers do allow a configurable user-agent. i've never used it myself in konqueror or junkbuster (now called Privoxy), know of any studies showing how many people do use it? just curious. [i don't change it because i don't want to look in any way at all like i'm using microsoft products for fear that it'll just make -more- web designers use microsoft specific things]

-g

User agent munging, posted 5 Apr 2002 at 05:31 UTC by logic » (Journeyer)

Last time I checked, Opera mimics Microsoft Internet Explorer 5 by default. Most Opera users I've talked to are unaware the option is even there, let alone whether or not it truthfully identifies itself.

CSS FIX, posted 6 Apr 2002 at 00:11 UTC by Malx » (Journeyer)

I very dislike 100% width boxes, so here is CSS Fix. Please include it.

I have tested it with NN4, Mozilla, IE5, Opera6.

Bugs: IE - spaces between names of recent diaries and new users
Opera6 - same list is shown on one line (but with "user styles off" it is ok).

I thinks is is possible to solve this. If not - just make ability to use alternate styles.

1. chage this styles:

.level0 { background: #c1c1c1; max-width:80%; float:left; border: 1px
solid #606060}
.level1 { background: #c0ffc8; max-width:80%; float:left; border: 1px
solid #008000}
.level2 { background: #c0d0ff; max-width:80%; float:left; border: 1px
solid #2040ff}
.level3 { background: #e0d0ff; max-width:80%; float:left; border: 1px
solid #8000c0}
.level4 { background: #e0d0c0; max-width:80%; float:left; border: 1px
solid #804020}

p {clear:both} blockquote {clear:both}

2. correct HTML:

Change every "<b>Posted" to "<p><b>Posted" - this is both on
recentlog
and first screen etc.

3. correct HTML (this part adds spaces in IE, but solves list problem for NN4):

In userlist on first page change "<div" to "<p><div"

4. correct HTML:

Delete line:
<style type="text/css"><!-- @import "/css/notns4.css"; --></style>
it is not needed any more for NN4.

-------------------
And. If you will not include this pach :((((
It whould be very nice to include just max-width:80% - It greatly improves look'n'feel of site.

BG color fix, posted 9 Apr 2002 at 00:41 UTC by Malx » (Journeyer)

Fixed my BG bookmark to work on current Advogato style (Mozilla only):

javascript:void(window.document.body.style.backgroundColor='#777777')

one more, posted 19 Apr 2002 at 11:52 UTC by Malx » (Journeyer)

If you paste this:
javascript:{a=document.styleSheets.item(0).cssRules;b="left";a.item(3).style.cssFloat=b;a.item(4).style.cssFloat=b;a.item(5).style.cssFloat=b;a.item(6).style.cssFloat=b;alert(b);}

Into browser window (Mozilla) you'll get CSS fix. But... until HTML fixed it is not looks god :(

But still it is much better than 100% boxes :)

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!

X
Share this page