Lists for design?

How you guys feel about using lists for design creation?

I mean something like the following:

I mean, it is used by phpBB for their Olympus design (and yes, I'm aware that whatever they do aren't always right ). I just got interested in using lists for design when I saw how Olympus is created by phpBB, and tried it.

I think that columns are easier to do with this type of thing, but I want some input from you guys before I go anywhere with this

I don't usually use lists for layout unless content of a column is a list of links or something similar. I do however use lists for almost all navigation (horizontal & vertical) since once the css is stripped away your nav really is just a list of links.

The nice thing about using lists for columns of text is that it degrades in order so people get the understanding of the content flow.

So, what would your opinion be on the topic... should I use lists for columns/design/layout or should I not?

haha I wasn't very clear on that was I. Sorry about that. I think I would recommend sticking with a generic container like a div or span for MOST of your layout. The reason for that is things like a list have specific meaning to screen readers, browsers with css turned off, etc.

In some cases like a horizontal menu you would want your content to appear as a list in the scenarios above and you can then use CSS to alter the position/color/size, etc of the individual items for any browser that supports the option. Hence progressive enhancement.

I would also recommend using a list in the specific instance you sited where there are multiple columns of textual content (like a newspaper) since someone with a screen reader has no idea what order you intended for your content (where do columns start/end, ect) if you use generic containers like divs. I know its not extremely common but even though a divs appear one after another in the markup, CSS could potentially give you div #1 thats actually column #3 content.

So to put it more simply YES use lists for content organization. But DON'T use lists for global layout like header, menu, main body, and so on.

Oh, that makes sense. I'll change my design a little bit, since the whole design is dependent on lists... thanks for the tip

your welcome.

I'm voting for on occasion. Reason being is lists play a pretty significant role in several jQuery plugins, so I use them quite often.

Your example list is not very valid: I don't think <dl>'s can be nested within <li>'s, for example.

Anyway, I find that many people use lists that way simply because the markup looks cool. Creating a nice layout from such a spartan piece of code gives one a slight buzz and a sense of power (maybe that's just me though ). I'd resist the temptation if that is your main motivation.


It's all too easy to get list-itis.

Purely speaking of lists being used in terms of design layout, lists are considered block-level elements; so technically could be used in place of divs. They can be given almost any css property. I find myself asking why you would want to do this though.

Actually, you CAN do that... try to validate the code on My Site Text Page. The content is fluid, and it doesn't matter which column has more text as each column would be as long as the other no matter what.

That is XHTML Strict Valid... I've got <dl> inside of <li> and <dt> inside of <dl>, so it's valid.

Yep, you're right.

It was a missing <li> start tag in your first post that had the validator throwing a fit and not any underlying problem with the methodology.

I fixed that validation error on my example up top...

So, it's okay for columns but not recommended for rows? How about SEO wise... graphixboy mentioned 'degrades in order', is that good for people or is it also good for search engines?

I don't know if it's so good about SEO though... considering header tags (<h1>...) aren't allowed unless you insert it in there (<ins><h1>...</h1></ins>...), but that looks messy.

Maybe I should stop and just use divs again Just trying something new.