World: r3wp

Yesterday I talked to one web designer, let's say he is not too much 
experienced - he is good in graphics, but not so good at understanding 
all webdesign/browser related tricks. However - he told what I am 
thinking for some time already and Chris will not eventually agree 
- css is fine, but why do all .css based pages look the same?

And he is correct - by first looking at css based page, you can rather 
quickly distinguis it - it is rather boxy, effects are the similar 
....

I am going to read the book and see if I can change my mind, but 
imo there is something wrong with technology, if it can't be indistinguishable 
from others. Simply put - current css based look is kind of modern 
trend, but what happens once it wears itself out?

Other thing is - it is one or more layers (if more media is used) 
upon html, so it may not be so easy for average web designers to 
think about ...

css may well try to isolate presentation layer, but imo it fails. 
You have box aproach, but let's relate it to VID area - the text 
in css terms will hide, if it is longer than the visible area, but 
- where is scroll-bar? Correct me if I am wrong, but you simply need 
'if and other good functions to program it exactly the way you want 
...

The pity imo is, that java-script was found bad aproach ... it is 
programming language and allows for much more things than css ...

If there's a boxy-limitation, it isn't in CSS.  HTML currently only 
supports rectangular boxes.
Spend a bit of time at
http://www.csszengarden.com/
to see how different CSS can be with the HTML.


Not to say that CSS doesn't have limitations -- lack of variables 
and calculations is an obvious one.

yes, and above site is typical css look. I am not sure the letters, 
spacing etc. are typographically correct. The same goes for most 
css designs I saw ...

but overal it provides us with new possibilities - I need to read 
more about it.  I never properly worked with tools like MS FrontPage, 
DreamWeaver, except their old incarnations :-), so I wonder how do 
those tools support css based design?

besides that, css design is sometimes slow, or it is because e.g. 
Mozilla renders it slowly?

csszengarden.com is cool ...

where can I learn about inheritance and other things? I mean - syntax 
- I looked and read various articles explaining directives, but noone 
was able to tell me about things like "body > div#preamble,#supportingText"

# means id . means class, but what function does have > or ,?

h1,h2,h3 {color:red} is simply a shorthad to avoid writing
h1 {color:red}  h2 {color: red}  h3 {color:red}

p b {color blue} means a <b> as *any* descendant of a p is blue 

p>b {color:blue} means a b that is an immediate descendant of a p 
is blue [so doesn't apply to <p><ul><li><b>not blue</b></li></ul></p> 

The > notation is CSS2 only -- but that is widely supported these 
days.
There is also + but that is not widely used.


Anything by Eric Meyer is a good place to start for leaning CSS. 
My copy of the O'Reilly guide is battered from constant use.

thanks ...

Is there anything beyond css 2.1? I have heard about 3.0, but book 
does not cover it ...

does IE 5.0 support 2.0 css? Because - I would not orientiate webdesign 
to NS 4.x or IE 4.x anymore - ppl should adapt, and if IE 4.x runs 
on such machine (Win95), so can Opera or Firefox ...

One question though. Both class and id are used mostly to describe 
layout. I mean - Gabriele's temple uses class and id to identify 
what/how data should be filled in, but it may not be in correspondence 
with design. I should note, that Temple design is how I imagine templating 
system should work. When you work in trio-mode - user (entering data 
into app), programmer and designer (which can't program), most template 
systems are not acceptable, as they break the ability to see the 
design work result, unless loaded into production environment, and 
that is not acceptable in my situation ...

CSS3 is on the way -- but very little supports it.  Firefox has some 
CSS3 goodies supported.

More compatibility info than you might ned here:
http://www.corecss.com/properties/full-chart.php

Not sure I understand the issue with class / id and templates.  Can 
you say more?

Gabriele's Temple uses  class and id elements to mark certain html 
page areas to be filled with data. Then he has functions like find-by-class 
find-by-id etc. That may impose certain logic on how you mark your 
html sections with class and id elemetns - simply data oriented. 
But design (css) may or may not on-pair with it - you simply might 
want to use class and id elements in different way ..

Thanks.....that's a limitation of the approach taken by that design 
then.

Probably best not to use the same classes and ids as are being used 
the the templates for data editing. You'd need a list of the "reserved" 
names -- or ask him to use a special prefix to distinguish them from 
the ones you use.

Hmm, can you mark anything having two classes? :-) Probably not I 
guess ... so that one class would be used by our .css and second 
one for data.

I really don't understand, how ppl can use whatever existing template 
system not working in a Temple way ....

That aproach must be done by programmers, not designers. It imo missess 
fundamental thing - desinger is not a programmer and he/she does 
not need to know anything about it.

need to go now ...

Petr -- there is no design in non-CSS HTML that you can't achieve 
with CSS -- even if you need to use barebones tables occasionally 
to do column things.  The statement "why do all .css based pages 
look the same?" might as well say "why do all web pages look the 
same?".

Also, CSS designs are typically faster -- less code, not so much 
nested table calculation.  Try this book -- http://www.zeldman.com/dwws/

Petr, stil not sure I understand the template issue.
A tag can have more than one class:

<p class="warning large"> would assign the p *both* classes "warning" 
and "large"

Sunanda - thanks a lot, did not know I could use more than one class 
for one particular element ...

Chris - I know what you mean, but css pages really look so "similar" 
:-)

I wonder what is typical workflow of developer using css extensively 
...

E.g. two ppl I know do their work in Photoshop, then they decompose 
it into html ....

If I understood them correctly, Photoshop helps them to cut image 
into html design .... I wonder how they decide what will be covered 
by typical html aproach (e.g. tables etc.) or using some div + css 
aproach, as that requires rather distinctive aproach?

nice, the book is available in Czech language too ...

Chris - have you read anything from Eric Meyer?

another question - if we want to consider IE 5.x and above, Mozilla/FF/NS, 
Opera 6. and above, are we ok with xhtml or should we stick with 
HTML 4.x transitional, or?

I also wonder, why java-script did not worked for html, if it is 
imo better to have general programming language (where you can do 
nearly everything) instead of something like css, where you can only 
refine your design, but have no constructs as loops, conditions, 
etc.

The variant of HTML you select depends in part on the audience/market 
you have. There is no fixed answer to that.

Chris - do you use Adobe ImageReady in conjunction to Photoshop?

hmm, now I read that browsers for PDAs do very little support of 
css, that is a pity ...

One of the advantages of well-structured CSS is that it degrades 
well.....
It  looks great on the platform/browsers it was design for.
It looks very good on older versions.

And the webpages are still usable on sites with even older or non-CSS 
access.

Petr, seriously -- I can't think where this idea of yours comes from. 
 I'd like to know which non-CSS sites are so different?  Unless you 
are thinking Flash sites...

The biggest restriction of CSS is you have to work harder to build 
layouts.  Otherwise CSS gives you *all* the control that depricated 
HTML attributes give you -- *plus more*.  So perhaps there is a dominant 
web style used by those experimenting with CSS (understandable if 
designers are learning from the same source, whether that is Eric 
Meyer, A List Apart, or WPDFD); but to use CSS as the excuse for 
this is a copout...

Petr - this example of wrapping text around an spherical image isn't 
boxy is it?

http://webdesign.about.com/library/layouts/zwraparound.htm

Perhaps this is a better example http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

CSS Workflow -- easy: create a concept based on information needs; 
plan how to acheive this with the box model; create a base HTML template 
and build up styles around that, incorporating background images 
as required; then test and revise, test and revise, test and revise, 
etc.  Simplified somewhat.  Basically the same as any legacy HTML 
project, only easier.

It's also similar to the way I create styles for VID projects too. 
 I use Xara X and PPaint far more than Photoshop though -- Photoshop 
isn't imo the best tool for the job.

XHTML, whether transitional or strict, is less ambiguous when it 
comes to creating the structure for the CSS box model.

If you're unsure what the transition from HTML 4 will entail, check 
out the NYPL Style Guide -- http://www.nypl.org/styleguide/