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.
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.
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.
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.
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.
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
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
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
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.
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.
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.
Today’s post features the third Cascading Style Sheet(CSS) Video Tutorial on font usage. The video is just over 4 minutes in length.
One important aspect of web publishing is effectively applying font treatments to make text more readable. With a few adjustments to fonts, the readership of a site will find it easier to assimilate the important information shared with them.
The tutorial shows how to apply several different font attributes to create a more unique and design centered presentation. While the web has some built-in limitations, these techniques will free you from the constraints of the default templates common in many blog applications.
Font Treatment – CSS Video Tutorial #3
Web Safe Fonts
As mentioned in the video, the following is a short list of some basic fonts to choose for a website:
Arial, Arial Black
Comic Sans MS
Courier
Georgia
Impact
Lucida Console
Palatino,Book Antigua
Tahoma,Geneva,sans-serif
Times New Roman, Times, serif
Trebuchet MS,Helvetica,Verdana
Symbol,Webdings
Wingdings, Zapf Dingbats
Let me know if this tutorial is helpful. If you have any other questions about fonts, leave a comment as well and I’ll do what I can to answer them as efficiently as possible. You can take styles in many directions and make simple changes that will spruce-up your site. At the same time they can get very complex especially when tweaking an existing style sheet. Go for it, just be patient with yourself as it takes a while to get the hang of it.
One important tip: before beginning tweaks to a stylesheet, copy and paste the style sheet into Notepad and save to your desktop. Each time you make significant changes and it works well, save another copy. This way if you muck it up, it won’t take you but a minute to reverse it and then wait until a later time to try again.
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.
A developer friend of mine turned me on to the Firefox Add-on Firebug. This tool, not only is invaluable for troubleshooting code for developers, it proved invaluable for revising thoughtsparks.net. This nifty plug-in allows one to walk through the code and stylesheet on the fly while looking at a page. In the sea of WordPress styles, it helped to sort out what div was affected and allowed for fairly rapid revision to my blog. I’ve used this tool in a more robust environment as well and can testify to it’s utility across the spectrum. Check it out at: getfirebug.com.
BTW, any thoughts on the newer look for thoughtsparks.net? I take an evolutionary approach to site revision…a little at a time.
I just thought of a really nifty method to make visited links disappear. This may be handy for a check list to drop-off links as they are clicked. It may also be used to keep content fresh for folks if you combined it w/ a javascript.
If you publish a website or a blog, you are an expert in what you know. Or if you don’t consider yourself an expert, most likely you know much more about your topic than many of your readers. With every topic comes a set of vocabulary that the reader must know in order to properly understand your message. While topic specific jargon is true of any area of focus, this is especially indicative of technical related sites. For many readers all of the acronyms seem like vegetable soup: What does HTML, CSS, and FTP mean they may wonder? As a techie, I am all too guilty at times of assuming my reader understands such words. At the same time, so as not to be guilty of logorrhea infanitum, I have employed two not-common enough, but accepted methods for assisting my readers:
Cursor:help
Site Glossary
Cursor:help
Cursor:help refers to an attribute in CSS. when you mouse over the acronym CSS you notice an exclamation mark and description. This is a help to users to know more about the meaning or significance of the word.
To add Cursor:help to your site:
Place the following in your style.css or main style sheet:
.TSDef
{COLOR: #CC6633;
CURSOR: help;
TEXT-DECORATION: none;}
Change the text color to your choosing and bold the word by adding "font-weight: bold;"
Employ the <span> tag to create the effect: <span class="TSDef" title="Hyper Text Mark-up Language. HTML is the basic language of the web.">HTML</span>
<span – opens the span tag
class="TSDef" relates to the class defined in the style sheet
title="" is the information you want to appear in the mouseover
</span> closes the tag
Example:Cursor:Help
Add Site Glossary:
Create a link to the page and specific location on the page of the word:
You now have two options for enabling your readers to more fully understand your subject matter. Both of these are fairly standard conventions on the web and will add value to your site.