Still working on the new layout. Not that I care too much, but I am trying to use my page to learn non table based CSS design. I made something I really liked, but then it turns out that it is completely borked in IE. So I dropped back to this non-design for the moment.
This is the madness of designing for browsers. It's not as bad as it used to be (specifically because you can safely forget about the hell that was Navigator 4,) but it is still a pain. For anything but the most simple design you probably have to do some browser sniffing and serve up different CSS files for different browsers/platforms. That is a change I had sort of wanted to make anyway (putting the CSS into a separate file rather than including it inline,) but it will be a slightly more involved operation to do it this way.
Yeah, I know, pretty interesting...
I'm interested in this. What advantages does CSS have over tables? Why is it be so browser-specific? Is CSS stripped out in RSS feeds? Can us ordinary joes learn and use CSS? Should we?
I'm of two minds on the issue. Or, like anything, it has it's advantages and disadvantages.
We already do use CSS here. CSS stands for Cascading Style Sheets, so that box on [editpage] that controls your style sheets is CSS. The basic idea is this: instead of marking up your text with formating tags (like <font>,) you mark up your text with generic containers (surrounding chunks of text with <div>, or <span>, tags,) and then you style these containers in a separate style sheet attached to the page.
The idea is to save time and bandwidth. Say you want every post on your page to start with a headline in 16pt Times. You could put <font face="Times" size="16pt"> tags around every headline (that's the old way.) With CSS you would put something like <span class="blog_headline"> around your headlines, and then define span.blog_headline once in the style sheet to be in the Times font at 16pt. The big advantage comes when you want to have the headline be 14pt instead of 16 - with CSS you only have to change it in one place (in the style sheet) and everything gets updated. With a hand made HTML page in the old style you'd have to go through and change all those font tags by hand.
So, okay, we already do this. And since our pages are spit out dynamically anyway, this time savings on editing doesn't really matter to us.
But there is also something of a religious battle going on, with the CSS camp trying to get rid of tables all together (for instance, dave's page has no tables.) This is supposed to be better somehow, but I go back and forth on whether I can actually see the reasoning or not. Certainly CSS, when it works (it's buggy in different browsers if you get too fancy) can provide much more control over placing of elements on your page. But I find thinking about page layout in terms of tables to be very intuitive. Of course this might just be because I am old school.
Anyway, I've been playing around with it, and I'm getting less interested in doing away with tables. But CSS is good, and unless you are a purist I don't think there is anything wrong with mixing tables and CSS like we do here.
This is a quick reply and doesn't really answer all your questions. I'll try to find some links and think about it more.
On re-reading that is not too helpful.
The win with CSS is greatly enhanced ability to position items on a page. Tables gives you a very crude block like way to design pages. Each element is inside a cell of a table, and all the cells are arranged in a rigid grid. With CSS you can get very sophisticated effects like, say, overlapping of elements. Or staggering of elements (look at the way Dave's link boxes are not lined up in a straight grid - they are staggered a few pixels - you can't do that with a table.) Or you can get 1 1/2 line height. And tons of other things that, I guess, could make the web into something more like Ray Gun from a design point of view.
So it's about formatting control, and breaking out of the limitations of the grid imposed by tables.
But, with that said, it is pretty straight forward and intuitive to lay out a page on a grid. So I don't know. CSS can look a lot better, but it can be hard to make the fanciest stuff work across browsers. Tables look more simple, but they work.
Should have linked to this first: css Zen Garden "A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page."
In other words, the text on the front page is unchanging, and the links on the right (to different page styles) only swap in a new css file. You can get a sense of what is possible (and a lot is possible design wise) from clicking around.
One big win with this sort of a set up is that you can sniff the useragent and then serve a different css file to get different effects. Like, you could watch for mobile useragents (like cellphones) and then serve them the same page, but with a css file designed to look good on mobile screens. Or you could have a css file that could be swapped in if the user wants to print the page out.
That is very cool, but like I said in the first post, since we are generating all of our pages dynamically (with PHP) every time a page is requested, we can accomplish the same thing that way (for instance, the way you can switch your page back and forth between page templates in [editpage].) These amount to the same thing, although doing it with css is very nice for designers who don't want to get into PHP and/or don't have access to that sort of thing on their servers.
Those pages have a very professional look, but as you know I like our "hacker verite." Is there some kind of WYSIWYG program that enables you to layout pages in CSS?
I'm sure Dreamweaver does CSS by now, but I haven't looked at it in years.
I know Eric Meyer is one of the leading authorities. This book of his is very good, plus lots of free info at the first link.
|
This is the madness of designing for browsers. It's not as bad as it used to be (specifically because you can safely forget about the hell that was Navigator 4,) but it is still a pain. For anything but the most simple design you probably have to do some browser sniffing and serve up different CSS files for different browsers/platforms. That is a change I had sort of wanted to make anyway (putting the CSS into a separate file rather than including it inline,) but it will be a slightly more involved operation to do it this way.
Yeah, I know, pretty interesting...
- jim 11-17-2004 5:04 pm
I'm interested in this. What advantages does CSS have over tables? Why is it be so browser-specific? Is CSS stripped out in RSS feeds? Can us ordinary joes learn and use CSS? Should we?
- tom moody 11-28-2004 8:39 pm
I'm of two minds on the issue. Or, like anything, it has it's advantages and disadvantages.
We already do use CSS here. CSS stands for Cascading Style Sheets, so that box on [editpage] that controls your style sheets is CSS. The basic idea is this: instead of marking up your text with formating tags (like <font>,) you mark up your text with generic containers (surrounding chunks of text with <div>, or <span>, tags,) and then you style these containers in a separate style sheet attached to the page.
The idea is to save time and bandwidth. Say you want every post on your page to start with a headline in 16pt Times. You could put <font face="Times" size="16pt"> tags around every headline (that's the old way.) With CSS you would put something like <span class="blog_headline"> around your headlines, and then define span.blog_headline once in the style sheet to be in the Times font at 16pt. The big advantage comes when you want to have the headline be 14pt instead of 16 - with CSS you only have to change it in one place (in the style sheet) and everything gets updated. With a hand made HTML page in the old style you'd have to go through and change all those font tags by hand.
So, okay, we already do this. And since our pages are spit out dynamically anyway, this time savings on editing doesn't really matter to us.
But there is also something of a religious battle going on, with the CSS camp trying to get rid of tables all together (for instance, dave's page has no tables.) This is supposed to be better somehow, but I go back and forth on whether I can actually see the reasoning or not. Certainly CSS, when it works (it's buggy in different browsers if you get too fancy) can provide much more control over placing of elements on your page. But I find thinking about page layout in terms of tables to be very intuitive. Of course this might just be because I am old school.
Anyway, I've been playing around with it, and I'm getting less interested in doing away with tables. But CSS is good, and unless you are a purist I don't think there is anything wrong with mixing tables and CSS like we do here.
This is a quick reply and doesn't really answer all your questions. I'll try to find some links and think about it more.
- jim 11-28-2004 9:03 pm
On re-reading that is not too helpful.
The win with CSS is greatly enhanced ability to position items on a page. Tables gives you a very crude block like way to design pages. Each element is inside a cell of a table, and all the cells are arranged in a rigid grid. With CSS you can get very sophisticated effects like, say, overlapping of elements. Or staggering of elements (look at the way Dave's link boxes are not lined up in a straight grid - they are staggered a few pixels - you can't do that with a table.) Or you can get 1 1/2 line height. And tons of other things that, I guess, could make the web into something more like Ray Gun from a design point of view.
So it's about formatting control, and breaking out of the limitations of the grid imposed by tables.
But, with that said, it is pretty straight forward and intuitive to lay out a page on a grid. So I don't know. CSS can look a lot better, but it can be hard to make the fanciest stuff work across browsers. Tables look more simple, but they work.
- jim 11-28-2004 9:10 pm
Should have linked to this first: css Zen Garden "A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page."
In other words, the text on the front page is unchanging, and the links on the right (to different page styles) only swap in a new css file. You can get a sense of what is possible (and a lot is possible design wise) from clicking around.
One big win with this sort of a set up is that you can sniff the useragent and then serve a different css file to get different effects. Like, you could watch for mobile useragents (like cellphones) and then serve them the same page, but with a css file designed to look good on mobile screens. Or you could have a css file that could be swapped in if the user wants to print the page out.
That is very cool, but like I said in the first post, since we are generating all of our pages dynamically (with PHP) every time a page is requested, we can accomplish the same thing that way (for instance, the way you can switch your page back and forth between page templates in [editpage].) These amount to the same thing, although doing it with css is very nice for designers who don't want to get into PHP and/or don't have access to that sort of thing on their servers.
- jim 11-28-2004 9:31 pm
Those pages have a very professional look, but as you know I like our "hacker verite." Is there some kind of WYSIWYG program that enables you to layout pages in CSS?
- tom moody 11-29-2004 1:22 am
I'm sure Dreamweaver does CSS by now, but I haven't looked at it in years.
I know Eric Meyer is one of the leading authorities. This book of his is very good, plus lots of free info at the first link.
- jim 11-29-2004 4:58 am