51 Re: to nandini

Thanks for that, Rikkert. I read your article on classes with interest and gleaned some information about semantics from the W3C page you’ve linked it to.

Just one suggestion – you may want to validate the CSS on your site (default.css at www.rikkertkopes.com) and the HTML markup for your article at http://www.rikkertkoppes.com/thoughts/class-and-style , as there are several errors coming up in both, in W3C’s validator.

Thanks again.

posted at 08:51 pm on February 17, 2005 by Nandini Doreswamy

52 the interesting stuff is at the end of the comment

[offtopic:] The fun at of reading ALA is vanishing rapidly if the first four pages of comments contain nothing but slashing authots, complaining about ALA article standards etc.

If you like to play the part of the two old men at the balcony in The Muppet Show, shouting ‘boo’ at every act, that’s fine. The problem is that you are not half as funny and you make the audience leave the theatre in the end. Please, open up your own theatre if you are so shocked by the low quality of ALA[/offtopic]

I’m interested in the javascript versus two UL-list solutions: – [removed]
When CSS is turned off you still have a split list, which I guess is fine since it will flow with the text. But what if the screen is really small and a CSS float would force the ul’s the be stacked upon each other, which is the behaviour you want, what will happen to the split list?.
When javascript is turned off, the result would be one long list, which is not what you intend, but would still be readable and workable within the layout. – CSS: When CSS is turned off the ul’s would be stacked up vertically in the right order. I guess this is requested behaviour and would leave the flow of text intact.

Are there any other considerations? And what would the unobstrusive javascript solution look like?

@arnoud berendsen: your example shows one list in Firefox 1.0, not a split list.

posted at 12:20 am on February 18, 2005 by Martijn

53 To Nandini

My complaint about the semantics of your solution would be that you use two lists while it is actually one.
The point of semantics is that the document itself represents the structure of the data and should not contain anything that implies something visual. In other words it should group data but not specify what it should look like. So it should not say wether text should be big or bold, or in our case tell if the list should be displayed in two columns. If you would look at the document without CSS there would be two lists while it essentially is one.

If I say that the document can’t specify wether text should be big or not, I mean that in a entirely presentional way. It should specify that the text is a header for example, which would in most browser display in a bigger font. Same goes for italics or bold, if you emphasize text it will be displayed in italics in most browsers, strong emphasis is often displayed as bold text.

The problem with your classnames is that you specify ‘left’ and ‘right’, which basicly controls the visual aspect instead of structural.

—

@ Martijn:

I don’t agree that arguing over the quality of the articles is useless or offensive.
This article needs improvement and that should be said. We all learn from this discussion and excellent alternatives have been proposed.
What does bother me is the continuous repeating of “let’s do it with a floated li with a width of 50%”

So to get back on the main issue here, I’ve done this in the past by floating li’s with a width of 50% – oi I’m contradicting myself in the above paragraph.
For unordered lists this is in my opinion the best solution since order is not important. After a quick thought I believe for ordererd lists a unobtrusive Javascript would do the trick because we preserve semantics. if I have time I will test this and post the results and a script.
I do have to reconsider if it’s a good idea to split ordered lists anyway.

To conclude I would like to thank the author for posting this since a useful discussion has been initiated. As a sidenote I think ALA should’ve used their new icon to emphasize on the non-pure semantics.

posted at 01:48 am on February 18, 2005 by Jop

54 Way back in February 2004...

I posted a similar article to this on my site asking how to arrange a split list. My problem was using two horizontal table cells and one list split between them. You may be interested to read the various solutions readers came up with in the comments:

http://www.designdetector.com/archives/04/02/AQuestionOfHTMLPart2-SplitLists.php

Regarding the article here, I would initially have considered a table. Since the list isn’t a numbered one, the order is irrelevant. So just put each list in a separate cell. This will also work when CSS is turned off.Otherwise the layout is broken, using the solutions posted here, as the list becomes a single column without CSS.

I would not consider using JavaScript here, as the user may well have it turned off. (Again the layout will be broken and a single list will appear.)

posted at 01:54 am on February 18, 2005 by Chris Hester

55 Re: Way back in February 2004...

I don’t want to sound offending or arrogant, but I think you got it all wrong; the layout should be broken without CSS because HTML isn’t supposed to show layout in the first place.

Using tables is even worse, like said before these list-items are not tabular data. It’s just a list of items, where a table is not. Consider the unstyled document, it should display a list (who cares if it’s split up in two rows, it’s still a list) and not a table, where the user would except some sort of relation between the items (a table should always have a header explaining the meaning of the data, which we do not need here).

posted at 02:07 am on February 18, 2005 by Jop

56 What I tried to say

is: users (also applications – like a search engine) with CSS turned off usually say: “give me the data and not the design”, so be nice to them and give them what they ask, don’t go and split up lists in two if it’s actually one.

posted at 02:14 am on February 18, 2005 by Jop

57 Default Styles

@Arikawa:

Another way to reset the default stylesheets is to define a default for all elements. W3C has a basic version of this for HTML 4 at http://www.w3.org/TR/CSS21/sample.html
It may be a bit weighty, and there are some you’ll have to fix to be cross-browser compliant (abbr, acronym, br and remove the BDO section) but it gives you the most control.

posted at 05:35 am on February 18, 2005 by Ryan

58 A fine solution to a rare issue

The design by Nandini seems to be fine to me. Just because there are multiple ways of designing doesn’t make one wrong or right as long as it conforms to web standards.
The page was designed as an unordered list for 4 items- not numbered. Seems many posters are more interested in posting their “grand way of designing”.
The amount of harsh attention this article has received is unnecessary.

Can you do it differently? Sure, but isn’t that the beauty of design?

Does it work in multiple browsers? YES.

Does it meet what the client’s needs? YES.

Does it slow the page load down to a point where users will leave? NO.

You all are getting lost in the dot-and-tittle over a few bytes- you’ve wasted more space and energy than is necessary (I am speaking to the negative posters, not the ones who have kindly offered other possible solutions). To the positive posters: thank you for your continuing development of the CSS/Web standards community.

To the negative space-wasters: Stop posting just to hear yourself talk. Learn what you can from the article and move on.

Thank you Nandini for posting an interesting solution approach to this design. Good luck with your endevours and keep posting.

ALA: keep posting these articles because I can learn something new from everyone.

posted at 06:19 am on February 18, 2005 by Bob

59 Should more ALA articles admit fallibility?

First off, I suppose I should take a position on the best solution so far; mine is: http://www.unbf.ca/altiustu/upload/multilayer/ If you are going to split a single list in 2 and label one “left” and one “right,” the lesser evil is certainly to preserve a single list and label individual LIs as “left” or “right”, no?

But the larger question, in the larger context of ALA, is the way a solution is presented. I think that we can see from teh responses thus far that to be presented a solution such as teh article proposes as somehow DEFINITIVE or as a BEST PRACTICE defintiely puts the reader’s teeth on edge, preparing each to respond aggressively to faults. I mean, the article’s technique is no “Sliding Doors,” as I am sure most will ackowledge.

I, for one, would be much more interested in articles such as these being presented as a conversation starter, encouraging the ALA community to propose their own solutions (as many have done here). If the author were to ackowledge at the beginning that s/he recognizes the drawbacks to splitting a list between ULs and requiring presentational class names, and that this solution proposed here is nothing more than one attempt at a solution, I think the community would respond more positively, and with no fewer great proposals of their own.

posted at 12:35 pm on February 18, 2005 by Josh

60 Thanks

Friends,

Disagreement about techniques and passionate discussion about alternatives are healthy and productive. Hyperbole and personal attacks are not. The perpetrators of the latter seem inclined to hit-and-run tactics, and probably won’t read this. So instead of spending a lot of time on them, I want to thank you, our regular readers and contributors, for helping keep the forums professional, civil, and focused.

You’re the reason our authors spend unpaid hours developing and writing and testing for ALA articles, and why it’s worth it for our also-unpaid staff to keep making the magazine go.

Based on the number of proposed alternatives to Nandini’s technique we’ve seen posted so far, it’s clear that there isn’t a consensus on the One True Way to solve this design problem. Happily, the article and forum will provide a great resource for people who need it.

Finally, one word to the less-helpful participants. The inevitable comments about ALA’s decline don’t make much of an impact on the magazine’s staff, but they do tend to derail the conversation and take focus from the article / techniques under discussion. If you feel strongly about it, please contact the crew directly or take it to your own site. If you’re just letting off steam in public for kicks, you’re wasting everyone’s time.

posted at 01:10 pm on February 18, 2005 by Erin Kissane

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)