Fight for css layout being lost?

[Kris]

For now, I'm convinced that CSS layout is for "hobbyists" only. If you're a
fan, go for it by all means. Me, I'm sticking with my tables. . .

Well, I'm a professional and I will only be using CSS layout from here on
out.[/QUOTE]

Ditto here. Backed up by an entire company, not CSS Lone Ranger in a
corner.

 

[Kris]

Then it's up to the specialist to limit the options to what is good
for the web.

Yep. Problem is, my boss doens't want that, and our designer is a
fixed-everything dude.[/QUOTE]

A whole company needs to believe in it before one can pull it off
succesfully. Often, the best person to convince is the boss himself,
because he can 'persuade' the rest to follow the path.

 

[Kris]

I think that the people that favour the beauty and simplicity of CSS
also favour the same in webdesign. Personally, I think a website is
all about it's contents. In my opinion, it's important that the
content is easy to find and pleasant to read. The way it looks is is
secondary.

For many corporate sites, this is just the other way around. They want
it to look good, and whether the text is pleasantly readable is not
that important.

I believe in the near future this will change. The audience is changing.
Instead of a newly flashing gadget that is 'cool', the web is turning
into something that is part of people's daily lives, something ordanary.
When people visit website they will want to get something done, to get
the information they are looking for, no be impressed by shiny things.

 

[Barbara de Zoete]

Well, I'm a professional and I will only be using CSS layout from here
on
out.

Ditto here. Backed up by an entire company, not CSS Lone Ranger in a
corner.[/QUOTE]

I am not a professional. I embrace CSS also. I heared of CSS little over a
year ago and immediately saw the hudge advantages of separating content
and presentation, markup and styles.
Since then I've learned a lot (me think ) and I wouldn't have it any
other way. Recently rewrote my style sheet to clean it up and shrink it.
Took me about two hours and all was done. Also created an entirely
different site (presentationwise) with all the existing html pages, just
by creating a new stylesheet (it's not on-line), just under three hours.

I love this stuff and, no, it is not hard to learn if you set your goals
right. Start with styling the existing html selectors and their
attributes, learn about creating (a minimum amount of) floated or absoluty
positioned div's for laying out pages after that, and there you are, you
have 'mastered' it.

 

[Mark Parnell]

A quick glance at Wired's
site reveals that it could be done with the simplest of tables and CSS
typography, i.e. banner with 3-columns.

But the point is, it _used_ to be done like that - and they decided to
redo the site in CSS (2 years ago now!). Their reasoning is here:
http://www.wired.com/news/explanation and in more details in this
interview: http://devedge.netscape.com/viewsource/2002/wired-interview/
(site seems to be down ATM)

As I pointed out earlier, CSS
layouts tend to very simple and I think that reflects that complex
layouts -- the big advantage of CSS -- are, at this time, difficult to get
right.

As someone else mentioned elsewhere in this thread I think it is more a
reflection on the fact that few of those who pursue CSS layouts are
graphic designers. And few graphic designers are interested in CSS. That
is slowly changing, as sites like csszengarden show.

It CAN be done.

Absolutely. And IME the benefits far outweigh the drawbacks.

 

[Henry]

Okay, Spacegirl has beaten me to the point here. A quick glance at Wired's
site reveals that it could be done with the simplest of tables and CSS
typography, i.e. banner with 3-columns. As I pointed out earlier, CSS
layouts tend to very simple and I think that reflects that complex
layouts -- the big advantage of CSS -- are, at this time, difficult to get
right.

It CAN be done. I love browsing csszengarden.com to see the lovely
possibilities. But that's a site for graphic artist types working in a
digital medium, i.e. serious hobbyists.

Check how i done...


1.

<style type="text/css" media="screen">@import "/c/default.css";</style>
<link rel="alternate stylesheet" type="text/css" media="screen"
title="player" href="http://www.kcchiefs.com/c/player.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="cheer" href="http://www.kcchiefs.com/c/cheer.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="normfont" href="http://www.kcchiefs.com/c/normfont.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="friendlyfont" href="http://www.kcchiefs.com/c/friendlyfont.css" />
<link rel="stylesheet" type="text/css" media="print"
href="http://www.kcchiefs.com/c/print.css" />


2. Wired

<link rel="stylesheet" type="text/css" media="screen"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/cshp/wnScreen.css"
/>

<link rel="stylesheet" type="text/css" media="aural,braille,embossed"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/wnOther.css"
/>
<link rel="stylesheet" type="text/css" media="print"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/wnPrint.css"
/>
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/wnSm.css"
title="Small Text" />
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/wnLg.css"
title="Large Text" />
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="http://a1112.g.akamai.net/7/1112/492/2002091465/www.wired.com/news/v/20020914/css/wnLg2.css"
title="Larger Text" />
</head>

3.ABC News

<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(/css/base.css);
@import url(/css/content.css);
@import url(/css/home.css);
@import url(/css/sifr.css);
/* ]]> */
</style>

 

[Guest]

Previously in alt.html, "<<M>>" <[email protected]> said:
But the point is, it _used_ to be done like that - and they decided to
redo the site in CSS (2 years ago now!). Their reasoning is here:
http://www.wired.com/news/explanation

The article concedes that 14% of surfers aren't going to see the new version
and will see a simpler version. It also admits that of the remaining 86%,
some are going to experience unpredictable quirks. (If you were a paying
corporate customer, how happy would you be to be told that upwards of 15%
aren't going to be able to see the spiffy new site? How about the
professional designers here -- do you give a 15% discount to clients if
their site is CSS versus tables? )

That said, they still reverted to the simplest form of a website -- the
tried and true 3 columns with a banner across the top. Why bother with the
turbo-charged, new improved Web-language only to use it to produce something
that could be produced more reliably with the "stale" old stuff?

Am I convinced yet? Naah. It's a boutique technology for now. Another
generation (or 2) of browsers will have to come and go before, I suspect
before the final verdict is in.

M

 

[Toby Inkster]

Looking at real world results - not idealistic theory - and you'll see
HTML tables are the clear winner. If you care about winning, then you
should focus on having a simple, functional, HTML table-based website
that looks good to 99.999% of internet users..

I still point to http://hardcandy.org/ -- my challenge is to emulate that
layout (note: keeping the fluid width) without using any CSS. Go on. Try.

 

[Toby Inkster]

I've seen your website and it impresses me a lot. However, I think you're an
exception to the rule. The other CSS-sites of some of the purists here are
very simple. No reflection on their talents -- I think it's more a
reflection of the fact that designing complex layouts in CSS isn't as easy
as the "hobbyists" would have me believe.

Well, I respectfully disagree.

I think the reason you don't see an awful lot of CSS layouts out yonder is
for two reasons:

- graphic artists don't understand The Web and the way it's
supposed to work; and
- techies don't usually make good graphic artists.

Thus you only see really good CSS designs when these two types of people
overlap.

I'm not going to claim to bridge both groups. You may like some of my
designs (for which I am flattered), but that's only because (a) I've
learned a few effective design tricks; and (b) you haven't witnessed the
many shite designs I've tossed away.

But there are some rare people that do fall into both camps. For instance
I quite like mezzoblue.com (made by the guy who created the Zen Garden),
even if it is fixed width (which is annoying as I have a high-res screen).

Els, who honours us with her presence in this group, is also similarly
blessed. (http://www.locusmeus.com/) The layout is fairly uninspired, but
the photography and colour schemes are great.

I had never heard of the word "kludge" before I started studying CSS.

If you take the CSS 2.1 candidate recommendation, you will find that (with
*no* exceptions as far as I'm aware) *any* table-based layout can be
*easily* replicated in CSS, but not vice versa, IF YOU IGNORE INTERNET
EXPLORER!

IE throws a spanner into the works, a fly into the ointment, or if you
prefer, a blot onto the landscape. It doesn't support a major feature of
CSS that allows easy table layout emulation -- "display:table". Yes,
that's right -- in CSS you can get non-table elements to display like
tables, like table rows, like table cells, etc. But it's not supported by
IE.

This is why kludges are occasionally needed. But once you learn a few, you
have them in your toolbox and they're pretty easy to take out and apply to
a particular job at any time.

You'll look at a page in IE and think, "oh yes, *now* I remember, IE
doesn't support flibble, so I'll have to wibble the plibble to get it to
work right."

And it's not hard. But for most pages you'll be able to do 99% of the HTML
and 90% of the CSS without having to think like that. I certainly seem to
-- it's only one or two problems towards the end that need kludges.

 

[Guest]

Henry wrote:

I still point to http://hardcandy.org/ -- my challenge is to emulate that
layout (note: keeping the fluid width) without using any CSS. Go on. Try.

Okay I accepted the challenge.
http://www3.telus.net/public/tao55/index.htm

Took about 40 minutes using a combo of FPX (gasp!!) and Notetab Pro. No
pre-planning on my part, I just winged it.
I didn't produce your third para of text but it would have been easy enough.

Not quite as polished as your site, but the fluid width is there, no?

A couple of observations:
1. I'm strictly a dabbler at web page design.
2. I probably could have refined it to make the code a little "prettier" --
as I said there was no planning on my part.
3. One nested table but I don't think that's excessive.
4. Your blue outlining has me stopped. I could probably produce something
close to it but not, admittedly, without a lot of trouble. I consider that a
minor issue. The challenge was to meet the fluid layout. (I could probably
produce some tables stuff that would be difficult to easily produce in CSS
for a CSS dabbler.)

Final point:
1. With some preplanning, I could save the content as formatted html files
separately. To change my layout I quickly whip up new tables -- I could even
some of those in template form suitable for tweaking -- then use FPX's file
insert function, or Notetab Pro's search and replace functions to quickly
whip up a new layout.

So how did I do?

M

 

[rf]

Try.

Okay I accepted the challenge.
http://www3.telus.net/public/tao55/index.htm

Where are the pretty border lines? That is the bit Toby is challenging you
to reproduce.

 

[Toby Inkster]

Where are the pretty border lines? That is the bit Toby is challenging you
to reproduce.

Yes, the border lines are an important element of the challenge.

They are one of the elements of the page that makes it AFAIK impossible to
emulate using tables without losing fluidity.

Also your right margin is practically non-existant.

 

[rf]

Toby Inkster wrote

Yes, the border lines are an important element of the challenge.

THE important bit I think. The rest (without the borders) is just a few
shrewdly aligned tables.

They are one of the elements of the page that makes it AFAIK impossible to
emulate using tables without losing fluidity.

I've been sort of fiddling with it since you threw down the gauntlet a year
or so ago, in a sort of topdown, spend a few minutes on it here and there
basis.


Slowly getting there. Mostly deprecated stuf and of course the padding
inside the table cells will need lots of nasty spacer gifs, or even
<shudder> spacer tables </shudder>

 

[rf]

rf miswrote:

news[email protected]...

Strewth, where did that creep out from?

http://users.bigpond.net.au/rf/hardcandy.html

There, that's better

It's the martinis. The missus is over at Leanne's place imbibing champagne
so what is one to do?

 

[Henry]

Henry wrote:




I still point to http://hardcandy.org/ -- my challenge is to emulate that
layout (note: keeping the fluid width) without using any CSS. Go on. Try.

That's all, Toby?

Piece a cake.

15 minutes.

Used FP and I just copied your text and didn't try to clean the code.

I didn't use css for margins etc but that would make it perfect.

My page size - 5.78 kb
Yours - 5.91 kb

You wanna borders?

There you have it!

http://members.westnet.com.au/satori/hard.html



BTW. You wanna me to give you a challenge to emulate tables with css?

 

[Dylan Parry]

http://members.westnet.com.au/satori/hard.html

But you've *used* CSS in that page, so it doesn't count.

 

[Steve Pugh]

That's all, Toby?

Piece a cake.

Not even close.

15 minutes.

Used FP and I just copied your text and didn't try to clean the code.

I didn't use css for margins etc but that would make it perfect.

My page size - 5.78 kb
Yours - 5.91 kb

You wanna borders?

There you have it!

http://members.westnet.com.au/satori/hard.html

Totally fails to be as fluid as Toby's. Reduce the width of your
browser window and see how the text flows around the side boxes. Yours
totally fails to do this, instead it introduces large ugly gaps.

Toby's has one single list. You've split that list over two table
cells with a third cell containing unrelated content in between them.
That changes the structure of the document totally.

BTW. You wanna me to give you a challenge to emulate tables with css?

Come on then.

Steve

 

[Michael Winter]

On Wed, 17 Nov 2004 09:24:03 +1100, Mark Parnell

[snip]

http://devedge.netscape.com/viewsource/2002/wired-interview/
(site seems to be down ATM)

DevEdge is dead. However, you can access it via the Wayback Machine:

<URL:http://web.archive.org/web/20031204...netscape.com/viewsource/2002/wired-interview/>

[snip]

[F]ew graphic designers are interested in CSS.

A friend of mine, a graphic designer, has to take a Web design course.
Obviously, I was curious as to the content of the curriculum. From what I
can gather, they're focusing on table-based layouts, with CSS given only a
cursory glance. I see no sign that the semantic basis of HTML is being
explained and, can you believe it, there are only two browsers
(apparantly): NS and IE.

I want to set him straight[1], but I don't think it's possible. What
they're being taught is just too far from what should be done. He probably
wouldn't pass if he went about things the "right way". Hopefully I can get
him to unlearn their nonsense once the course has ended.

[snip]

Mike


[1] I have to a point, and he was shocked at the difference in opinion.

 

[rf]

[1] I have to a point, and he was shocked at the difference in opinion.

Send him here. With his class work

 

[rf]

Steve Pugh wrote

Come on then.

<aol>Me too</aol>