Principles of Web Design
Slide 1 – Title Slide
Slide 2 – Plan and Create
The goal of studying the principles of web design today is two-fold. First of all, as a
teacher of web mastering, you need to have a firm grasp of the ideas that we are going to
present during this session. There are tons of websites out there that, quite honestly,
simply stink. The people who developed them should either learn the things that we are
going to explore today or go do something else. So you need to know this stuff in order to
teach your students how to plan and create well-designed sites.
Now, what is a well-designed site? It is a site that is, first of all, easy to navigate. I get
really tired really fast of trying to dig my way through a poorly designed site looking for
information that should really be easy to get to. So that is number one. Make your site
easy to navigate. You should also balance the use of text, graphics, and color. Those are
the things that we are going to be discussing today.
Oh, and by the way, the other reason that you need to know this stuff is because SBEC
says that you should know it if you are going to be a web mastering teacher.
Slide 3 – How Browsers Affect Your Work
The Parser Problem
One of the big challenges facing a web author is designing pages that display properly in
multiple browsers. Every browser contains a program called a “parser” that interprets the
tags in an HTML file and displays the results in the canvas area of the browser. (The
canvas area is the area in the web browser where the content of the page appears. It is the
graphical representation of the <body> section of your html code.)
This little parser program is the source of many sleepless nights for web masters because
the logic for interpreting the html tags varies from browser to browser, resulting in many,
possibly conflicting interpretation of the way the html file is displayed. There are several
different ways to approach this dilemma. We will discuss each one of them in just a
moment. So while you may consider your work to be cross-platform compatible, if you
actually begin testing you pages in multiple browsers you may find out that the page that
you spent several hours on getting it just right in IE may look totally different in
Netscape. And, unfortunately, you may even find that pages that look and work perfectly
in IE 5.5 may look totally different in IE 3 or IE 4. So what is a person, or more
accurately, a web master, to do? Well, you have several options.
Lowest Common Denominator Coding
One option is what is known as Lowest Common Denominator Coding. This option
provides the greatest acceptance across browsers because the author chooses to code his
html using the next-to-last release of HTML. (We are currently in HTML 4 and HTML is
slowly being replaces with XHTML and many tags and attributes are being deprecated in
favor of CSS.) With each new release of html new features are added which are not
supported by older browsers. By sticking with an older release of html, web authors
assure themselves of more accessibility by a larger number of surfers.
Some authors prefer to stay on the cutting edge of what is happening in the html world.
These designers insist that their users keep up with them by requiring the latest browser
and the latest and greatest plug-ins (little programs that extend the browser‟s capabilities
such as Flash and Shockwave). The risk in adopting this strategy is that many users may
not be able to see your content as it was designed. The advantage is that you will be able
to create wiz-bang sites that really sizzle. As a web master, you will have to decide which
is more important to you. And in fact, if you are the web master for a company someone
else may be making that decision for you.
Browser Specific Coding
How many times have you visited a site that has a disclaimer on it that says something
like “This site is best viewed in Internet Explorer 4.0”? The authors of that web site have
decided that they are going to use browser specific coding, forgoing the challenge and
extra work required to code for multiple browsers. There use to be websites out there that
kept track of what was know as the browser wars, how many people were using IE, how
many were using Netscape, and how many were using other browsers such as Opera.
Well, the war is over and Internet Explorer won. That is why many designers are opting
for browser specific coding.
Solving the Browser Dilemma
There is no easy solution to this problem and which ever strategy you choose to adopt,
you will discover that there are pitfalls and shortcomings. Some can double or triple your
work load. Others may limit the number of people who can view you page as you created
it, still other may limit the creative talent of your web mastering team. So, choose a
strategy wisely, with full knowledge of the consequences, and start creating.
If you are designing for an audience that has physical challenges, keep their consideration
in mind. You can find out more about this audience at the W3C accessibility initiative
page, www.w3.org/wai and/or you can check you pages for ease of accessibility to
physically challenged people by using Bobby. It is a pretty cool tool if you need or want
to create pages that conform to the W3C‟s accessibility guidelines. Check it out.
Slide 4 – Screen Resolutions
One of the major challenges and sources of consternation for a web master is that
you can never really know how users view you work because you don‟t know
many things about the tools they will be using to view it. That is the case with
browsers and it is also the case with screen resolution. The resolution of a monitor
is the horizontal and vertical height and width of the computer screen measured in
The challenge for the web master is that there are lots of different resolutions in
common use out there. Here are three of the most common ones. If you create you
site for 1024 x 768 and I view you site a 640 x 480 I will have to do a lot of
horizontal scrolling back and forth just to read the content of your page. Not a
good thing. Vertical scrolling is accepted as a norm, horizontal scrolling is not.
On the other hand, if you create you page to look just right at 640 x 480 and I am
looking at it with a 1024 x 768 resolution, the results that I see may not be what
you intended. So what is a person to do? Again, you have choices to make.
You can decide that your site will be created as a Fixed Resolution Design. As we
look at the sample here, notice that as the resolution increases, the area on the
canvas that is used decreases. Also notice that on the 640 x 480 view, the user will
have the use the horizontal scroll bar to read the page.
The other option is to create a Flexible Resolution Design. The examples will
show the same page in four different resolutions. Notice that no matter how large
or small the resolution, the information on the page adjusts to the resolution and
the reader can still see all of it, at least on the horizontal plane.
As a designer you have to decide how to handle this issue. Some prefer to create their
pages for the lowest common denominator while others prefer to push the limits and
create for higher resolutions. There is no wrong or right here, only preference.
Slide 5 – 11 Samples
Slide 12 – Bandwidth Concerns
Another important issue that you must take into consideration when you are creating a
website is the connection speed of the people who will be visiting your site. Most people
still connect using an ISP and still connect at only 45K – 52K. That means that if your
page is loaded with graphics or sounds or flashy flash applications, it will take them a
long time to download and open your page.
A good rule of thumb is to create pages that will never take longer than 20 seconds to
download. The biggest single factor that influences the speed at which your pages
download is the number and size of the graphics on the page. As a rule, no single image
should be larger than 15K.
Now, if you are working in an environment in which you know that all your users have
faster access then you can design your pages to match their access time. That is the
situation that I have with my chris.esc2.net site. I know that most of the people who need
to access my resources are going to be able to access them from a T-1 connection so I
don‟t give this issue too much thought. However, when I am doing web work for
someone else, this is always an issue.
Slide 13 – Design for the Medium
Always keep in mind that you are not creating these pages for a printer, but rather, for a
monitor. That will drive many of the decision that you will make regarding page layout,
fonts, and colors. Always remember that this medium is hypertext, not linear text so it is
important to weave appropriate links and associations into your information. Give the
users options to follow the information path that they desire by providing appropriate
links to related topics. Always make your users feel comfortable by letting them know
where they are and where they can go.
As a web master it is your job to craft the look and feel of the site. The look and
feel is the interface that the user must navigate when the come to your site. They
will look and feel as they use your site and explore your information. The read
texts, make associations with links, view graphics, and if you have done a good
job of utilizing the power of hypertext, create their own path through your
information. Reliable, easy to understand, interpret, and follow navigation is one
of the primary things that will make your users feel comfortable and at ease when
they visit your site. Keep that in mind.
We‟ve already addressed this issue so I will just mention that most people will tell
you that for your site to be considered successful it must be portable and
accessible across different browsers, operating systems, and computer platforms.
Again, another re-iteration. www.burpee.com is an example of a page that uses a
lot of graphics. Front Page tells us that using a 56K modem it will take 57 seconds
to open this page. You have to be a pretty dedicated gardener and surfer to wait
that long for a page to open. Even at ISDN speeds it will take 23 seconds to open.
That is too long. It seems that they have created this page with users in mind who
have a fast (cable or DSL) connection. Do they think that those are the only
people who garden?
The single most important factor in determining the success of your site is your
“information design,” the presentation and organization of your information. Your
graphics and navigation options must present a variety of options to the user
without detracting from their quest for information. A visitor to your site may
choose to browse randomly or look for specific information. Often users arrive at
a page looking for information included low in the hierarchy of information.
Sometime they are looking for a specific piece of information like a phone
number. You should anticipate and plan for the actions and paths that users may
choose when they traverse your site. Provide links to the areas of your site that
you feel will be most in demand.
One of the things that I like to do when I am working for a client over a long
period of time is analyze where people are actually visiting their site. What pages
seem to get the most action? Then, when I have figured that out, I will create a
new navigation structure that includes those commonly visited pages and maybe
one or two others that I want to draw users‟ attention to.
You should present your information so it is easy to read. Many sites fail this
criterion by using too many fonts, colors and lengthy passages of text. Break text
into reasonable segments that make for easier on-screen reading. People tend to
scan more and read less when they are online than they do when they have print
media. Include plenty of headings to accommodate that habit. There is a “seven-
plus-or-minus-two” rule of comprehension. Basically, if you have a 25 step
procedure to give your users, break it up into 3 or 4 pages of steps.
Another basic rule of thumb is that no single page should be more than three
screens full of information. You don‟t want your users to have to scroll endlessly
on your page to find what they are looking for. Remember, this is a hypertext
medium, not a linear text medium. Make use of hypertext in all your documents.
Slide 14 – Design the Whole Site
When you begin designing a site, plan the unifying themes and structures that will
hold the pages together. Your choices of colors, fonts, graphics, and page layout
should communicate a visual them to the user that orients them to your site‟s
content. The theme should reflect the impression that you want to convey.
You can find a real good example at NASA‟s website. Here is what we will call
NASA for Grownups. It looks very scientific and official and business-like. The
use of subdued colors, familiar, business-oriented fonts, and structured, linear
columns underscore the content and emphasize the scientific theme.
Here is NASA for KIDS. Quite different, isn‟t it. The use of colors, “friendly
fonts,” simple appealing graphics, animations galore says “come on in and we
will have some fun!!!!” Two completely different presentations of look and feel.
Smooth, unifying transitions from one page to another or from one section of your
site to another is another issue that you want to address. Repeating colors and
fonts, using a similar page layout, repeating identifying elements, placing
navigation tools in the same place on all the pages, avoiding random, jarring
changes in your format, all these things create a consistency that reassures your
users that they are traveling within the boundaries of your site, and helps them
find the information that they came to your site to find.
How would you like reading a book that had the page number in a different
location on every page? Or what if every page had a different font or a different
background color? That would make for an unpleasant and probably difficult
experience, wouldn‟t it? It‟s the same with a web site.
Use a grid to provide visual structure to your pages. The structure of a web page
is imposed by the grid or page template you choose for your page design. The
grid is a conceptual layout device that organizes the page into columns and rows.
You can use a grid to provide consistency and enforce structure throughout your
site, but you can also break out of the grid to provide variety and highlight
important ideas and information.
One very important concept that you need to be familiar with in designing web
page is the concept of white space. White spaces are the blank areas of a page.
Use white space deliberately in your design, rather than as an afterthought. Good
use of white space guides the reader and defines the area of your page. White
space that is used deliberately is call active white space. Active white space is an
integral part of your design that structures and separates content. Passive white
spaces are blank area that border the screen or are the result of mismatched
The next two slides show some examples of pages whose content can become
“lost in the shuffle” because the designers didn‟t use enough white space. The
pages have a cluttered feel. The lack of active white space creates the impression
that a page contains too much information, and it is difficult to find the piece of
information that you want.
By way of contrast check out Adobe‟s web site and the National Gallery of Art‟s
web site at www.adobe.com and www.nga.org. Take note of all the active white
space on both of these pages (note that white space doesn‟t need to be white).
Notice how it draws you attention to the most important elements on the pages
which are located in the center section of the canvas. Slide 17 shows how Adobe
designed this page using nested tables.
Slides 15 – 17 are examples
Slide 18 – Designing for the User
Keep your design efforts centered solely on your users. Knowing your audience answers
almost all design questions. If it servers the audience, keep it; if it is potentially
distracting or annoying, eliminate it.
Design for Interaction – Think about how the user wants to interact with the
information on your web page. Decide if the user will read or scan your pages and
then design your pages to accommodate either reading or scanning. If you want to
design a page for scanning, a page of links, for example, you would want to
organize your page using meaningful column headings, linked text, and short
descriptions. Organize links into related topic groups and separate grouping with
white space, graphics, or background color. If, on the other hand, your page is an
article that requires large blocks of text, your user should expect and be
accustomed to interacting with pages like that by scrolling and clicking
hyperlinks. The links might be in the main body of the article or they may be in a
side bar. Keep the paragraphs short. Make reading easier by using a text column
that is narrower that the width of the screen. Keep you text legible by providing
enough contrast between the foreground and the background colors. Provide links
that allow users to jump quickly to related content.
Design for Location – It is impossible to predict a user‟s exact viewing path on
your page, which part of the page his eyes will be drawn to first, second, and so
on. There is, however, some general agreement on the relative areas of screen
importance, as the next slide illustrates. This slide depicts the section of screen
real estate ranked in order of importance. During page design, rank the
information that you are going to put on the page and then position the most
important information in the middle of the window, the next most important
across the top and so on, with the least important or static information in the left
Guide the User’s Eye – Users can and will traverse your pages in a variety of
ways. As a function of normal reading habits, the user‟s eyes may move from left
to right and back again.(Click mouse for animation) Or, researchers tell us that
users eyes might sweep over the page. Knowing these common user habits can
help you decide where to focus the user‟s attention by object placement, text
weight, and color use. Think about your grid structure and how you want to break
out of it o attract attention. Use text weight and size to communicate relative
importance of information. Break sections up with ruled lines or active white
space. Use shapes and color to reinforce location or topic. Get to know your users,
and consider the two sample viewing methods shown here as you experiment with
placing content on your web pages.
Keep a Flat Hierarchy – Don‟t make users navigate through endless layers of
pages to find the piece of information that they are looking for. Structure you site
to include sections or topic level navigation pages so users quickly find their path.
A good rule of thumb to try to follow is never make users click more than three
times to find what they are looking for. That is not always possible, but it is a
good goal to strive for. Another thing you can do to make you site easy to
navigate is provide some kind of graphical site map that shows your user the
structure of you site and where your content is located and how it is related to the
rest of the site. A great tool for doing this kind of thing would be Inspiration. You
can create the graphic is Inspiration, convert it to a web friendly format, and even
make it an image map.
Use the Power of Hypertext Linking – Unlike paper-based authors, as a
hypertext author you have the luxury of adding clickable links where necessary to
guide users through your information. Readers browsing through magazines can
flip to any page in any order they desire. You can replicate this nonlinear reading
method on your web site with links that let users move from page to page or
section to section… and you should!! This is one of the features that makes
putting information on the web unique. You should really think this feature
through and utilize its power.
Resist Overload – There is a great temptation to put lots and lots of “stuff” on
your pages. Don‟t overload your users with too much information. But do give
them enough clues to let them find the content they want, and link, link, link.
(How would you provide those clues? Headings, active white space, horizontal
lines, colors, fonts, etc)
Slide 20 – Design for the Screen
The computer display is very different from print-based media. You MUST take the
following differences into account when planning your site.
The Shape of the Screen – Most paper-based media are portrait oriented. A
computer screen is landscape oriented. Your page design should reflect the space
within which it will be displayed and read.
While a piece of paper reflects light, a computer screen has light passing through
it from behind. This changes the nature of the colors and contrasts you choose to
employ and that is why contrast between foreground and background is so vitally
Computer screens use a much lower resolution than the printed page. Graphics
and text that would look fine on a laser printer at 600 dpi are coarse and grainy at
72 dpi, the typical resolution for computer monitor. Because of the screen
graininess, italic text is especially hard to read in paragraph format.
It is usually not a good idea to take documents that are formatted for print and
post them online without considering the destination medium. In most cases, a
document that is perfectly legible on paper is hard to negotiate online. The text
length, font, and content length will not transfer successfully to the computer
Slide 21 – Planning the Site
When it comes time to begin your work, don‟t be tempted to run straight to the computer
and start creating pages. If you take this approach you will end up with a hodgepodge of
pages and a site that isn‟t user friendly, doesn‟t do the things you want it to do, and in
general, becomes a big “time pit” (as in “money pit” only with time). Instead of that
approach, what you want to do is what you do with any good lesson, plan it. Pick up a
paper and pencil and sketch out your site. Use Inspiration to brainstorm with your design
team. Get you framework set up before you ever create a page.
Slide 22 – Identify Your Content Goal
Examine closely what type of site you want to design. Your objectives and your user‟s
objectives, what you want the web site to accomplish and what your users want from
your site, may differ. You may care about having a whiz-bang site full of quality graphics
and flashy animations. Your users probably car more about how quickly they can find
information. The bottom line is that you should adopt your users‟ perspective.
Think about the type of content that you want to present and then look to the web for
examples of how best to present it. Here are some samples of different types of content
presentation that you can choose from.
Billboard – These sites establish a web presence for a business or a commercial
venture. They are often informational and offer no true web-based content, acting
only as an online brochure rather than offering web-based interaction.
Publishing – Newspapers and periodicals use this type of site. If you want to
create a site like this, there are plenty of samples on the web to use as models. Our
own www.caller.com is an award winning site that you can take a look at as a
good example of this type of site.
Special Interest, Public Interest – These sites include news and current
information for volunteers, devotees, novices, a specific audience, or the general
Virtual Gallery – These are web sites that are maintained by photographers,
artist, musicians, and writers
E-commerce – Online shopping. „Nuf said.
Product Support – Manufacturers disseminate information, upgrades,
troubleshooting advice, documentation, and online tutorials.
Intranet or Extranet – An Internet site for your building or for a company that
has more than one site.
Slide 23 – Build Your Team
Yes a website can be done by one person but as the site gets larger and larger, or if you
start off to build a large site like a school district would need, you will be far better off if
you will put together a team to whom you can delegate the various responsibilities and
assignments. Here are some examples of the types of talent that you will need to build a
large, well-designed site.
Server Administrator – Get to know this person. You will need his/her expertise
when it comes to setting up and maintaining the server on which you will run
your web. There are a plethora of issues related to publishing and maintaining a
web that have to be dealt with on the server. Don‟t make these people mad.
Coders – These are the folks who will actually create the content, either using an
editor such as Front Page or coding HTML “by hand.”
Designers – These are the graphic artist responsible for the look of the site. They
will use programs like Photoshop and Illustrator to create the graphics that you
will use on your site. They can also lend a hand in creating you page template
designs, navigation icons, color schemes, and logos.
Writers and Information Designers – These are the folks who make the
information on your web readable and easy to understand. They are responsible
for consistency, grammar, spelling, and tone.
Others – You might also nee software programmers who write CGI scripts, Java
Scripts, DHTML programs and ASP scripts. These are the kinds of things that
create interaction on your site. You might also need a database administrator and
a marketing specialist.
Slide 24 – Diagram the Site
Plan your site by creating a flowchart that shows the structure and the logic behind the
content presentation and navigation choices you offer. You can sketch out your ideas
using a paper and pencil or you can use software such as Inspiration to do the job. Just be
sure that you do it. It is important.
What you are after here is creating the information structure of your site. This becomes
sort of the blue prints for the information as opposed to the blue prints for the layout.
Think about the information needs of your users and how they can best access the content
of your site. Consider what your information design map should look like. I am going to
show you some examples. You can use these ideas as starting points for your own
Linear Structure – If you want your users to follow a predefined path, this is the
type of structure that you want to consider. Once into the content users can
navigate backward or forwards within the content path. Each page should contain
a link back to the previous page and forward to the next page. If you need to
include a subtopic, link to it and only allow users to link back to the page on the
main path that they just left.
Tutorial Structure – This type of structure is perfect for the computer-based
training content such as lessons, tutorials, or task-oriented procedures. The uses
progress through the concept, lesson, and review in a linear manner. Users can
choose the order in which they take the lessons, but once the decision has been
made, they follow your predetermined path. It is sort of like a multi-legged linear
Web Structure – If you site is going to relatively small, a web structure might be
what you want. In a web structure every page has links to and from every other
page. This allows users to jump freely to any page from any other page. If you
choose this type of structure make sure to include on each page clear location
information and a standardized navigation bar that not only tells the users where
they are, but where they can go.
The Hierarchical Structure – This is probably the most common information
design. It lends itself to larger content collections because the section pages break
up and organize the content at different levels throughout the site. Navigation is
primarily linear within each section. Users can scan the content on the section
page and then choose the content page of their choice.
Cluster Structure – This is similar to the hierarchical structure, except that every
topic area is an island of information unto itself, with all pages in each cluster
linked to each other. This structure encourages exploration within a topic area,
allowing the user to navigate freely through the content. All pages contain a
navigation bar with links to the section pages, main page, and site map.
Catalog Structure – The catalog structure accommodates electronic shopping.
The user can browse or search for items and view specific information about each
product on the item page. Users can add items to the shopping cart as they shop.
When they are finished, they can review the items in their shopping cart, and then
proceed to checkout, where they can enter credit card information and finalize the
Slide 25 – Page Templates
Creating and using page templates is an important part of planning and designing any
web site. You can use templates to “enforce” a consistent design across your entire site.
Then, on the occasions that you have a good reason for breaking out of the template
design, you can create a page that really stands out. By creating and using templates you
gain more control over how you content displays in the browser, while building more
visually interesting pages.
If you are using Front Page or some other HTML editor, you can choose one of the built-
in templates that comes with the program. Front Page has several that you may find
useful. However, if you want to create something that is new and different, not the same
as everyone else is doing, you can create your own templates using tables. By using
tables you can gain a great deal of control over where the content can be placed on your
Slide 26 – Template Examples
Two-Column Template – Here is a basic two-column template. The left cell is
for navigation, the right cell for content. This template is good for lengthier text
content. You can adjust the width of the right cell to constrain the text width.
Two-Column with Banner – You can use the banner on this template for logos,
navigation graphics, or banner adds.
Three Column Template – Use this template to contain plain text or a variety of
Three Column with Banner Template – This layout works well as a top-level
page of a section or an entire web site. The columnar structure lends itself to
scanning rather than reading.
Three Column Main Template – This template, with a dominant center column,
attracts user‟s eyes to the center section. It is an effective top-level or section –
level page of a web site.
Three Column Sectioned Template – This template shows the content area of
the page divided into four areas. Use this template when you want to provide the
users a choice between a variety of topics or sections. You can place navigation
information in the left column. You would probably use the template as a top
Three Column Main Sectioned Template – In this template the center column is
divided into two content areas. Another variety of a top-level page, this one lets
you break up the primary area of the screen into two sections. Left and right
columns can be used for navigation or associated links.
Slide 27 – Navigating Your Site
We have mentioned navigation and the navigation structure and navigation bar and
navigation links all throughout this presentation. I hope that you are beginning to get the
idea that navigation is important. It is!!
Slide 28 – Effective Navigation
If your site is going to have a user friendly navigation structure, you must provide cues to
the user‟s location, not only links to other pages in the web site. You should give them
enough information to answer these questions. You should let users know their current
page they are on and what type of content they are viewing. Let users know where they
are in relation to the rest of the site. Provide consistent, easy-to-understand links. Provide
alternatives to the browser‟s back button that lets users return to their starting point.
Slide 29 – Limiting Information Overload
You will often see sites that simply overload even the savviest of users with pages that
scroll on and on or an array of links and buttons that frustrate and even overwhelm the
users. Avoid that situation by employing these techniques.
Break you content into smaller files and then link them together. Provide logical
groupings of choices.
Again, the same idea. Don‟t make users scroll through never-ending pages.
Provide plenty of internal links to help users get around or use short pages. The
rule of thumb is no more than three screens full of information.
Provide contextual linking to related concepts, facts, or definitions, letting the
users make the choices they want.
Always keep your users point of view in mind. Think about where users want to go
within your site and then make it easy to get there. Add plenty of links to make all areas
of you site quickly accessible to your users. Use location cues to let users know where
Slide 30 – Web Typography
Type creates a strong recurring theme throughout a well-designed web site. It is a flexible
medium that can express emotion, tone, and structure based on the type choices that you
make. You can also go overboard by using too many faces and sizes, ending up with a
ransom note look characteristics of the early days of page layout programs. Let‟s take a
look at the principles that should govern your choices of fonts when you are designing
your web site.
Choose Fewer Fonts and Sizes – Your pages will look cleaner when you choose
fewer fonts and sizes of type. Decide on a font for each different level of topic
importance, such as page headings, section headings, and body text. Them,
communicate the hierarch of information with changes n size, weight, or color of
Pick a few sizes and weights in a type family. For example, you might choose
three sizes, such as 24 point for headings, 18 point for subheadings, and 12 point
for body text. Then, consistently apply these settings throughout your site. Avoid
making random changes in your use of type conventions. Consistency develops a
strong visual identity on your pages and that is a good thing.
Use Available Fonts – Fonts often are a problem in HTML because font
information is client based. The user‟s web browser and operating system
determine how a font is displayed, or it it displayed at all. If you design your
pages using a font that your user does not have installed, the browser defaults to
Times on a Mac and Times New Roman on a PC. To make matters worse, even
the most widely available fonts appear in different sizes on different operating
systems. Unfortunately, the best you can do about this is to test on multiple
platforms to judge the affect on your pages.
The best that you can about this is to think in terms of font families, such as serif
and sans-serif typefaces, rather than specific styles. Because of the variable nature
of fonts installed on different computers, you can never be sure the user will see
the exact font you have specified. You can, however, specify font substitution
attributes. These attributes let you specify a variety of fonts within a font family,
such as the common sans-serif fonts, Arial or Helvetica.
Avoid Using Text As Graphics – If you absolutely must specify a font,
especially if it is a font that is not a real common one, create text as a graphic
using a program such as Photoshop. Using this technique does allow you to add a
drop shadow and other effects to your text. However, doing this creates either a
gif or jpg and will increase the download time for you page. So, don‟t do this too
Slide 31 – Color and Graphics
While you can add lots of graphics and lots of colors and they can make your site both
attractive and popular, these two features can also be the undoing of your site. You must
use graphics wisely, Balance the mixture of images and text, and use the image
capabilities of HTML to suit your user‟s need. The incorrect use of color can create
unreadable text or navigation confusion for the user. Use color to guide the reader, not
Slide 32 – Computer Color Basics
Before you begin to create or gather graphics for you web site you need a basic
understanding of how color works on computer monitors. You monitor displays a color
by mixing the three basic colors of light: red, green, and blue. Each of these three basic
colors is called a color channel. Your monitor can express a range of intensity for each
color channel, from 0 (the absence of color) to 255 (full intensity of color). Colors vary
widely from one monitor to the next, based on both the user‟s preferences and brand of
equipment. Here are some terms and concepts that you need to be familiar with.
Color Depth – The amount of data used to create color on a display is called the
color depth. If you monitor can display 8 bits of data in each of the 3 color
channels, it has a 24-bit color depth (8 x 3 = 24).24-bit images can contain almost
17 million (2^24) different colors and are called true color images. Both JPG and
PNG support 24-bit color. If you users have a 24-bit color display, they can
appreciate the full color depth of your images. But some monitors can‟t display
24-bit images. Some have only 16-bit color depth (called high color, 2^16 =
16,536 colors) and some have only 8-bit color depth (2^8 = 256 colors). If you
monitor does not display the full color depth of an image, the browser must resort
to mixing colors that attempt to match the original colors in the image.
Dithering – The browser must mix its own colors when you display a 24-bit
image on an 8-bit monitor, or in a file format that does not support 24-bit color.
Since the 8-bit monitor has fewer colors to work with (256 to be exact), the
browser must try; to approximate the missing colors by creating colors from the
ones the browser already has. This type of color mixing is called dithering.
Dithering occurs when the browser encounters a color that it does not support,
such as when you try to turn a 24-bit photographic image into an 8-bit, 256 color
image. Dithered images often appear grainy and pixilated. The dithering will be
most apparent in gradations, feathered edges, or shadows. Here is an example of a
graphic that was created for 24 bit color in 24 bit and then in 8 bit color. Notice
Non Dithering Graphics – One way to control the dithering process is to create
images that use non-dithering colors. The 216 non-dithering colors that are shared
by PC‟s and Macs are called web safe colors or the web color palette or browser
safe colors. If you use these colors you will not run into dithering problems.
Slide 32 – File Format Basics
At the present time you only have three choices for image files on the web, GIF, JPG, and
GIF – The color depth of the GIF format is 8-bit, allowing a palette of no more
than 256 colors. It excels at compressing and displaying flat color areas, making it
the logical choice for line art and color graphics. Because of its limited color
depth, GIF is not the best file format for photographs or more complex graphics
that have gradation of color, such as shadows and feathering.
GIF Transparency – With GIF files you can choose one color in an image to
appear as transparent in the browser. The background color or pattern will show
through the areas that you have designated as transparent. Using transparent areas
allows you to create graphics that appear to have an irregular outside shape, rather
than being bounded by a rectangle.
GIF Animation – The GIF format lets you store multiple images and timing
information about the image in a single file. This means that you can build
animations consisting of multiple static images that play continuously, creating
the illusion of motion.
Use restraint when adding animated GIFs, such as blinking icons and scrolling
banners, to your pages. Users may find them annoying because they are repetitive
and distract from the page content. Consider choosing to play an animation only a
certain number of times rather than letting them loop endlessly.
JPG – The Joint Photographic Experts Group format is best for photographs
or continuous tone images. JPGs are 24-bit images that allow millions of colors.
Unlike GIFs, JPGs don‟t use a palette to display color.
PNG – The Portable Network Graphics format is designed specially for the web.
It has been available since 1995 but has been slow to gain popularity because of
its lack of browser support. It is intended to replace the GIF format and does a
better job of compressing files than GIF does, resulting in a smaller file size and
faster download with no loss of quality. It supports transparency and interlacing,
but not animation.
Interlacing and Progressive Display – Most web-capable graphics editors let
you save images in an interlaced or progressive format. You can choose this
display option when creating GIF, PNG, and JPG files. GIF and PNG files use an
interlacing format, while JPG files use a progressive format. Interlacing and
progressive formats generally are the same thing, the gradual display of a graphic
in a series of passes as the data arrives in the browser. Each additional pass of
data creates a clearer view of the image until the complete image is displayed.
The only real advantage to displaying graphics in both methods is that users see a
blurred view of the complete image, giving them something to look at while
waiting for the entire graphic to download. The disadvantage of choosing the
display method is that older browsers may not display the graphic properly, and
more processing power is need on the user‟s machine to render the image.
Slide 34 – Where to Find Graphics
There are lots of sources for graphics to use on your web site. Here are just a few
Slide 35 – Choosing the Right Format
Basically, you should use GIFs whenever you can. Use this format for all types of simple
colored graphics and line art. Use animation capabilities sparingly.
The JPG format should be used for all the full-color photographs images, as well as more
complicated graphics that contain color gradient, shadows, and feathering.
If your browsers support PNG, use it as a substitute for a GIF.
Slide 36 – Background Images
Any image can be used as a background graphic, though many are not appropriate for the
task. In too many web sites, complicated background graphics distract the user. If you
site includes a lot of text, avoid dark or complex backgrounds. Most text does not read
well against a background image unless the image is light enough to provide a good
contrast for the text. Changing the text color to create light text on a dark background
sometimes improves legibility by heightening contrast.
Instead of using a dark, busy image to tile a page background, choose a light, simple
image. The web provides many images that you can use to create seamless backgrounds
that don‟t interfere with you text. Use background images creatively to provide an
identifying theme for you site, to frame your content at different screen resolutions, or to
provide a light, textured background. A common technique is to use a thing ribbon
graphic that will not repeat within the browser window at even the highest screen
resolution. This means creating a graphic that is longer than 1024 pixels (the highest
common screen resolution is 1024 x 768 pixels).