Text, Lists, and Colors

Along with the notes, please refer to Units C & D in the textbook

A web page is made up of essentially 2 things, text and images.  Of course there's a myriad of things that you can do with these, such as links to other pages or forms processing, but the initial text and images is what the user sees and notices about your page.  How you present these also determines whether or not the user stays around to get to all the cool stuff you might have.

Text

When you are laying out the text on your page, you need to approach it in the same way as you would if you were putting a written document together to hand out to a group of people.  There's an endless combination of font types, sizes and colors that you can use.  As I said before, just because you have them doesn't mean you have to use them.  What you want to make sure of is that you don't overpower the user.  You want to use the differences in text to call out those things that you want the user to pay attention to.  Take a look at the following 2 sections of text.

(I want to convey one primary thought)

• SMUD customers in Folsom have paid $238 million less for electric service than they would have under PG&E since their homes and businesses were annexed by SMUD in 1984, measured in today's dollars.

(Same text and thought, but which part is more important?)

• SMUD customers in Folsom have paid $238 million less for electric service than they would have under PG&E since their homes and businesses were annexed by SMUD in 1984, measured in today's dollars.

If you think this is a ridiculous example, just go out and surf a few web pages.  You see stuff like this all of the time.  If you mix in too many switches in color, size, and format, you lose the message that you're trying to convey.

Let's take a look real world look at two contrasts in styles.  The first one, is Microsoft's website.  Notice that this is a very conservative home page, with literally thousands of pages behind it.  There's content for days here, but it's well organized and the developer doesn't really try to push one section over another.

Now take a look at a teacher reference website, Teacher Express.  There's a lot of competition here.  It certainly leaps off the page at you, but there's so much of it, you get the message that everything on this page is equally important and you should look at all of it.  Maybe that's the exact message that they're trying to convey, however, that's also where it loses importance.  In other words, if you beat me over the head enough times, I may get your message, but I also become unconscious in the process.

Background Colors Combined with Text Colors

In the previous section, we looked at background colors.  Combine that with text colors and you can really have an affect on your page.  Seeing is believing so, let's look at some examples

As you can see, some go together better than others.  General practice is dark text on a light background.  It's easier on the eyes.  That's not to say that this is a hard and fast rule.  There are several combinations of light text on a dark background that look just fine.  Just make sure that formatting doesn't overwhelm the message.

Good Example of Bad Color Mixing

Good Example of a Bad Background

Lists

Lists are a great way to call attention to sections of text and you have several options available to you in Expression Web.

• Bulleted list, for presenting a list of unordered items. A bulleted list can use the standard bullets (round, square, or circle), custom bullets that you create, or bullets from a theme (if the page uses one).
• Numbered list, for presenting a list of sequential items. You can choose from numbers, Roman numerals (uppercase or lowercase), or letters (uppercase or lowercase).
• Definition list, for presenting a list of terms and definitions. Terms are usually displayed flush left, with indented definitions.
• Directory list, for presenting a sequence of short terms. Many Web browsers ignore this style.
• Menu list, for presenting an unordered list of short entries. Many Web browsers ignore this style.

One last point about text and lists.  The actual end product will depend on the user's browser settings.  This is not as important a point as it used to be when browsers supported a much shorter list of fonts, but it's still valid.  If you build your page with fonts or styles that aren't widely used, what you build and what the end user sees may be two entirely different things.

Colors

As we have looked at the backgrounds and text colors, we've pretty much stuck with the standards..  It's important to note that you actually have over 16 million colors to choose from.  The color that your computer displays is based on it's RGB value.  The RGB being Red, Green, and Blue.  These are the computers primary colors (which differ from the human primary colors of Red, Yellow, and Blue).  The colors are set by a value (or strength) given to each color in a range from 0 to 255. These colors are represented in Expression Web in hexadecimal format, so 0 is 00 and 255 is FF.  For example:

Now, before you start worrying about not knowing the hex system of numbers, stop worrying.  Expression Web provides some tools that help you create the custom colors without having to go back to math class.  Whether you choose font, background, borders, or shading, when you click on the color button, you'll get a dialog box that looks like this:

You have a list of standard colors as well as any colors you may have used previously in the page.  If you click on the More Colors button, another box will open.

This gives you the ability to use your mouse to select a color and it's corresponding hex value will automatically show up in the value box.  You can also use the eyedropper tool to select a color anywhere on the screen.  Just click on it and your cursor turns into the eyedropper.  Point to anything and it will select that color. Finally, you can even get more detailed by clicking on the Custom button.

This will open up yet another dialog box.  In this box, you can type in the value in regular decimal number from 0 to 255 to set your own custom color.

You may not use this often, but when you need it, you need it.  For example, I created a web site for an employee organization.  They had very specific requirements on colors.  Everything had to be in the organization's color scheme, which was a soft blue, a soft orange, and white.  I scanned a copy of their logo, used the eyedropper to capture the colors, and I was off and running.

Final Note

I want to show you a tool that will make it a little easier for you to play around.  Follow this link to the Colorfinder.  You can quickly see the change as you slide the mouse around and the corresponding RGB value is shown below it.

So now, you have the ability to incorporate formatting that can satisfy just about everyone so I have one final piece of advice. As Clint Eastwood said in a Dirty Harry movie, "A man's got to know his limitations."  I'm not an expert on colors by any stretch of the imagination.  I've found that what looks good to me doesn't necessarily look good to others and vice versa.  In my case, I have a person who is a professional graphic artist, that is very knowledgeable about colors and which ones go with which (you can find volumes on this subject online).  I make the pages operational and then I turn it over to them for ideas on how to make it look good.  My suggestion to you is to find someone who has a knack for this sort of thing and let them look at your pages before you publish.

Return to Notes Page