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.

Powered by ScribeFire.

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

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.

Powered by ScribeFire.

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.

Two Simple Step Process:

1. Add the following style to your CSS:

   .DisappearingVisited a:visited{
           display: none;
   } 

2. Apply style to list of links on page:

   <span class="DisappearingVisited">
   <a href="http://www.google.com">Google.com</a>
   <a href="http://www.firefox.com">FireFox.com</a>
   </span>

That’s all there is to it. Have fun with it and let me know if you find a good use for it.

Added Example – Try it!

www.fastcompany.com
www.mashable.com
www.thoughtsparks.net/portfolio
www.smashingmagazine.com

• 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:

  <a href="http://www.thoughtsparks.net/glossary/#HTML">HTML [Glossary]</a>

  Specific page is: http://www.thoughtsparks.net/glossary/
  Specific location is: #HTML
  
  

• The text [Glossary] could be replaced with an image icon or just hyperlink the word itself.

  To add a specific location place the tags <a name="HTML"></a> around or next to the location i.e. <a name="HTML">HTML</a> on the glossary page.

Example: HTML[Glossary Term] or HTML

Combine the Two

You will notice in the top paragraph that I actually combined the two methods into one giving brief explanation w/ a link to the glossary explanation.

Example: HTML

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.