Boy, today is really turning out to be a great content
day.
This just arrived in my inbox:
Mark,
http://diveintomark.org/archives/2003/03/24/pure_css_tabs.html
I disagree with this totally.
You are guilty of pimping “standards” at the loss of semantics, strucure [sic] and accessibility. Tabs with a structured HTML foundation brought about with a bit of DOM wrangling is the way to go:
http://www.developer-x.com/projects/tabs
http://www.webfx.eae.net/dhtml/tabpane/tabpane.html
I’m amazed that this obvious premise seemily went over the heads of all the intelligent people that commented on your tabs.
Regards
– Tim Scarfe
To which I replied:
Well, a few obvious replies off the top of my head:
- Your system only works for a single page, since it requires all the markup to be on one page. (Also, this means I am forced to download the content of all tabs to see anything at all.) So it’s not really solving the same problem as mine, which was to present a unified interface for an entire site. (And I do use structured markup within each page, much as you do.)
- Your system breaks bookmarking. I can not bookmark your download page, making it almost as useless as a poorly-designed framed site or (shudder) a Flash site.
- Your system has no keyboard equivalents for switching tabs, making it inaccessible to those with certain disabilities (i.e. people who can only use a keyboard).
- Although you claim your work “degrades”, and your markup examples would seem to support that, I get an Internal Server Error (500) when attempting to read the developer-x page in Lynx.
Cheers.
-Mark
In related CSS news, Meg was losing her mind over CSS tabs, but readers seem to have solved the problem. Also, JWZ was losing his marbles over CSS and printing, and fonts, and headers, and mixing CSS with Tag Soup markup, but readers seems to have solved most of those problems too.
In the middle of all of JWZ’s screaming and whining and FUD and being wrong about virtually everything, there was one interesting tidbit. It seems he wants to replace his Tag Soup markup with structured semantic markup and a bit of CSS. Specifically, he has this on every page:
<div ALIGN=CENTER>
<table CELLPADDING=1 CELLSPACING=0 BORDER=0>
<tr>
<td BGCOLOR=”#00EE00″>
<table CELLPADDING=3 CELLSPACING=0 BORDER=0 WIDTH=”100%”>
<tr>
<td NOWRAP ALIGN=CENTER BGCOLOR=”#004400″>
<table CELLPADDING=0 CELLSPACING=0 BORDER=0>
<tr>
<td WIDTH=20></td>
<td><font SIZE=”+1″><b>April 2003</b></font></td>
<td WIDTH=20></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
He has managed to get it all the way down to this on every page:
<h1><span>April 2003</span></h1>
…plus appropriate CSS in one central stylesheet. The span is necessary to work around limitations in IE 5 for Windows. However, this extra span element upsets him, and he has declared that if he can’t get it all the way down to this:
<h1>April 2003</h1>
…then CSS is a total failure and he’s just going to take his marbles and go home.
Dude, just take your marbles and go home.
In Tim’s first example, in Opera 7 (W2K), the tabs are all sitting on top of each other! (And yes, all the other stuff you said…those are not real tabs for a real site.)
Comment by Elaine — Thursday, May 1, 2003 @ 7:48 pm
JWZ is wrong, except for one thing: The inflexible pixel-based CSS layouts that replace auto-sizing tables are often a step backward.
Just try resizing the text on the new, shiny ESPN.com, for instance. Oops, there go some of the headlines, irretrievably off the layout.
Comment by Mike Kozlowski — Thursday, May 1, 2003 @ 7:53 pm
Fuckwit, n.: a moron, but even more so; someone who is out of their league. Out of *any* league.
Examples: “Did you see JWZ’s post?” “Yeah, what a total fuckwit.”
Syn. see fucktard.
Comment by kami — Thursday, May 1, 2003 @ 8:05 pm
Oh, BTW, whatever magic MT Macros you have going, it didn’t get “FUD”.
Comment by kami — Thursday, May 1, 2003 @ 8:06 pm
Way to show that element-nesting oldschooler how its done, Mark.
Bravo!
Comment by Jack — Thursday, May 1, 2003 @ 8:08 pm
Wow. Tim’s site renders about as well as a post-it note mock-up. Instances of cut-off text, strange layout and odd spacing. I recall something about removing planks from eyes here..
Comment by Eli Sarver — Thursday, May 1, 2003 @ 8:23 pm
My marbles didn’t want to play in your hardcoded-pixel sandbox anyway, so there.
Comment by jwz — Thursday, May 1, 2003 @ 8:54 pm
Mark, I see you posting on your site emails that seem to have been sent to you personally. Do the senders agree to you publishing it? For me, emails sent to an individual should remain private between the two people unless stated otherwise. Isn’t this an obvious ethical assumption? Or have I been wrong all this time?
Comment by Claude Montpetit — Thursday, May 1, 2003 @ 9:39 pm
Anger is so ugly.
Comment by Phillip Harrington — Thursday, May 1, 2003 @ 10:04 pm
It might be considered polite to ask a person before posting an email, but much like a verbal conversation, reproducing it is OK if at least one of the two parties is aware of it/allows it.
I write all my emails with the knowledge that the “Forward” button is just one click away — same diff as posting it to a website.
And just to wrench this comment back on topic…anything that can’t be bookmarked should die a quick death.
Comment by Boris Mann — Thursday, May 1, 2003 @ 10:16 pm
I’ve always considered DIV and SPAN tags as sort of the training wheels current browsers need to get the job done. They, of course, add nothing to the semantic structure of a document and, eventually (hopefully), we’ll be able to discard them altogether.
Have the XHTML 2.0 drafts discarded them yet? Wouldn’t surprise me… in fact, I think it would be rather inconsistent of them not to do so given what else they have chopped away.
The fact that they have done away with the style attribute demonstrates how serious they are about completely segregating style from structure, so why leave in any sort of style “hooks”?
I am not advocating that they do this, but simply that its rather inconsistent of them not to do so.
Comment by MikeyC — Thursday, May 1, 2003 @ 11:00 pm
kami, please do give us the URI of your personal CSS-formatted site which works well in all versions of Netscape and Internet Explorer from 3.0 upwards. You bring to mind Eric Hoffer’s quote, “Rudeness is a weak man’s imitation of strength”.
(On preview: Hey Mark, your comment preview page still uses your old site design!)
Comment by mpt — Friday, May 2, 2003 @ 12:59 am
I’m a moron for diving into this imminent flamewar, but I had a glance at Mark’s stylesheets, and I see pixels used for borders and margins. Seems pretty acceptable to me. I’m wondering if jwz’s comment is perhaps misdirected. Yeah, pixel-based layouts are horribly inflexible, but it’s really only a problem when, for example, people specify column widths in pixels instead of percentages.
Anyway, try designing a site that uses a separate print stylesheet (or really, any alternate stylesheets) using a table-based layout. Have fun. I promise that I’m not doing this in the interest of self-promotion, but take a look at the following page of mine in Mozilla/Firebird/whatever, and then do a print preview. CSS rocks.
http://www.chompy.net/amazon/wishlists/jacob.html
(Yeah, the screen font sizes are specified in pixels. I need to rectify that.)
And thank you, Mark, because I’ve learned most of what I know about (X)HTML/CSS from your web sites, and I keep coming back, because I know I can always learn something new, pragmatic, and useful.
(Incidentally, I couldn’t have created that page without Mark’s PyAmazon.)
Comment by jacob — Friday, May 2, 2003 @ 3:25 am
If you’re going to use a tab metaphor, then they should work as they appear to, no? When you click on one, you should show that tab, as with any gui. Using them as a menu for a site - taking you to a new page - “appears” wrong. I’m always annoyed when clicking a tab and it loads a new page (usually because the developers - yahoo? - wouldn’t do something nice for modern browsers). I wouldn’t load a whole site into tabs, but they can be very good for a page or an info box.
On a side note, Tim can obviously add bookmarking easily with a variable at the end of the url, which could even work without js.
Comment by stylo~ — Friday, May 2, 2003 @ 3:56 am
A semi-recent phenomenon I’ve noticed is people using user-interface metaphors as metaphors themselves, and comment 15 is a good example.
The underlying metaphor for a tabbed dialogue box is a notebook with tabs for switching between sections; you use the tabs for big navigation steps, not small ones. Using tabs to switch between major sections of a web site seems a closer analogy to the real-world tabbed notebook than their use to organize oversized dialogue boxes. Web pages bigger than a single screen can use scrolling (and internal links) for internal navigation, something dialogue boxes cannot.
Also I cannot imagine too many people genuinely expect web sites to behave like modal dialogue boxes when it comes to tabs — the tabbed-notebook metaphor has been used fairly consistently over a broad range of web sites since the early 1990s. Even my home page, once aupon a time (http://web.archive.org/web/19981111185305/http://www.alleged.demon.co.uk/ ), though I use a different style nowadays.
Comment by Damian Cugley — Friday, May 2, 2003 @ 5:32 am
More generally, Web interfaces — by their simplistic nature — require loading new pages for lots of reasons. That loading is annoying whether it’s from clicking a tab, submitting a form, or even clicking a link. Even with what we call “broadband”, the Web is dozens of *times* slower than it needs to be for people to be able to concentrate fully on their work rather than on the mechanics of loading Web pages.
(Another example: Hotmail’s sign-up form reloads the page when you choose your country from an option menu, so it can offer you a second menu of cities/states within that country. At DSL speeds, this distracts the approximately 60~70 percent of my customers who notice the reloading; on dial-up, it must be even worse.)
Comment by mpt — Friday, May 2, 2003 @ 8:22 am
“In Tim’s first example, in Opera 7 (W2K), the tabs are all sitting on top of each other! (And yes, all the other stuff you said…those are not real tabs for a real site.)”
The Opera problem is because of the CSS used, probably easy to fix, nothing to to with the tab system. The whole beauty of Mark’s (and my) system is that it’s down to the CSS you use.
Not tabs for a real site ehh? And just what the hell kind of comment is that..
And regarding other accessibility issues such as keyboard navigation and direct linking, I wrote mark back an email. http://www.developer-x.com/journal/2003/may/mark-tabs.txt None of these pose any problem whatsoever.
I already have a version with keyboard navigation working:
http://www.developer-x.com/projects/style-switcher/
This works on the basis of having anchors inside the ul elements, and hence you can tab through the links. This way was also nice because you could do anchor:hover in CSS, in IE. I think Erik Ardvisson actually captured keytstrokes, and did it that way.
Bookmarking is no problem:
http://www.developer-x.com/projects/tabs/request/uri-linking.html#Step%202
All you need to do there is when you click a tab, make it anchor a hash link to the address bar.
I also realise that a few extra features such as cookie persistance, and dynamic #linking recognition between tabs etc.
If they don’t render in browser x, it’s because I screwed some CSS up. Just use Mark’s CSS to style the list, if it makes you happy…
Please note that Mark’s usage of CSS tabs is *totally* fine, by beef was with dynamic versions that sacrifice an otherwise structured HTML foundation.
“Wow. Tim’s site renders about as well as a post-it note mock-up.”
Yeah, I love your site too. Lots of nice pipe symbols conveying formatting in the HTML (structure) element of the page. Great.
Anyone else wanna have a poke? I’m all ears. Let’s keep it friendly, please.
Comment by Tim Scarfe — Friday, May 2, 2003 @ 9:11 am
Div and span tags can have real meaning and have real semantic uses. I can’t see any real proposal to get rid of them real soon.
For example, how else could you divide your page into separate navigation and content regions except with divs? The span tag has plenty of semantic uses too. For example, if you have a sentence in a paragraph that’s in a different language to the rest of the page then it’s good practice to mark it up as a span with the lang or xml:lang attribute set to the required language.
I think there is something inelegant having to use divs within divs purely to get round browser incompatibilities. It’s liveable with and certainly beats nesting tables four deep.
Comment by Matthew Farrand — Friday, May 2, 2003 @ 9:27 am
Tim, apologies for such a short & snarky message early (written at the end of a long, brutal workday).
What I mean by “not for a real site” is that you wouldn’t use that sort of all-in-one-page tab system for navigating through very large swaths of information.
On my personal site, I can do all sorts of quasi-pixel-perfect wankery (right now it’s a mess of little boxes that only looks right in Moz 1.2 on my home computer), but for work I have to deal with hundreds of pages, thinking about people who have N4 and don’t even know what that means, people on dial-up, hell, people who don’t necessarily have that hot a grasp of the English language. (not that the CSS helps there at all, but still.)
Those tabs might be useful for a small subsection, but as Mark says, if you’re using the metaphor of a tabbed notebook, it just doesn’t work.
And yes, print stylesheets rock. I often have to have pages proofread, and it’s nice to be able to save the state a little ink & paper when I do.
Comment by Elaine — Friday, May 2, 2003 @ 9:48 am
that would be *earlier* - ack…what I get for commenting on a blog before 7 am (my time).
Comment by Elaine — Friday, May 2, 2003 @ 9:50 am
MikeyC,
Why would XHTML 2.0 discard div and span? They are generic elements, to be used where no other element will do. I’d much rather use a div element with a sane class than a p element where it isn’t a paragraph.
Generic elements, and class/id attributes are not “style hooks” - although they can be abused in this way. They are meant to be used to add meaning. And no, just because browsers don’t pay attention to classes out of the box it doesn’t mean that they are purely presentational to be used by css. Think of bookmarklets, styling, pingback/trackback-style uses, and server-side stuff.
Comment by Jim — Friday, May 2, 2003 @ 11:16 am
How come Tim Scarfe’s examples don’t work in IE5/Mac?
Comment by kirkaracha — Friday, May 2, 2003 @ 12:28 pm
But ad hominem is so much *fun*!
Comment by kami — Friday, May 2, 2003 @ 12:49 pm
>>The underlying metaphor for a tabbed dialogue box is a notebook with tabs for switching between sections; you use the tabs for big navigation steps, not small ones. Using tabs to switch between major sections of a web site seems a closer analogy to the real-world tabbed notebook than their use to organize oversized dialogue boxes.
-you’re confused about the container. When you have tabs sitting on a box as this and other sites do, the box is the container (i.e., your notebook), not the browser. The browser is the container of the website, with tab browsing being the perfect example. So clicking tabs would change what is shown in the container if you follow the metaphor logically.
>>Also I cannot imagine too many people genuinely expect web sites to behave like modal dialogue boxes when it comes to tabs—the tabbed-notebook metaphor has been used fairly consistently
-how many times do you use a tabbed notebook vs. a tabbed program gui? So which is more relevant as the basis for the metaphor???
Comment by stylo~ — Friday, May 2, 2003 @ 1:07 pm
>>More generally, Web interfaces — by their simplistic nature — require loading new pages for lots of reasons.
-sure, but not needed for simple info boxes and page info where a section can be hidden/shown. It’s just bad/lazy/all-for-one design when simple things like that load a new page. (You also increasingly see authors usings rpc to load info from the server into a page.)
Comment by stylo~ — Friday, May 2, 2003 @ 1:14 pm
For anyone who’s curious, I’ve done some playing around with tabs in the past few days:
http://unraveled.com/joshua/projects/css_tabs.shtml
Comment by Joshua Kaufman — Friday, May 2, 2003 @ 4:38 pm
DIV and SPAN are the tofu of HTML.
Comment by mpt — Saturday, May 3, 2003 @ 12:58 am
hey Mark,
Tim mailed u once again after that. could you please post that here too
Comment by Abhi — Saturday, May 3, 2003 @ 3:09 pm
Tim already posted it. See comment 19.
Comment by Mark — Saturday, May 3, 2003 @ 4:29 pm