132 replies to this topic

[Davidinnotts]

Hi all.

I've got help from this forum a lot, but this is the first time I've wanted to make a comment.

My son is heavily involved in the new W3C work for Accessibility for the disabled and has been training me up! So I'm keen that the sites I work on are up to scratch. Dimmerswitch (post #21) has already mentioned this.

It seems to me that one advantage with a CSS site is that non-technical people, when typing in or modifying the text for a page, can't mess up the page layout and make it harder for, say, blind people using a reader to access the content in an intelligible way. However, the designer can!

Has anyone any tips for laying out the CSS so that page layout can be easily seen to be compliant for the disabled? I'm learning CSS and I want to get into good habits from the start.


David Croucher.
(in the greenways of Sherwood Forest)

[meta]

Lighthouse International, which provides services to the blind and visually impaired, has good information on accessible website design.

[Dimmerswitch]

My son is heavily involved in the new W3C work for Accessibility for the disabled and has been training me up!  So I'm keen that the sites I work on are up to scratch.  Dimmerswitch (post #21) has already mentioned this.

I commend you for wanting to make the sites you create accessible. Glad your son's helping work with the W3C - they do good stuff.

It seems to me that one advantage with a CSS site is that non-technical people, when typing in or modifying the text for a page, can't mess up the page layout and make it harder for, say, blind people using a reader to access the content in an intelligible way.  However, the designer can!

It's been my experience that sufficiently non-technical users are capable of breaking any layout, regardless of whether it uses tables. But having less markup to wade through does make maintenance significantly easier and can lower the bar so clients are more capable of making changes.

Has anyone any tips for laying out the CSS so that page layout can be easily seen to be compliant for the disabled?  I'm learning CSS and I want to get into good habits from the start.

Bobby is a tool put out by Watchfire that does some accessibility validation. Their free online version is available at webxact.watchfire.com/. As an aside, it's throwing a notice when I hit the page using Opera 8:

WebXACT may not fully support your browser.

At this time WebXACT has been tested with the following browsers:
Internet Explorer (version 5.5 or later)
Netscape (version 6.01 or later)
Mozilla

An accessibly tool that doesn't work on all browsers .

Another one you may be interested in is "Cynthia Says", available at www.icdri.org/test_your_site_now.htm I've had good results with it in the past.

www.knowbility.org/air-interactive/?content=resources also looks to have a whole bunch of resources for you.

Edited by Randy, 23 June 2005 - 04:52 PM.

[meta]

It's been my experience that sufficiently non-technical users are capable of breaking any layout, regardless of whether it uses tables. But having less markup to wade through does make maintenance significantly easier and can lower the bar so clients are more capable of making changes.

You make a very good point here. It seems to me it would be nice for nontechnical users to have some sort of utility that would create a form to view and revise content - something that would read, say, a title tag (or a paragraph, a list, etc.), then display a screen with a heading that says "Title" with a little box containing the title text, so the user could change the content, but not touch the tags. Something like an html form for collecting data, but used in a different context. I've used some things like this designed for very specific applications, but not for general purpose revision of web content. Anyone used a good product for this?

[DaveBeck]

The importance of using XHTML/CSS compliant web sites cannot be overlooked when contemplating the next generation [which is actually upon us] of Internet use. How many of you guys are actually thinking how your site will display in a mobile device, how long it will take to download in a mobile device or how will the major search engines treat a cleaner/leaner code base for their mobile search algorithms?

[Jill]

Welcome Davidinnotts!

[sparkdigital]

Hi all,

I've just completed my first website in CSS, mainly for two reasons:

#1 - The site will be themed to correspond with the four seasons, so in summer I want the look and feel to be different from the winter one. With CSS I can change this easily!

#2 - The code is nice and uncluttered, so hopefully the search engines will like me for that...

If've also found in the past that after a site goes live, the client always has quite a few changes to make in the layout which can mean virtually rebuilding the website. With CSS this is no problem at all, so less frustration...

It has been quite a learning curve over the last two weeks and there are still some issues to sort out (drop down menu disappearing behind the virtual tors etc.), but now that I'm familiar with it all I'm determined to use it more in the future.

[Adrian]

Ooh damn Chris for listing this in the SE forum spotlight, heh, I've just got to add my 2 pence in

CSS and SEO. I'm not convinced of the benefits of full CSS sites being better than table based sites. They may both have exactly the same code etc...
What you may find an improvement with, is if you not only use CSS, but try and use semantic code as well. That means using the tags for what they are meant to be used for basically.
A lot of people use tables and have what are actually heading, not marked up as heading for example. So if your tabled site uses something like <font some big font size>Heading</font> while your CSS site uses <h1>Heading</h1>, then you may get some SEO benefit from the CSS driven site. But CSS in only an enabler there, it's not the reason for the benefit.

Accessibility. This again comes into it with semantics. Markup the code properly, and it'll be a lot more accessible than any table, or hybrid table based site. That's always a good thing. Screen readers still need to do some catching up, but there's a lot you can do for them. Again, CSS is a bit of an enabler, rather than the reason for improved accessibility.

Difficult to use. For someone who has learnt to code in tables, and has spent possibly several years in that frame of mind, yeah, switching to full on CSS and dealing with the issues there is going to be tricky. I've said in other places before that I reckon if you took someone who'd never done any web design before, and didn't bother teaching them about tables for layout, and instead went the full CSS route, they'd find CSS as easy to use as tables.
I've gotten so used to using <div>'s and CSS that I go back and look at some table based code and have trouble working out what's going on, or what something does.
Yeah there's a learning curve (as someone already said) from tables to CSS< yeah it's a bit of a pain. But most people I know who've give it a go have then been amazed at how 'good' the code looks afterwards. Which brings me to the next point.

Maintenance. I re-wrote a big chunk of the code for my work places website a while ago. What was before filled with tables, over 400 lines of code, is now down to about 80. To update it before was a nightmare of filtering through the tables, trying to find the right bits to change to update the products on the home page. Now it's a hell of a lot easier. Easy to see, easy to read, easy to edit. As well as easy to tweak with the CSS if required.

Costs. Many people have found that going from very table based sites, to full on CSS sites, they can cut page sizes by 50% or more in cases.
When Mike Davidson redesigned ESPN to a virtually full CSS based layout, they worked out that they reckoned most pages had been reduced by around 50KB. Based on an average of 40million page views a day, that worked out at a saving of 730Terabytes of bandwidth per year. Now ok, not all of us have ESPN levels of traffic but you can see how the savings can add up.

Also, how many people can say this about their designs...

Our backbone of browsers to test on during initial design stage was IE 5+ (Mac and PC), Netscape 6+ (Mac and PC), and Mozilla 1+ (Mac and PC). After the newest version of Opera and the Apple Safari beta came out, we tested on these as well and no adjustments whatsoever were needed.

What Jeffrey Zeldman has talked about as forward compatibility. Hack now for older browsers, and you have no idea how tomorrows browsers will treat it. Work with the standards in an informed way, and you can create a design now that shouldn't need touching for future versions of browsers supporting the standards.

Other user agents. CSS also makes it easier to print pages. Rather than creating a separate 'print friendly' page, you just use CSS to tell it what parts to print, what parts to ignore when printing, and to lay it out a little differently if required.
You get better support for small screen devices. Again, they probably need some further development, I'm not sure what they are like at the moemnt, but I know a couple of years ago they weren't actually grabbing the "handheld" device settings properly, if defined. Full on CSS sites will do better on that kind of platform generally than table based sites.

Others points? Perhaps, but I've rambled enough for now, and I can't think of them at this moment in time

[nedguy]

I'm now using a copyright-free, 3-col + footer design from (Alan?) Ruthsarian who clearly likes playing with css as a form of mental relaxation!

What makes this particular design of his, called Skidoo Too, a work of genius is not just that it is hacked to make a header, 3 variable length columns and a footer all work seemlessly in all modern browsers (and be readable in ancient ones).... but that he has also adjusted the order of the columns so that the content of the main column (middle) is coded first before the others, enabling spiders to crawl more deeply into the real page content before reaching their max limit.


NG

[Ron Carnell]

It's the old 80/20 rule still raising its ugly head.

Eighty percent of ALL the benefits of using CSS can be realized by using only about twenty percent of the capabilities of CSS. Get rid of the font tags, redefine a handful of HTML tags (using them, as Adrian said, with their correct semantic meanings), and you're really almost there.

p.s. And that's without ANY hacks.

p.p.s. There seems to be an unspoken assumption that moving content to the front of the source code helps with SEO? Anyone have any evidence of that? My experience suggests that modern search engines are very good at ignoring non-relevant source and, by and large, the order of your source document matters not at all.

[qwerty]

There seems to be an unspoken assumption that moving content to the front of the source code helps with SEO? Anyone have any evidence of that?

It's not very unspoken. I see the claim being made all the time, but I don't think it's true. The former design of my site was set up to put content right at the beginning of the body tag, and I never saw any benefit from it.

[gobayview]

Two words: "code to content ratio".

Spice

[Adrian]

Have you actually any evidence that code to content ratio makes any difference at all? I don't see why a search engine would care how much code there was. They can very easily filter out the HTML and just read the content as one consecutive lump if they want.

[Jill]

They can very easily filter out the HTML and just read the content as one consecutive lump if they want.

Yep. There would be absolutely no reason for a search engine to care what the code to content ratio is.

They can easily ignore code that is not important to them, and index the stuff they want to index.

[tempy]

Has anyone any tips for laying out the CSS so that page layout can be easily seen to be compliant for the disabled?  I'm learning CSS and I want to get into good habits from the start.
David Croucher.
(in the greenways of Sherwood Forest)

Have you looked at rnib.org.uk ?