Thought Sparks

We love lists and if you can compact information into a set of 10, then you’ve found the holy grail of blog post formats. Searching Google with the phrase "10 reasons" turned up 190,000,000 results.

There is something tight about a list of 10. It’s long enough to convey a good amount of information but short enough to assimilate and remember. It just seems complete that number 10. So, in good fashion, what would a post on list-items be without rounding to the number 10.

1. List-items are easy for humans to read. Most users scan sites for information and only get down to reading content where they find pertinent information. Readers enjoy combing through sites that provide that functionality. Sure some readers may hang on every word you say, but for the rest, lists give them ability to jump right to the information that brought them to your site in the first place.
2. Search engines index lists well. Lists prove popular with search engine optimization as well for much the same reason as point number 1. Search engines are designed to assist humans in finding pertinent information to their queries. Lists provide a structure to information that fits nicely within search engine algorithms. You are assisting the search engine in properly indexing your site by giving a topic and outline of information.
3. Lists organize thoughts and encourage succinct communication. When I start a list, I often write-out the main points and then return to the list-items to fill-in the explanations. This provides a very quick way to outline my the major points and then return to the nitty gritty details.
4. People read lists. There’s something welcoming about a list. It conveys a sense of confidence that the reader will be able to quickly get through the information.
5. Unordered lists convey a sense of collective, non-linear groups. Bullet items in presentations whether PowerPoint or on the web have become a mainstay for content structure.
   

   Unordered list looks like: <ul> <li>First item</li> <li>Second item</li> </ul>

   And renders like: First item Second item

6. Ordered lists show a hierarchy to information in a progressive manner. An ordered list is the same structure as an unordered list except that it uses <ol> and </ol> tags instead of <ul> and </ul> tags. The nice thing about lists is that changing those two tags applies a different treatment to the list.
   

   Numbered list looks: <ul> <li>First item</li> <li>Second item</li> </ul>

   And renders like: First item Second item

7. Definition lists give meaning to the list as terms and definitions by its structure. The Definition list is a lesser known and used list but can be very helpful both for search optimization and for a quick structure for glossaries.
   

   Definition list looks like: <dl> <dt>Guitar <dd>a stringed instrument; played by strumming or plucking <dt>Piano <dd>an instrument with a keyboard that strikes wire strings </dl>

   Which renders like: Guitar a stringed instrument; played by strumming or plucking Piano an instrument with a keyboard that strikes wire strings

8. Lists are flexible for styling. By assigning classes to lists, the list can change it’s display without changing the content. A good example of that is illustrated in the post Horizontal Tabs – CSS Video Tutorial #2.
9. Lists are multi-purpose. Lists can be used for vertical and horizontal menus, information content structure, options in a form and displaying graphical information such as photo galleries.
10. Lists make formatting quick. The nice thing about lists are the built-in type attributes that can be assigned either at the style sheet or at the point of creating the list.

    Ordered list format option:

    1. capital letters
       <li type ="A">
    2. lowercase letters
       <li type="a">
    3. capital roman numerals
       <li type="I">
    4. roman numerals
       <li type="i">
    5. numerical list (default type) <li type="1">

Powered by ScribeFire.

Today’s post features the second Cascading Style Sheet(CSS) Video Tutorial on creating horizontal tabs such as are used for the top navigation of this website. The video is 4 minutes in length.

What is most excellent about  CSS is how a few lines of code in the styles greatly alters the visual structure of a page element.

With a recently purchased microphone headset the quality of the recording is greatly improved. Let me know what you think and what else you would like to learn about in subsequent tutorials.

Horizontal Tabs – CSS Video Tutorial #2