76

Re: PunBB without <table>'s

I must be going blind. I can't see where you are going to get the header row (the blue row in Oxygen) from. Don't you need another list with just the column headers

Forum           Topics Posts    Last Post      Moderators

Re: PunBB without <table>'s

This is good stuff. Keep working! :D

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: PunBB without <table>'s

It's looking good!

Question: Is it easier to make the whole page "html only" and then add the CSS, or making it part by part as you want it with CSS? (I know it's probably different for different coders, but anyway :))

79 (edited by Louis 2004-02-10 21:01)

Re: PunBB without <table>'s

Paul wrote:

I must be going blind. I can't see where you are going to get the header row (the blue row in Oxygen) from. Don't you need another list with just the column headers

Forum           Topics Posts    Last Post      Moderators

Yes, I could, but I won't. Instead, to avoid the clutter, I'll take them from different parts of the page: For example the "Forum" is from "Forums:" and Topics/Posts/Last Post/Moderators will be from the first forum entry's invisible headings. ;)

With this method, it would be easy to repeat the heading area, just by using the CSS while giving a clean appearance to Lynx and older Internet Explorer, Netscape and Opera browsers.

Chacmool wrote:

Is it easier to make the whole page "html only" and then add the CSS, or making it part by part as you want it with CSS? (I know it's probably different for different coders, but anyway :))

Yes, everyone has their own way, though personally I find it easier to explore and play when I make it up as I go along, this style is perfect for a website where you have complete creative freedom, like a personal website or blog.

If however you have an idea of what you want, or are re-creating a design, like this, it's far easier to start with the HTML from scratch then work in IDs, Classes, DIVs and SPANs as you style it with CSS. Of course, having the HTML first means you should already have an idea of what you want on the page. If you've no clue, just insert some Lipsum and keep on styling the CSS, perhaps to match a design in Photoshop or Illustrator.

Try both and see what you like. I think you'll find that having the HTML done first will let you code the CSS clearly and efficiently, knowing exactly where problems may occur and creating more elegant code. The extra time invested in creating the HTML will help give you a solid overview of the entire webpage and perhaps even shortcuts to get your work done faster.

I think it's smarter to use HTML first ... I just sometimes get so caught up in an idea that I don't though (like on pages 2-3) ...

Re: PunBB without <table>'s

so there were already some people who were working on a no-tables version of punbb. I wish I knew... I've spent about 9 hours converting it to css+xhtml strict sad

will there be a mod/total conversion when someone has finished it? I got this far: http://www.voordummies.nl/notables/index.php It works fine on IE, Opera and Mozilla on windows, but after I popped in my knoppix cd and launched konquerer (or whatever it's called) it looked like crap again.. right now I'm fed up with these browser-incompatibility issues so I'd rater see a finished mod smile

81

Re: PunBB without <table>'s

Species9408: Nice try. Trouble is it falls apart on all browsers at less then about 920px wide. Some people are still viewing at 800x600 and there may be the occassional oddball viewing at 640x480. Browser compatability is a real pain in the ****. Don't forget, as well as Linux browsers you also have to worry about IE5(Win) and IE5(Mac).

Re: PunBB without <table>'s

I wonder whatever happened to Louis. I haven't heard from him in a long time.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

83

Re: PunBB without <table>'s

Rickard wrote:

I wonder whatever happened to Louis. I haven't heard from him in a long time.

Probably, like me, he has been mugged by the real world.

84 (edited by Species9408 2004-03-26 17:03)

Re: PunBB without <table>'s

the statistics of my site show that only 2% are viewing my site at a resolution lower than 1024*768 and 3% are using IE < 5.5, so if a forum isn't displayed properly in those cases, so be it.

I had a discussion with someone and he said a forum couldn't be displayed without using tables... I'm always up for a challenge, but after 10 hours work I expected more. after removing the tables and replacing them with divs & spans; it worked perfect on IE but it looked horrific on mozilla & opera. In order to get it to work on opera I replaced the spans with divs which worked but it still looked like crap in mozilla. After adding a zillion clear:both divs I finally got it to work with all three browsers. but now that yet another browser can't display it correctly I'm just sick of the whole only-use-tables-for-tabular-data idea

Re: PunBB without <table>'s

The subject of this topic is misleading. The goal isn't to redesign PunBB without tables, it is to redesign PunBB so that it doesn't "misuse" tables. Tables should of course be used for tabular data. The main content on the board index (index.php) and the forum index (viewforum.php) should in my opinion be displayed with tables. This script (viewtopic.php) I'm not so sure about.

Species9408: If as many as 2% of the expected audience use a browser that makes the forum look funky, it is out of the question. Also, 2% might apply to your website, but if you have a look at the global stats on thecounter.com, it paints a very different picture:

1024x768 - 47%
800x600 - 39%
1280x1024 - 5%
1152x864 - 3%
Unknown - 1%
640x480 - 1%
1600x1200 - 0%

http://www.thecounter.com/stats/2004/March/res.php

Edit: Fixed a typo. You have to tell me when I say things like "paints a very different image" :D

"Programming is like sex: one mistake and you have to support it for the rest of your life."

86 (edited by Paul 2004-03-26 19:28)

Re: PunBB without <table>'s

I would also point out the total resolution is not particularly meaningful. My monitor displays at 1024x768  but I don't maximise the browser because I have other windows open so I only view at a width of about 850px. My guideline when designing is that the site should hold together at 640x480 with a browser maximised and look best at 800x600 with a browser maximised.

As for the tableless design. I agree with Rickard. The index page and viewforum pages are a correct use of tables. They are direct tranlations of tables produced by a data query to the screen. Viewtopic probably is not and things like the footer and header boxes certainly are not. Where things begin to get really freaky is when it comes to forms. You could argue for example that the user options input form is a table whereas the search form is not.

EDIT
Viewtopic could certainly be made tabeless especially if it moved to an over and under layout like vB3 rather than side by side. The downside is that the over and under layout is less user friendly because the narrative is broken into chunks.

EDIT2
A very rough and ready test for proper use of a table. If it requires column headers to be intelligible then its a table, if it doesn't, it's not.

87 (edited by jwalton 2004-06-07 22:16)

Re: PunBB without <table>'s

Hello from a punBB user, but first-time-poster on this site...

Rickard wrote:

This script (viewtopic.php) I'm not so sure about.

It really seems to me that viewtopic.php is a "correctly used" table. It looks like a table, smells like a table.... just because the message "td" has lots of content in it doesn't make it less of a table, right?

Paul wrote:

Where things begin to get really freaky is when it comes to forms. You could argue for example that the user options input form is a table whereas the search form is not.

Why bother over thinking it? It's possible to reach for every higher levels of abstraction on this type of thing. And anything that isn't immediately obvious could probably be debated forever. Header and footer boxes should not be tables... but anything that has colums and rows cantaining data basically fits the bill. I looked up "table" in the dictionary:

An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.

The real point is you shouldn't use a table to make a crazy jigsaw-puzzle of images work as a layout.... thats hardly what we're looking at here.

Paul wrote:

A very rough and ready test for proper use of a table. If it requires column headers to be intelligible then its a table, if it doesn't, it's not.

Viewtopic has column headers ("Author", "Message"). The designer made a style decision to not separate the columns with a rule, but stil...

and yeah. Where did Louis go? This was just getting good.

Oh yeah.. the real reason I found this thread is that I need forum accessible to disabled users... punBB would be great since its so simple (feature-wise). Maybe I'll have to do it myself. Fortunately, i don't need it to look identical to the current design wink

Re: PunBB without <table>'s

jwalton wrote:

Hello from a punBB user, but first-time-poster on this site...

You're welcome :)

jwalton wrote:

Oh yeah.. the real reason I found this thread is that I need forum accessible to disabled users... punBB would be great since its so simple (feature-wise). Maybe I'll have to do it myself. Fortunately, i don't need it to look identical to the current design ;)

Fear not. Paul has been working on some very nice markup/CSS changes that will be incorporated into 1.2 (to be released this summer). We discussed accessibility the other day. I'll take the liberty of quoting Paul from an e-mail discussion we had:

... What I will do is mark-up the tables to be accessible by the best
screen readers which are capable of understanding sub-headers. This does not
involve a design change, just a slight change in the mark-up.  There is
nothing stopping me or somebody else doing a special release designed with
some of the more popular but buggy screen readers in mind. It might even be
rather cool to have the only bbs system which can actually be used by people
with severe visual impairments. ...

"Programming is like sex: one mistake and you have to support it for the rest of your life."

89

Re: PunBB without <table>'s

... What I will do is mark-up the tables to be accessible by the best
screen readers which are capable of understanding sub-headers. This does not
involve a design change, just a slight change in the mark-up.  There is
nothing stopping me or somebody else doing a special release designed with
some of the more popular but buggy screen readers in mind. It might even be
rather cool to have the only bbs system which can actually be used by people
with severe visual impairments. ...


Hmmm... don't understand what it means, but I'm sure it's great hehe.

90

Re: PunBB without <table>'s

Just to update matters.

It turned out that viewtopic was extremely simple to do as a tableless design and it solves some site integration problems i.e. it is easier to control the width in Internet Explorer. Oh! and it doesn't have column headers. The only tables that remain at present are multi-columned data tables. There are no layout tables left.

Forms have been left as tables and I don't think it worth the effort of trying a tableless design. The principle change will be to use the <label> tag to link the labels to the input fields.

On the accessibility point. The one major problem I identified is the main table on the index page. The problem as I understand it is that Jaws is not particularly fond of sub-headings, in this case the category header, even when marked up correctly and positively chokes on colspan. There is of course a quick fix which is to get rid of colspan and position the category header over the forum name.

What I had in mind for an accessible design for the index page was to make each category a seperate table. The category header then becomes the table caption which can be dressed up with css to look like the top row of the table. The column headers then appear under the category header. The result is several small regular tables rather than one big irregular one.

jwalton: I have rather been assuming that the disabled users you have in mind had impaired vision but of course that might not be the case. Are there any tips you can give me generally. Even if it requires a special release to be truly accessible I would still aim at the orginal being as accessible as possible.

91

Re: PunBB without <table>'s

Madoor wrote:

Hmmm... don't understand what it means, but I'm sure it's great hehe.

It means it's bloody difficult to understand a table being read by a screen reader when it doesn't know which heading goes with which bit of data so it needs fixing.

Re: PunBB without <table>'s

Paul wrote:

jwalton: I have rather been assuming that the disabled users you have in mind had impaired vision but of course that might not be the case. Are there any tips you can give me generally. Even if it requires a special release to be truly accessible I would still aim at the orginal being as accessible as possible.

Yes - specifically, I am concerned with low-vision and blind users... but something that is interperable and accessible should help out anybody requiring assistive technology or other needs in that area.

As for tips, well I don't claim to be an expert on the subject. But I have had to design and develop for visually impaired users. The obvious stuff, I'm sure you know about - standards-based markup and all that. I found Bobby to be very helpful (If you don't know, its an accessibility validator), and of course the Web Accessibility Initiative. Of course since we are even having this conversation, I assume you know about all that stuff wink

The most helpful things to us were meeting with a blind user, and observing how he used the web, getting our own copy of JAWS (screen reader), and testing our site on a small group of blind and visually impaired users...

Which reminds me: I can do JAWS testing if you don't have a copy...

93

Re: PunBB without <table>'s

jwalton: I might just take you up on your offer of a Jaws test. Have you any experience of IBM Home Page Reader. Thats much more affordable for us amateurs but does it give realistic results.

94 (edited by jwalton 2004-06-08 21:03)

Re: PunBB without <table>'s

I don't think I ever tried that one. Before i got JAWS, I used the WeMedia Talking Browser (which was free). But when I tried to hit the site a few minutes ago, I couldn't connect. I also noticed that cnet no longer had a download of the talking browser.... so I don't know whats up with that.

I have used a few different screenreaders, and they all intepret pages a little differently (what else is new). Mostly, it was small stuff like I beleive JAWS says "image" before reading the alt text for an image whereas the talking browser did not. Many small differences, but few serious ones if I remember correctly.

I know that JAWS is the most widespread, but I'm sure that testing in the IBM one is well worth it.

BTW, JAWS does have a free demo.... the site says the demo lasts for 40 minutes(!), but I remember being able to use the demo past that limit, so maybe give it a try http://www.freedomscientific.com/fs_dow … s_form.asp

EDIT: oh yeah, I'm more than willing to help out with a JAWS test.