Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Thu

30

AUG

2001

An Understandable Explanation of Tables vs. CSS-P

Joe Gillespie’s July issue at WPDFD is right on target with my latest explorations, tables vs. style sheet positioning (CSS-P)—The Layout is Dead, Long Live the Layout! by guest writer, Maxine Sherrin.

What about older browsers or screen readers that don’t support CSS positioning? I’ll comment on that below, too.

Maxine makes some realistic, very important, and helpful points about CSS, the evolution of tables, and explains many advantages to using CSS positioning. In the process, she also explains the actual purpose of tables (tabular data, not page layouts), the purpose of CSS positioning, and what’s possible, even right now.

Even today, with less than complete browser support for all of CSS positioning . . .  you can do so much more than the table paradigm was ever going to allow.

You can use the float and clear properties to make text flow around images. You can make objects be positioned not just with respect to the top and left of the page, but also the bottom and right. You can use z-index to place objects on top of one another.

OK, So What About Netscape 4.x Browsers, Other Older Browsers, or Screen or Voice Readers?

Sites using CSS-P for layouts can degrade gracefully and be totally functional and readable and in fact have far more versatility than table-based layouts. Not good enough? Your clients won’t go for that? You won’t go for that? Well, read on.

The glitch can potentially occur, especially with client projects, when we’re required as designers and developers to create a site that looks as close to identical as possible in a multitude of browsers. Or perhaps you want your own sites to be visually consistent and don’t like the idea of a site degrading at all, whether graceful or not. WaSP understands this (and so do I).

So What Can We Do?

That’s an important question that deserves some good answers. I’d suggest planning ahead and consider being forward thinking. This means learning about CSS-P, learning how to use it, experimenting, and fine tuning your skills. What’s the point if you aren’t going to use it yet? I’ll explain why and describe below what my own approach is at the moment for one possible idea as I consider what’s most realistic for my clients and my own sites.

Creating a transitional bridge

I’ve been gradually shifting my thinking about creating a site that’s still visually identical in Netscape 4 browsers. While general stats, my clients' stats, and my own stats hover around 10 percent of visitors still using Netscape 4, it’s truly just a matter of time before those numbers slide down. I’d like to plan for that and be prepared.

If I create sites that can degrade gracefully for older browsers, even if they’re not visually identical, I’m creating a transitional bridge—I can take advantage of the newer markup possibilities while I’m being considerate of older browsers like Netscape 4.x. By planning ahead and being forward thinking I’m also helping my business continue to succeed.

Here are a few things I’m currently doing to help create the transitional bridge. In the first item below I’ve included screen shots of the same page in different browsers so you can see what I mean, too.

  • If you view Brainstorms & Raves in a Netscape 4 browser it visually looks different from the newer Internet Explorer 5.x, Netscape 6, and Opera 5. The current design still uses tables for layout. Note in the screen shots that the main visual differences are:
    1. the typeface,
    2. lack of border lines around the content area, and
    3. lack of an opaque background behind the content area.
  • Using CSS-P and XHTML I’m working on a table-free layout for Brainstorms & Raves. I plan to implement that layout once I’ve completed it and tested it thoroughly. (Testing and samples coming soon to an upcoming Test section here.)
  • By learning to use CSS-P now I can learn and refine my skills to keep pace with W3C recommendations while also building highly accessible sites.
  • By building sites that aren’t visually identical in Netscape 4 browsers I can provide samples to show my clients. They can see for themselves if it’s an acceptable approach for their particular site needs.

Two Current Projects:

  1. Right now I’m finishing a client project that will still be visually almost identical in Netscape 4 browsers—it seems necessary for the moment due to the client’s target market and the particular needs for the site. The site will, however, meet WAI recommendations and will validate with W3C recommendations. The client and I will continue to evaluate layout approaches for other upcoming projects.
  2. I’m starting a project next week that will probably have a similar approach to the current Brainstorms & Raves—I will not be creating the design and layout to be visually identical in Netscape 4 and other older browsers. The site will also meet WAI recommendations and will validate with W3C recommendations. This decision is also based on client needs and the target market.

The above two projects are totally different, so the approach is different to meet each one’s unique needs. I feel it’s critical to base these decisions on each project’s individual needs.

So these are some possibilities for bridging the transition with all the browser changes and W3C recommendations. Are they good for you, too? Only you can answer that one. My point is to help educate and inform others of the possibilities and approaches that are out there, and perhaps you’ll come up with others that you’d be willing to share as well.

For More Information

In addition to Maxine’s article noted above, you can find many of the best resources at WebsiteTips.com for CSS and CSS-P, Accessibility, Design and Layout, and more.

01:40 pm, pdt30 August, 2001 Comments, Trackbacks ·

Categories: CSS, Design, Development, Graphics, Standards

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques (Paperback). by Corrie Haffly. SitePoint (Sept. 2006). 

 Cover - Content Critical: Gaining Competitive Advantage through High-Quality Web Content. By Gerry McGovern, Rob Norton. Prentice Hall (October 2001). 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2001/08/30/an_understandable_explanation_of_tables_vs_cssp/
Page last modified 14 July, 2007 - 10:24pm PDT Page load time: 0.010404 seconds.