Slashdot Mirror
ALA 3 Goes Online
Qbertino writes "Jeffrey Zeldmans Alistapart ("ALA"), a very educative website for everything concerning webdesign, that also heavily promotes web standards, has come back online in it's third incarnation. As you might expect from one of the world leading web designers it works good in all standards compliant browsers and - other than recent attempts at webdesign - doesn't make your eyes bleed ;-)."
Yay! The article on tabs is particularly delicious.
After reading that the site wouldn't make my eyes bleed I happily went and took a look but ugh! All that red text and faint type. My eyes are bleeding! The content on the site IS good though. An interesting read.
I have all the optimisation settings on: As many FP (front page, not first post you nimwit) articles and +1 on every thread. Along with that, I have "AvantGo" style turned on so this place reads like a little retarded child of Usenet.
All I've got on every slashdot page is basic text, the Slashdot image link and NO banner image. I disabled it a while back.
So what's wrong with games.* ?
And now the same story, with semi-competent editing:
"Jeffrey Zeldmans A List Apart ("ALA"), a very educational website for everything concerning webdesign [no comma] that also heavily promotes web standards, has come back online in its third incarnation. As you might expect from one of the world leading web designers, it works well in all standards compliant browsers and - unlike other recent attempts at webdesign - doesn't make your eyes bleed ;-)."
I apologize for the grammar flame, but my brain was bleeding.
Gray text on gray background is good design?
4pt font is good design?
Physician, heal thyself!
Let's see: low contrast type. Doesn't expand or shrink to fit into browser window. *plonk*.
This is supposed to be the paragon of web design? ALA has good articles and ideas. I wish they'd followed some of them in their redesign. (Their second incarnation was pretty good. I wonder what happened...)
On each article page, there is a link labeled Permanent URL which you click to permanently bookmark the page. Now, i can't figure out how to get to a page in such a way where the permanent bookmark url is different than the page I'm viewing, but I'm sure that this is not good UI design. Why are all these URLs having to be reused? there is no good reason, especially with things like modrewrite. I've always found ALA to be useful, but often out of step with the true philosophy of the W3C. That being said, I think W3C HTML standards suck and are philosophically broken in the first place, so maybe he has a point.
Photos.
"Jeffrey Zeldmans Alistapart ("ALA"), a very educative website for everything concerning webdesign, that also heavily promotes web standards, has come back online in it's third incarnation.
Ah, if only we an "educative" web site for everything concerning grammar!
("Jeffrey Zeldman's Alistapart ("ALA"), a very educational (yes, "educative" is a word, and highly awkward one in this context, too) web site (but "website" is also apparently accepted) for everything concerning web design ("webdesign", however, is not -- perhaps in German?), which also heavily promotes web standards, has come back online in its third incarnation.)
Opinions on the Twiddler2 hand-held keyboard?
Uh... the day Slashdot links to Zeldman is the day I stop reading Slashdot...
Despite the comments about the faint color and fixed width, I think the site is a very good resource for any web developer. It has alot of great content on it, I found it useful when making http://www.mindwarp.net
Faint Text: Looks fine to me on three different monitors. Perhaps you should adjust your contrast?
/. would find my website rather trivial) Something of a middle ground can be found by using EMs to set the width of the text area as I have done with my personal site. By doing this the text column is resized along with the text size. Though the text size has to shrink to also shrink the column (though this too could be avoided with JS), it seems to be a good 85% of the time rule.
Fixed Width: It is a trade off. Yes, text could flow on forever until it fills the user's window width (which is very bad), or the text can be set to a reasonable fixed width, preventing users from resizing the text as desired (bad but less bad) but saving a lot of work for users that don't mind the choosen fixed width.
Final thought: (and this is not a plug in anyway because I am sure most of
Is it just me or is the new ALA logo a little phallic?
Here's a case where JavaScript might actually serve some use.
The The 80+-column eyestrain thing is a valid point. So is the point of making the page as wide as you want. What if a column were to default to 599px wide (using ALA as the example here) but then feature a "Wider" button which, when pressed, made the width of the column depend on the width of the window?
A button like this could be done in less than ten lines of JavaScript, and that includes functionality to make it toggle the fixed width on and off. With something like this, everyone would be happy, no?
That kind of thing is silly. Something like that should be user transparent. These kinds of things seeping into userspace are a Bad Thing(tm). Users don't need to know about your CMS. This kind of thing should be solved with proper architecture. In the worst case mod rewrite could serve as a bandage.
Photos.
As usual, A List Apart offers interesting insights on what can theoretically be done with CSS. What a shame about the browsers.
I've recently been involved in a complete redesign of a fairly large club web site (several dozen pages, several thousand page hits per month). One of our goals was to move from an old, table-based and clunky design to a streamlined system based on XML --XSLT--> HTML and CSS.
We spent a considerable amount of time investigating how the pages rendered on CSS-capable browsers, and ensuring that the HTML degraded to at least a readable form on older browsers.
Almost every attempt to use CSS for anything non-trivial was a complete failure. To give a couple of examples...
Firstly, we have a list of links across the top of each page, and (pretty much as the ALA article describes) we were using an HTML list to represent the content, and then using CSS to format it as a simple horizontal list with dividing bars between the links. This works great...
...Until someone shrinks their browser window, so that it's not wide enough to fit everything on one line, and the list has to wrap. Or just display as complete rubbish, with the border settings that normally make the dividing bars completely mis-rendered, depending on how charitable you're prepared to be. I wouldn't even dream of trying the techniques in the ALA article on a production web site: even current browsers can't handle the underlying concept of using CSS to change how a list renders significantly yet.
Secondly, we're using some fairly standard CSS tricks to get a two-column layout, with a main text column and a second column to its right containing supporting "footnotes", links, etc. Aside from the usual IE-doesn't-understand-boxes and IE-doesn't-understand-float-margins bugs, and the usual workarounds for them, this is working nicely.
So here's an idea: let's have the club's logo as a feint background image behind our main text column. (The logo is a somewhat intricate image that isn't very clear if you shrink it enough to fit as a graphic on the title bar across the top of each page, but works really well as a watermark.) You can set up a watermark by using a CSS background image, and we can position it "fixed" to prevent it scrolling away and enhance the effect without being too distracting when scrolling is required.
No current browser -- not IE6, not the latest Gecko-based ones, none of them -- gets even close to rendering the simple combination of a fixed background image and the usual CSS floating-DIV-to-get-columns tricks correctly. Actually, I was really disappointed with Mozilla's handling: after all the hype about Gecko being so standards compliant, its performance here was worse than IE6 in several respects.
It's perhaps worth noting that with slight tweaks to the CSS, we could get several similar effects to what we wanted, which pretty much confirms that (a) we did understand how the CSS was meant to work, and were using it correctly, and (b) the rendering screw-ups were browser bugs.
So what can we learn from this experience?
Well, our XSLT now generates the menu bar output "raw", without the nicer effects the CSS should have allowed. We still get
but the |s are characters not borders, and you can't do any of the nice highlighting effects we were looking for cleanly. It does, however, wrap sensibly in browser windows too narrow to display it all on one line.
We abandoned the idea of using a watermark image. You can have one for a full-width page, but getting it anything close to correctly placed and left there where columns are involved was clearly beyond any current browser.
All in all, we were left with a very disappointed feeling. CSS has such potential, and I hope that the few really good sites (such as ALA) will continue to push the limits of what should be possible. Alas, for now what actually is possible is nothing like the same thing, and that's really the defining rule for any serious web site.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
Suggested theme music for this site? Hmmm, Christine Lavin's What Was I Thinking? would be appropriate...