Voting Chart

Total votes : 4

Is it ok to use lists for design?

  •  
    Yes
  •  
    On certain occasions (post in topic)
  •  
    No

Lists for design?

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

How you guys feel about using lists for design creation?

I mean something like the following:
Code: [ Select ]
<ul>
    <li>
        <dl>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
        </dl>
        <dl>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
        </dl>
        <dl>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
            <dt>Some Text</dt>
        </dl>
    </li>
</ul>
  1. <ul>
  2.     <li>
  3.         <dl>
  4.             <dt>Some Text</dt>
  5.             <dt>Some Text</dt>
  6.             <dt>Some Text</dt>
  7.         </dl>
  8.         <dl>
  9.             <dt>Some Text</dt>
  10.             <dt>Some Text</dt>
  11.             <dt>Some Text</dt>
  12.         </dl>
  13.     </li>
  14.     <li>
  15.         <dl>
  16.             <dt>Some Text</dt>
  17.             <dt>Some Text</dt>
  18.             <dt>Some Text</dt>
  19.         </dl>
  20.         <dl>
  21.             <dt>Some Text</dt>
  22.             <dt>Some Text</dt>
  23.             <dt>Some Text</dt>
  24.         </dl>
  25.     </li>
  26. </ul>

I mean, it is used by phpBB for their Olympus design (and yes, I'm aware that whatever they do aren't always right :lol: ). 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 :lol:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

So, what would your opinion be on the topic... should I use lists for columns/design/layout or should I not?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

Oh, that makes sense. I'll change my design a little bit, since the whole design is dependent on lists... thanks for the tip :D
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

your welcome.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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 :D). I'd resist the temptation if that is your main motivation.


It's all too easy to get list-itis.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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

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.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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 :lol: Just trying something new.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 43 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.