Topic: New to CSS - ?cross-browser compatibility?

I want to re-design my site in CSS (first time for everything!). I have a general idea of how to do this much and make the CSS cross-browser compatible (as much as it can be) using Dreamweaver. I'm curious about browsers that don't support CSS and text based browsers.

In order to make the page readable in browsers that don't support CSS, my thoughts are that I would need to also design the site in HTML that could display in both older and text based browsers.

I guess my real question is: Do I need to make 2 versions of the site? Or does the CSS link supercede the HTML pages if I, say, design the pages in HTML and then add the CSS to that.

How does this work best, or does it work at all?
As always, your opinions, critiques and insights are appreciated...

edit: now that I think about it, there's probably some script or bit of code that creates a direction, and I'm just missing it. Perhaps one of you knows and is willing to point such out?


Bodhi - Cell 617

[This message has been edited by bodhi23 (edited 05-08-2003).]

You don't need to design two different versions. Only use the css version. The content is also available in browsers that don't support css.
For example the content of The Web Standards Project is readable in every browser, PDA or any other mobile device. I will not look as good as the normal version, but users can access and read the content

Well that's what I was thinking. I just wanted someone elses opinion, 'preesh!

Bodhi - Cell 617

The best advice that I can give you when it comes to making a CSS-based page is to write the content without concerning yourself about what it will look like. If the content will come later, then write a few paragraphs of temporary nonsense text to fill in, but the point is to consider the underlying *structure* of the page (not the visual structure; the structure of the content) before considering the visual appearance. This is a very difficult concept to get used to (especially for those used to table-based layouts), and I'm still working on it myself, but it's very important to think this way.

After you've structured the page, you may have to tweak it a little bit due to browser-varying CSS support, but the overall structure shouldn't be changed unless you realize that you made a mistake regarding the page's structure.

For instance, if you're planning to have a navigation bar on your site, don't think "horizontal bar of links" - that's visual structure. Think "unordered list of links" - that's the underlying structure. Once you've thought of it like that, you realize that you should mark it up as such:

<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>

And only later on do you concern yourself with how to style this with CSS so that it appears horizontal. You may, at that point, decide to add classes or IDs to the elements.

But keep your markup separate from your style, even throughout the creation process.

I also suggest you read http://www.thenoodleincident.com/tutorials/design_rant/ .

Being a visual person, that's gonna take some work! But it does make sense...

Let me see if I undestand this correctly:
I should code the page by hand, without font or color or layout or anything - and then apply the CSS to it? I'm gonna take your word that it works. I'll most certainly put the pages up for review once I get it done...

Bodhi - Cell 617

Yup. It's likely that, to get the CSS working, you'll need to *tweak* the markup, but the goal is to retain the structure.

Slime is right about structure, and the importance of thinking of your page in terms of structure. It is like building a house--if you focus on the appearance of the house, you may end up with a fine-looking building. You may also end up with a mess on the inside because, for example, you didn't allow sufficient space for the corridor running the length of the house, or you forgot to include the bathroom. This metaphor should show that a) structure is very important and b) structure flows from function. So, in order to think in terms of structure, you first need to think of what your page does, and how each element on the page contributes to the page as a whole in terms of function. Once you know exactly what you want to do, the structure will become more evident.

Also, do not worry that your artistic impulses will be shackled by the structure of the site. A typical impulse when first learning CSS is to feel that your artistic impulses and the structure of the site are at war with each other. This will continue until you become more familiar with CSS. Then you will realize that, rather than being shackled, your artistic impulses are being liberated. This is because pre-CSS integrated form and function, and the resulting sites were very rigid. With CSS/XHTML, however, your structure is separate from the visual presentation, thus allowing you much more artistic freedom once the structure is in place. Although it may not seem so at first, there really are no limits to what you can do artistically. You may want to take a look at the CSS Zen Garden, not necessarily as a learning tool (at least not at first), but as an example of how CSS actually frees you to be more creative. Trust me, you will be blown away by the design freedom illustrated in the above site. At least I was.

I know I may have repeated a lot of what Slime said above, but you did say you wanted various opinions, so there's mine. It does reflect my design philosophy, and you don't have to accept it all, but maybe it will help you in developing your own design philosophy.




www.liminality.org

Quite alright Suho... I appreciate your remarks. I will definitely have a go at that website. I took the tutorials at W3schools and have a much better grasp on HTML and on CSS than I did a few weeks ago.

I feel right now as if I'm standing on the edge of a swimming pool dipping my toe in to check the temperature. Much better just to dive in head first. I have to get my graphics together first, but once I have the content - I'm just gonna jump in there and have at it!

Don't worry - it'll be up for reviews once I get something together. I'll be very interested to hear the critiques when I get it done. This site provides me with a very important learning tool. Thanks!

Bodhi - Cell 617

Yup, the whole concept of CSS is to seperate Style from Content.

You will be very pleased when you change your mind on how something should look, and rather than chase down 45 seperate areas where you specified it in the HTML, you can alter 2 lines in a CSS file...

=)

Yeah, that's what I'm thinking. Especially when this whole thing started because Ann told me she wanted to change the colors, and thought I could do that in a couple of key strokes. It's what I get for not starting in CSS in the first place! I've learned my lesson...

Now it's just a matter of getting my graphics together, and starting on the function part of that equation...

How's the support for PNG files lately? I'd like to use some transparancy, but .gif doesn't really work well for photos... It'd be nice just to do it all right the first time, but I want to make sure as many people can view the pages correctly as possible.


Bodhi - Cell 617