o
Return to Yavapai College Home Page
Future Students Current YC Students Faculty & Staff Lifelong Learners Community & Visitors

Yavapai College > Information Technology Services > Web Services > Web Author Training Resources > 3. Sticky Notes

remember not to forget

"Post-It Notes" Formatting

Call attention to specific data with a sticky note

There are times when you will want to call attention to a specific instruction or bit of data on a web page. Often times although there is an attempt to make the information stand out on the page by making the text larger or a different color, however, the effect only buries the information on the page.

How do we read web pages, we scan them

Readers of web pages do not start at the top of the page and work their way down -- as if reading a novel. The process of reading web pages is that of scanning. We search for a key word or phrase that relates directly to the information we are hoping or wanting to find and we begin reading from there.

It's very difficult to overlook the information that appears here. It's important for the owner of the web page -- and for the visitor to the page

The sentence above was difficult to miss; there's a very good chance that you read the information in the yellow box directly above this paragraph. Keeping this in mind, we can use these "note" boxes to communicate vital pieces of information, or instructions that we want to ensure the reader finds.

The right "Post-It Notes" for the job

The following post-it note icons have been set up for you to see the assortment of icons that you can use to grab the attention of your website's visitors. The icons are each symbolic of different concepts, and hopefully you'll always find that one of the noteicons are appropriate for the type of message you want to carry across.

This is the "alerticon" class. This icon may be perfect for the times when there's a document or instruction that requires attention.

This is the "bulbicon" class. This might be useful when there's an idea that may be good for a user to understand as it relates to the documentation on your page.

This is the "helpicon" class. When there's a typical question or confusion in regards to a specific point this might be a great icon to use to give the user a contact person's information like a phone or fax number

This is the "wandicon" class. Perhaps there's a step, process or a tip that will be very helpful for the user. This icon can get that message across.

This is the "infoicon" class. Perhaps there's a point of information that is important but not critical to know.

This is the "lifeicon" class. Most people relate the lifesaver ring to emergency situations. Another form of help, perhaps crucial help.

This is the "noteicon" class. This icon can be useful when it's imporant for a person to jot dot a piece of information

This is the "clockicon" class. This icon can be useful when it's imporant for a person to jot dot a piece of information

This is the "smileicon" class. This icon can be useful when it's imporant for a person to jot dot a piece of information

This is the "gearicon" class. This icon can be useful when the page content is a work-in-progress

This is the "wrenchicon" class. This icon can be useful when the page content is a work-in-progress

This is the "warningicon" class. This icon can be useful when there is information that is critical to know

This is the "mediaicon" class. This icon can be useful when featuring multimedia content.

This is the "knowicon" class. This icon can be useful when featuring a "Did You Know?" fact or statistic.

Noteicons Code

Each of the noteicon sets use identical code with a single exception. We assign a unique class to call in the appropriate graphic

<!-- START NOTEICON -->
<div class="noteicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START ALERTICON -->
<div class="alerticon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START INFOICON -->
<div class="infoicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START LIFEICON -->
<div class="lifeicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START BULBICON -->
<div class="bulbicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START WANDICON -->
<div class="wandicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START HELPICON -->
<div class="helpicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START CLOCKICON -->
<div class="clockicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START SMILEICON -->
<div class="smileicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START GEARICON -->
<div class="gearicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START WRENCHICON -->
<div class="wrenchicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START WARNINGICON -->
<div class="warningicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START MEDIAICON -->
<div class="mediaicon"><p>this is the message that appears in the yellow box.</p></div>
<!-- START KNOWICON -->
<div class="knowicon"><p>this is the message that appears in the yellow box.</p></div>
 
 


© 2010 Yavapai College, 1100 East Sheldon St., Prescott, AZ 86301
Contact Us:  928.445.7300 or 800.922.6787

Disability Resources    | Terms of Use    | Copyright Notice    | Cookie Usage    |    Questions or comments about this page? Let us know