Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    How to Create Powerful Content with Lists

    by Steven Moseley

    Lists allow you to display information in an ordered fashion by dissecting the content of your site into smaller, more legible pieces.

    Lists have been used in advertising for years, and are proven to increase readership. They convey the notion that you have something important to say, and that you have organized your thoughts clearly enough to section them appropriately and concisely.

    In HTML, there are three pre-defined types of lists: ordered lists, unordered lists, and definition lists.

    List Items

    List items specify points to note in ordered and unordered lists. Each item is separated from the others on its own line and preceeded either by a numerical, alphabetic, or graphical point marker.

    Item Types

    The type defines what kind of numbering or lettering will order the list. Possible values are "I", "i", "A", and "a". Default is numeric.

    Ordered Lists
    1. It has been well known in the advertising world for decades that Ordered (Numbered) Lists increase the readership of a body of text.
    2. Pioneers of print media (such as Ogilvy and Mather) often used lists exclusively in an ad (such as their famed Rolls Royce print ad of the late 60s) which would increase the amount of readers by 10% or more on average.
    3. Why people like to read text in lists is unknown, but my belief is that it organizes information into easily tackled sections that:
      • Define the individual thoughts contained within the text as separate entities, and
      • Order those separate entities in the level of significance perceived by the author.

    <ol></ol>
    These are the “ordered list” elements. Any information between them will be indented from the previous text. Further, any list items defined between them will follow a “1,2,3” or “a,b,c” hierarchy (thus the name “ordered”).

    Example:
    Code:
    <ol>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3
            <ol type="a">
                <li>List Item 3a</li>
                <li>List Item 3b</li>
                <li>List Item 3c</li>
            </ol>
        </li>
    </ol>
    Unordered Lists
    • Unordered (Bulletted) Lists are similar to Ordered (Numbered) Lists in that they divide a body of text into discernable thoughts.
    • However, unordered lists are less effective in increasing readership, because they lack the numbering of ordered lists (which further organizes the text).
    • Although effective in conveying a series of thoughts that have no particular order, it is preferable to use ordered lists whenever possible.

    <ul></ul>
    Any information in unordered lists will be indented from the previous text. Further, any list items defined between them will follow a bulleted hierarchy (not numbered, and therefore “unordered”).

    Example:
    Code:
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3
            <ul>
                <li>List Item 3a</li>
                <li>List Item 3b</li>
                <li>List Item 3c</li>
            </ul>
        </li>
    </ul>
    Definition Lists

    Definition lists are a little different from ordered and unordered lists because they don't have any preceeding marker, and because they have two elements for each item in the list: a term and a definition
    The "term" element denotes the word or phrase that will be defined. It is not indexed (as other items in lists).

    The "definition" element is the description of the term element. It is indexed (tabbed) to the right to distinguish it.

    Example:
    Code:
    <dl>
        <dt>Term 1</dt>
        <dd>Definition 1</dd>
        <dt>Term 2</dt>
        <dd>Definition 2</dd>
    </dl>

  2.  

  3. #2
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    You should also explain how alot of people incorperate CSS and graphics to make custom bullets, as well as special navigation.

    Very cool tricks indeed.


  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    newfie, good point. I forgot about that

  5. #4
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    All in a days work Transio!



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com