Re: OT: Web Design - Catering to Everyone

first, congratulations on making the site xhtml compliant!

i also work for a university. our network people have standardized on netscape 4.02 or something absurdly old like that and refuse to upgrade (apparently that was the last version of netscape that could be downloaded as just the browser; everything since is 'communicator' and comes with an email client, etc. and they have some objection to that). so we tend to actually see a pretty high percentage of NN4 users. boy does it suck.

i've had more success by being very strict about keeping sites simple, marking them up semantically, using css for all the layout and formatting and using a couple basic tricks. i think you've made the right decision in acknowledging from the beginning that NN4 will not display the same page the same way as newer browsers and it isn't worth it to even try.

we've generally avoided having alternate versions of the site for different browsers though. that turns into a maintenance problem and we just don't have the resources to do that.

here's the recipe i use:

content is marked up semantically in xhtml. tables are avoided unless absolutely necessary. on the first pass through, tables aren't used at all (well, except for tabular data). divs and spans with class and id info are used liberally to group logically connected stuff. no thought whatsoever is put into how things will be layed out yet.
already, you've got a site that should be pretty boring looking but will get any information you need across and will work in any browser.
two elements are added to the <head>:
- <link rel="stylesheet" type="text/css" href="safe.css">
- <style type="text/css">@import "unsafe.css";</style>
safe.css includes things like colors and fonts. basically the stuff that works even in NN4 without breaking things.
since NN4 doesn't understand the '@import' syntax, it won't load unsafe.css but newer browsers will. so in there, you put positioning rules, styles for form elements, and other more advanced stuff that NN4 is too stupid to deal with.

the result is a page that works in every browser, looks good in the ones that support css fully, and degrades in NN4 about as well as could be expected, with the right colours and fonts (often important for "branding") but maybe a more linear layout. and you don't have to maintain two seperate versions.

the main downside is that most designers have spent years learning table-based design and tricks for making it work and their intuitions about how to design web-pages have been very subtly influenced in this direction. many otherwise excellent designers really can't think about web-design without implicitly thinking in terms of table layouts. divs + css are really at least as powerful a layout tool but they require a different mindset to work with. different kinds of layouts are difficult or easy in each style. so this is usually a problem unless your design team is unusually open-minded.

if you can't entirely eliminate tables, you can at least go to a second-best approach where you use tables for layout and css for all other formatting. this sacrifices some of the advantages of semantic markup but is usually the most practical approach.

if you absolutely must have alternate versions of the site, it's good to at least use some kind of system, either a CMS or XML with multiple XSL views to allow you to maintain the content in only one place and have all the alternate versions automatically updated. cocoon and axkit are my preferred tools for this kind of thing.

anders pearson

Comment on Re: OT: Web Design - Catering to Everyone

Replies are listed 'Best First'.
Re: Re: OT: Web Design - Catering to Everyone by rattusillegitimus (Friar) on Sep 16, 2002 at 13:50 UTC
The CSShark Answers FAQs site has some good information on using precisely this recipe to make a site work in both NN4.x and more modern browsers. It has plenty of tips and tricks and mentions the common pitfalls that can break cross-browser compliance. I usually have a browser window open to the site when I'm designing a new layout. -- `$rattusillegitimus = Eliza::PerlMonks::Robot::new()`	[reply]