March 12, 2001

9:24 AM

The Layout Reservoir: For those reluctant to embrace standards compliant design, the good people at Blue Robot have provided an excellent starting point. The reservoir features three CSS based designs for you to borrow, edit, and learn from. It's a good thing.
posted by aladfar (21 comments total)

On a modem connection, I can see these pages load as text, and then quickly "snap" into place as the stylesheet is rendered. Makes me wish I could turn off stylesheet rendering (temporarily at least) to see how it looks in the base form. Say what you will about the Browser Upgrade Initiative, I'm glad it's encouraging pioneers like these folks to try and break new ground.
posted by harmful at 9:59 AM on March 12, 2001

Just noticed, though, that they don't seem to provide a link for downloading or viewing the style sheet by itself. A tool like CodeLifter (mentioned on Webmonkey) might make extracting the external stylesheet a bit easier.
posted by harmful at 10:04 AM on March 12, 2001

"I can see these pages load as text"
On DSL I saw the same thing the first time I loaded each page. One more reason I won't be using these anytime soon. I love Zeldman and agree with the theory behind what he's trying to do, but if you're only getting a few hits a day anyway I don't think there's much point in forcing your few devoted fans to upgrade their beloved - if out of date - browser.
posted by Outlawyr at 10:18 AM on March 12, 2001

I'm on a T1 and the delay is quite noticeable there too. I've found this Box Lesson to be easy to follow and faster loading.
posted by igloo at 10:26 AM on March 12, 2001

I've found this Box Lesson to be easy to follow and faster loading.

Really? On the first three examples, I could see the plaintext version for just a split-second before it snapped into fancy-CSS version, but on the Box Lesson you linked to, the whole page was loaded and I had time to scroll all the way down to the bottom and back up slowly and decide that nothing was going to render beyond plain text when suddenly it snapped into place.

Either way, it's annoying. What's the point of that pre-stylesheet rendering? Is it a browser bug? Anyone?

Nevermind, I just tried it with Mozilla 0.8 and it worked great. I'm assuming IE 5.5 is the problem. Must be MS trying to subvert the use of CSS. ;)
posted by daveadams at 11:08 AM on March 12, 2001

No delay on IE 5/Mac. I wish I'd known about these layouts before ripping every hair out of my head while trying to create my own CSS dependent layout.
posted by likorish at 11:16 AM on March 12, 2001

I get little or no delay at all on IE5.5 on a DSL-backed LAN connection.

As for reading stylesheets, IE5.0 for the Mac allows you to view the sheet in the browser by entering the location of it. Whereas PC's force you to download it and open it in Notepad, which is a pain in the ass.

Personally, I like being able to scrap tables and completely change my layout just be redefining a few divs, so I wholeheartedly agree with the WaSP campaign. Now just to polish up my redesign....

OFFTOPIC: any one know why SXSW award winners haven't been posted anywhere yet? It's almost noon Pacific time already....
posted by Awol at 11:17 AM on March 12, 2001

d'you think it's MS' interpretation of the @import command?

I haven't noticed that brief text rendering on any other sites that do CSS-layout, although a quick look at A List Apart (after wiping my cache to avoid a cached stylesheet), which uses @import, shows that not all sites using it have that plain text flash.

That's weird.

(IE5.5 on Win2k)

awol: And better yet for PCs, if you have Visual Interdev installed with it's default associations, it'll open Interdev and it's super-bloated CSS editor when you want to look at a stylesheet. Ick.
posted by cCranium at 11:31 AM on March 12, 2001

blue robot is one of my favorite sites, and i love the simplicity of the design. but before everyone abandons tables, you should be aware of an issue with CSS div-based layouts that i wrote about here. (please pardon the self-link, but it's easier than keying it all in again.)
posted by cfj at 11:41 AM on March 12, 2001

> What's the point of that pre-stylesheet rendering? Is it a browser bug?

Just guessing here, but I think the browser just starts displaying the document before it finishes loading everything, including the external stylesheet in the same way it normally renders text first while graphics are still loading.

I suppose a way (a hack with its own drawbacks) would be to actually include the stylesheet definition in the document's <head> instead of making it external. That way it would load before the page's content. And yes, this defeats one of CSS's greatest advantages. Although in some cases it may be practical to combine both inline and external styles.
posted by tremendo at 11:53 AM on March 12, 2001

cfj-

There are way to avoid the div-based problem you mentioned, either by tight proportions or setting the z-indexs so that if someone wanted a two-inch wide browser window, more crucial information will be displayed on top. Of course that is if you're left little recourse, otherwise you can absolute position and value your divs, and they'll work just like tables (i.e. you'll need to scroll for offscreen content).

I agree forsaking tables is early and unnecessary for a lot of people, but for those with a small (and generally geek-heavy) audience, it's fun to try something new that most of your readers'll be able to see just fine anyway.
posted by Awol at 11:59 AM on March 12, 2001

Awol: I've been wondering myself....the Web Awards winners, will be posted here on Sunday night after the ceremony...nothing yet. Ayone with gossip want to start a new thread?
posted by mimi at 12:15 PM on March 12, 2001

awol: yes, you can work around the overlapping problem by using those methods, but they have disadvantages too. especially if you factor in the dreaded netscape 4, which doesn't get along with CSS positioning very well.

i agree, there's nothing wrong with "proof of concept" designs. but i'm starting to see a flood of "good, now i can get rid of tables" posts, and other posts recommending it, and not much discussion of the very real drawbacks to this approach. it's great to know how to do this type of layout, but it's not time yet for everybody to toss their tables into the bit bucket.
posted by cfj at 12:40 PM on March 12, 2001

cfj, give the dreaded Netscape 4 a nice, plain unpositioned layout, because it doesn't properly handled CSS-positioning.

Regarding tables, I just think that's it's especially nifty that I can drastically change the layout of my page (indeed, my entire site) just by making a few changes to an external stylesheet, and not have to worry about having the style fall-through.
posted by cCranium at 1:49 PM on March 12, 2001

This Just In: According to a blurb on Who Would Buy That?, they've won the Best Weblog Category. (Boo-hoo, Alison, sorry.)
posted by Awol at 2:09 PM on March 12, 2001

Watch that caffeine intake, Awol! Here's a working link.
posted by Skot at 2:14 PM on March 12, 2001

ssorry I gott a ttyping probllem. Tthanks...
posted by Awol at 2:21 PM on March 12, 2001

I always use <LINK REL="stylesheet" TYPE="text/css" HREF="/styles/std.css" TITLE="stylesheet"> in my <HEAD>, and I never get that odd behavior. Any advantages to using @import?
posted by caderoux at 3:37 PM on March 12, 2001

@import is not supported by Netscape 4.x, so you can put all your Netscape-compatible styles in the LINK tag and then supplement them with additional styles for IE and other more modern browsers via @import. That's how I've mostly seen it used, anyway.
posted by kindall at 3:48 PM on March 12, 2001

kindall's right, but @import's only supported by CSS-2 compliant browsers, so it handles a wider range of non-compliant browsers then just NN4.x

I know, I'm being picky, but hey.

caderoux, I do the same thing - I use a server-side detection script to determine which stylesheet to load - which is why I was suspecting it's an issue with the @import implementation.

Since ALA uses some regular LINK tags too, the plain text effect may not be seen because the text's already formatted to a degree.
posted by cCranium at 5:13 AM on March 13, 2001

I just launched a resource similar to Paul's: CSS Layout Techniques.
posted by ericost at 11:50 AM on March 13, 2001