The elves have been busy. A List Apart, after months of teasing, lives once more. A brand spankin’ new design and backend publishing system drive the revised online mag, and three fresh articles kick off the rebirth.

Congratulations to Zeldman and everyone else who made this happen. It’s not easy balancing a) making money, b) a successful, non-profit project, and c) being newly-wed. Zeldman is truly the Man Apart.

Of course, having a vestedinterest in the topic of FIR, this is the sort of article I was dreading, but figured would happen sooner or later.

But this now-somewhat-outdated story (his own words) covers permutations involving display: none and visibility: hidden, which were popular at the time of writing; other methods have come to light since which would seem to solve some of the more dangerous problems. A forthcoming article is promised by the same, which I’ll be eagerly awaiting. §

Slight navigation tweak around here. Things may look funny. In those immortal words, when in doubt — reload. §

Bob Sawyer writes to inform us that the deadline for the ReUSEIT! contest is rapidly approaching, and now is the time to finalize your entry. A set of great prizes awaits the winner, and your work gets passed by an impressive lineup of judges (which I somehow managed to become a part of). §

Right. This gets me going. In response to yet another ripped off Zen Garden design (just the CSS, which is normally fine, except no credit was given and the license was removed, which is definitely not) —

I had asked a web designer to come up with an unusual design for [organization]. This is the design he came up with! I sincerely apologise for any distress this may have caused you. We would like to retain the design and I am happy to follow your guideline as to placing your accreditation, for your design on the site. I have since spoken to the web designer about this matter, and given my disaproval for how the sites design came about.

Note to You

If you’re re-using Zen Garden designs and trying to make money off of them, you will be found out, and probably in a highly embarrassing manner.

Note to Me

When there’s reasonable doubt, give the benefit of it to the victim. They may indeed be an unwitting participant. §

Argh. At first I was put out that OS X 10.3 was announced but two weeks after buying my iBook. Now I’m even more so because they just upgraded the whole line to G4 processors. Moving targets are frustrating. §

Reader Comments

ALA is yet another example of form taking precendence over function from prominent “web” designers. The site works on every browser, fonts are scalable, cool. The site is fixed width, an obvious mark of someone who hasn’t fully grasped accessibility (a group I didn’t think Zeldman belonged to).

Maybe you can answer this Dave, why do people put all this effort into great designs that can withstand a huge font size change but don’t account for the near infinite combinations of monitor/window/canvas sizes?

(sorry if its a little caustic, the site I’ve been working on for the past month launched today and it was fixed width against my constant recommendations)

In response to Eric’s comment: I think variable width design is overrated. In the end, you can only stretch a line of text so much and keep it readable and pleasing to the eye. Having text flow from side to side of a 1280x1024 screen with browser maximized hurts legibility and makes the site ugly. If what you intend to stretch is only the design, keeping the text in a fixed width column, there’s not much point to it then (although some designs do work well with this - not many).

Dave: Yeah, the stealing of CSS Zen Garden designs sucks. Any chance you may post links to the offending sites? It may be interesting to see what they are doing with them.

Sometimes the best solution is fixed width. And they just want more control. If things look exactly the same (the actual box holding the info), and you can read the text in the navigation and the articles – for usability’s sake, that’s what you came there for, right?

So what’s the point in making the box wider, especially since it’s more readable when paragraphs are shorter as opposed to wider (or fluid). If you’re a usability expert all you care about is getting your information to you as easiest as possible with enough options to make text larger. Doesn’t matter if the container is a little more skewed. At any rate, your window size dictates your site’s “container” – with fixed width, designer dictates it.

It’s not overrated when you are trying to read the site on a PDA or a phone and you have to constantly scroll two ways to read a paragraph. Designers should be concerned about the people with too little resolution rather than the people with too much. Hi-res users have the ability to shrink their windows, while low-res users don’t have the ability to grow theirs. It’s the same as scalable fonts, you don’t test what happens when you make it so small you can’t read it, you test what happens when you set it really high and things start wrapping and shifting.

There are obviously reasonable limits, you don’t need to design for a 30px wide screen, but your site should at least be usable on a PocketPC (typically 240x320).

And before you dismiss mobile/PDA browsers as an insignificant share, remember that its about forward compatibility. PDAs today, your car or a monitor in the headrest of a jet tomorrow. The PC will always be better than a phone (until they develop virtual monitors or something), but if I’m reading something on my PDA and it links to a site that I can’t read, do you think I’m going to bother to check it out next time I’m on a PC?

Lea, the designer doesn’t _dictate_ anything, they suggest/recommend ideas on how to display the page, thats the beauty of CSS-driven sites. If I don’t like your design, but I want the information (i.e. the reason I came to the page), I can get what I want without what I don’t want.

The fixed width design does (or at least, should) make it easier to read. That’s why newspapers are laid out in columns, for example. On the other hand, ALA could probably have handled the issue better - for example if the width was in ems then the column would become wider as the text size was increased, which might work a little better for people who need larger than default text. Then you’d have to set max-width to prevent horizontal scrolling in cases where the em width is wider than the window. In fact, this latter suggestion would be good even without the em width - if they set max-width to 90% on wrapper, then people with really narrow (i.e. less than 600px) browser windows won’t have to resize.

Anyway, if it’s a problem I suggest adding div#wrapper { width:100%;} to your user stylesheet. You could throw in some extra conditions to reduce the likelyhood that the rule would inadvertantly apply to a different site. You might need to tweak some of the other rules too - I haven’t investigated thoroughly.

Indeed, it’s terrible to read a site with unending lines of text (for instance, www.hutchnews.com full story pages). A fixed width is a good way to go, or a variable width with max-width indicated (doesn’t work on IE, however).

Now, with large resolutions, the site is hard to read (fixed width or not) because the text consequentially appears smaller. One thing to do is specify width in em, that way the width itself increases when the user increases the font size to make it easier to read. There’s obviously a connection between font size and width of a column of text, and that should relate the two pretty well.

Of course, as stated before, you can always just turn off the CSS if you don’t like it. Or specify your own. Whatever floats your boat.

ALA looks cool. More blog-y, though. And I like the colors better than the old one. But I’m not so sure about the grey text. ;-)

As for OSX10.3 and G4 processors… that’s life in technology lane, my friend. I’m trying to convince the company to buy InDesign 3. It’s not even out yet, so I hope by the time I get it, ID4 isn’t out. :P

As for the zen garden stealing: ah, when will people learn not to steal from prominent web sites? This reminds me of when someone tried to pass off waferbaby.com’s coding (the guy even left the “we eat bandwith for breakfast” comment tag in the HTML!) and got paid for it by some company. There was outrage and lots of complaints. The only bad thing is some people don’t know how to complain civilly and thus don’t get taken seriously.

On the OSX 10.3 issue, you might want to try authorizing your iBook even though it’s purchase didn’t fall within the stated dates. I had the same issue with a new PowerBook (although mine was just a few days too early) and was able to order the upgrade CD for $20 anyway.

Whilst i like the new ala design, i do prefer the old design. The little images for the article headers were always interesting to look at. The colour scheme was different and retro and it just really worked for me. Maybe we could have a style switcher to have the old look again? Another issue is regarding the urls of articles. All the ‘permanent links’ i had in my favourites are now wrong. Maybe a little server side auto-redirection would be good.

On a more positive note, the organisation of the articles is much better now and it’s really easy to find what you’re looking for. I might add a site search facility to quickly find certain articles though.

It’s easy to forget that the site isn’t a commercially produced one and therefore the authors/designers can do what they like. We can’t really complain about it. So I’ll be greatful for what I get.

Dunno if it’ll be of any help, but according to a post on Slashdot (http://apple.slashdot.org/comments.pl?sid=83145&cid=7280538) you may be able to claim some money back if you purchased your iBook (from an Apple store) less than 30 days before the new models were announced. Might ease the pain somewhat? Either that or, knowing your current luck with this, you’ll have just missed that cutoff date too ;)

The article images were a nice touch, but I’m sure it put extra strain on getting new articles out.

The new design is clean, and I think it’s more professional than the old. Both are good. A style switcher would work, but markup would probably need to be moved around quite a bit.

As far as it being non-commercial, I often find that commercial sites are chronically the most unattractive on the web. I usually find the most beautiful, usable designs are on personal or non-commercial sites. A List Apart is a great example.

Of course, there’s a big difference between the two, but I still don’t see why commercial sites tend to be so…undesigned. It has been getting better, and I’ve seen a fair share of nicely-done commercial designs. Lets hope it continues to improve.