05 Jan 2005 | Matt K said...

That CSS based headline is quite something. kudos to the designer!

05 Jan 2005 | Brenda said...

Beautiful, simple design, as we've come to expect from Coudal. But why are the pages so freakin tall? It's not easy to page through it like a book if you have to scroll down to see the last 8 lines of every column (this is on 1024x768, mind you). Made more kludgy by the fact that the back/next controls are at the *top* of the page, so you then have to scroll back *up* to "turn" the page.

Devil's in the details, boys.

05 Jan 2005 | Andres said...

I think the headline is pretty sexy and I'm no sematic purist, but the way it was made kind of puts me off. Such as:

CAST of
CAST of
CAST of
SHADOWS
SHADOWS
SHADOWS

Don't know, maybe I just don't see the value in the exercise if that's what it takes to make it.

Otherwise the type choice and the visual effect it creates it's quite attactive.

05 Jan 2005 | Darrel said...

If it fit my browser, I guess it'd be an OK way to read things. But it doesn't. So it's not. For me, at least.

But yea, interesting use use of CSS there.

05 Jan 2005 | Brenda said...

From Coudal's site:

"We'll have a lot more to say about the book in the future, but for today we hope this site covers a little ground in trying to take back the web from huge, imposing, scrollable blocks of vertical text."

{ahem}

05 Jan 2005 | Coudal said...

We tested a bunch of versions size-wise.
FWIW, here's a page from the smallest one...

http://www.castofshadows.net/smaller/text04.php

maybe we'll have to sniff for display size or figure out some way to effectively center things verically.

05 Jan 2005 | Mike D. said...

To Andres' comment about the semantic weirdness of that shadowing technique:

I agree that it's weird from a code standpoint and my first instinct was to look at the code to verify that the text had to be repeated to achieve the effect, but I say "so the fuck what?" Seriously, I'm all for good code but what the user sees on the screen is ten billion times more important. I do think you could probably make it a little cleaner by laying the full phrase "CAST of Shadows" on top of itself three times with absolute positioning, but again, it's not "totally pure" so purists will still bitch and moan.

Realistically, the type is probably better suited to be image-replaced or sIFR'ed, but so what... it's their site and whatever they want to do is by definition, fine.

05 Jan 2005 | Brenda said...

That smallest version is almost there, but still about 1.5 lines too long for me.

Someone pointed out that the International Herald Tribune's story columns adjust to browser window height. Granted, the columns are relatively short to begin with, but it's nice to know it can be done.

http://iht.com/articles/2005/01/05/asia/web.0105powell.html

05 Jan 2005 | Blake Scarbrough said...

I like the title effect with CSS. I think that the style outweights the clean code in this instance. It is one headline, used once (not on every page) and until CSS3 becomes a reality it works for me.

I would like to see an option to print it. You could even have it print on landscape size paper.

05 Jan 2005 | Tim Uruski said...

Re Mike D's comment:

Concerning the semantic purity problem of the code, I agree that getting twisted out of shape over the code is kinda pointless if it gets the job done on screen. But if someone who used a screen-reader came to the site they'd be hit with "Cast of cast of cast of shadows shadows shadows."

When I cut code for semantic purity I always check what the site looks like without styles, just to make sure that alternate viewing methods aren't going to get something totally unusable.

And I'm with Brenda on the top-positioned buttons, this makes no sense at all from an information flow perspective.

Otherwise, excellent job, white-outlined, italic text with a drop shadow looks beautiful and the clean layout lets the reader focus on reading.

05 Jan 2005 | Mike D. said...

Maybe it is the developer's intention of enhancing the experience for visually-impaired people with a nice echo effect.

05 Jan 2005 | Jim Coudal said...

Hehe Mike. Actually it wouldn't be so echo-y if I didn't want the drop from the descender of the "f" in "of" to come in front of the "O" in "Shadows". Then it would be more like a chant, "Cast of Shadows, Cast of Shadows, Cast of Shadows."

05 Jan 2005 | Darrel said...

I like the title effect with CSS. I think that the style outweights the clean code in this instance.

Why not just an image, though? Same style, but better semantics.

It is a nice CSS trick, and it's fine in that context.

Maybe it is the developer's intention of enhancing the experience for visually-impaired people with a nice echo effect.

;o)

05 Jan 2005 | DaleV said...

What are you people using that makes those pages not fit?! 1028 x 768? Heck, a Palm practically has that resolution. The days of limiting design for the lowest 3% of viewers are LONG over.

05 Jan 2005 | Mike D. said...

Nice Jim. I like the chant idea. Hey, will you allow me to chant something in your direction really quick?

"Please fix the coudal rss feed. Please fix the coudal rss feed. Please fix the coudal rss feed."

Being the big fan that I am, I *need* to know the very instant new stuff gets added to coudal.com or else I feel hopelessly out of the loop when I hear about it on 37signals for the first time. Or is that sort of the idea? 37signals is the surrogate feed for cool stuff on Coudal?

05 Jan 2005 | JD said...

Agreed with Mike on RSS Feed.

Please fix the coudal rss feed. Please, please and please!

I hope they will listen!

JD

05 Jan 2005 | Jim Coudal said...

OK guys, working on it now, it's very odd and seems to only effect web-based aggregators...

05 Jan 2005 | Darrel said...

What are you people using that makes those pages not fit?! 1028 x 768? Heck, a Palm practically has that resolution. The days of limiting design for the lowest 3% of viewers are LONG over.

Uh...screen resolution != brower viewport size.

05 Jan 2005 | xMan said...

The next level? I first saw this technique back in 1997 or 1998. It's rather sad that it's taken so long for it to become fully cross-browser, but it's not sound groundbreaking as you seem to believe.

05 Jan 2005 | cleopatra said...

Comic Book Guy is right! Worst. Sound(?). Groundbreaking. Ever.

06 Jan 2005 | tomas said...

The book sounds cool, looking forward to it.

06 Jan 2005 | tomas said...

Is the paragraph start before "an affair than he..." on page seven a mistake?

06 Jan 2005 | Rhythm Guitar said...

Jim, screen resolution sniffing would do you no good in my case. My resolution is 1280x1024, but my default browser window size is 800 pixels wide. I have a 22" monitor and don't want the browser window to cover the entire screen. So, Dale, I wouldn't peg myself as being in the lowest 3% category.

06 Jan 2005 | UltraBob said...

I'm afraid I just don't see the point of doing that title in css. It may be minutely smaller than an image of the same thing with an alt tag, but it is much less accessible, for the same look in the end. Not only screen readers, but even my cellular phone which will load and resize some graphics within reason will see the odd text, whereas all of these alternate devices that don't support css properly (even one's that do support images) will now see

CAST of
CAST of
CAST of
SHADOWS
SHADOWS
SHADOWS

Also, giving no alt tags for the links to move forward and back through the book, means that these users will never get past the cover anyway, since they will see no links.

I know that these alternative devices aren't the target, but would it be harmful to make the content accessible to them since it doesn't take any extra work really?

06 Jan 2005 | Jim Coudal said...

giving no alt tags for the links to move forward and back through the book, means that these users will never get past the cover anyway, since they will see no links.

Duly noted. Thanks.

06 Jan 2005 | JF said...

I'm afraid I just don't see the point of doing that title in css.

The point is it's an experiement. Please applaud experiments.

06 Jan 2005 | Jim Coudal said...

Anybody wanna talk about the book? I'll get Kevin, the author, to chime in. It's a really fast-paced, inventive, smart and sometimes creepy story. We've passed around an advance reader copy here at the studio during the last couple weeks and everyone has been blown away by it and also by the fact that Kev has been hiding such a dark side for so long.

06 Jan 2005 | Mike D. said...

I would love to talk about the book, but unfortunately, I don't read. I know it's a sin, but with so many comment threads about CSS to peruse through on a daily basis, who has time for novels anymore?

06 Jan 2005 | Darrel said...

ha! Yes, what we need is a novel in blog form. 3-paragraphs at a time. ;o)

06 Jan 2005 | B. Hunter said...

I don't 'read', I skim. ;0

06 Jan 2005 | scientist said...

The point is it's an experiement. Please applaud experiments.

unless it's a design experiment with images or flash. then bad cause usability suffers? uh huh. what's good for the goose...

06 Jan 2005 | lisa said...

I think that title looks pretty damn good --
especially b/c it was built in css.

Applauds for experimenting.

06 Jan 2005 | Jamie said...

Jim, what about a downloadable PDF? I actually do read. But maybe I wanna take this with me offline.

06 Jan 2005 | Jim Coudal said...

In the works Jamie

06 Jan 2005 | Eamon said...

Well, for some fairly low value of "experimental". Microsoft's CSS Gallery featured CSS drop shadow headers done in exactly the same way back in 1996. I should also point out that the effect doesn't even work properly on my browser (MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322); the descender on the 'f' is cut off by a white line.

Nice color scheme, though.

14 Jan 2005 | headsfromspace said...

Wow! Is all I can say. Seriously unique and visually beautiful. A stunning way to present fiction on the web, and one that should be duplicated.

About the triple header: One nice advantage of it not being an image file is that no image file has to be downloaded, so a lighter page, eh? A clever trick. One I'm itching to duplicate and experiment with.

Congrats to the designers of this site.

24 Jan 2005 | headsfromspace said...

re: Concerning the CSS header, I did recreate it for an about page, but using a lowercase serif font. Still a pretty nice effect! One thing that I found was that it was possible to convert all the divs to headers by just zeroing all the margins.