Objectives
This weeks objectives are to:
Why do people create websites?
According to Vincent Flanders and Michael Willis, authors of "Web Pages That Suck", people design web pages for 3 reasons:
It is important to understand why you are developing your website so that you can create a site that is appropriate. If you are trying to sell arthritis cream, then putting rock-n-roll music and a lot of bright colors on your page may not be appropriate. Correspondingly, if you are creating a site to sell clothing to teens, then it might be. If you are marketing to a particular culture, then you should be aware of their customs before you design you webpage. For example, many Asian cultures view red as a color of celebration. This is important to know if you are marketing to an Asian community.
If your site is about spending money, make sure you keep your current customers AND attract new ones. Always remember that if you are creating a site designed to make money, subtly give your visitors the opportunity to spend. Be careful about telling people to "give me money" in such a bold manner. It may turn them off.
If your site is designed to disseminate information, you will want your site to be attractive and easy to navigate so that people will stay to get all of the information you wish to convey. Organization is everything here. If the visitor to your site can't find what they are looking for, they will go elsewhere. Even for those of you in this course, if you can't find what you are looking for, you will go to other books, or worse other schools, to get that information. Unless your site is about art, the images you add should not be the most important thing about your page. Informational sites should be about the information, not about art or ego.
If your site is not about disseminating information or making money, then it is probably an ego site. If you are creating a site that is just for yourself, than you can do just about anything you want. Keep in mind that anybody can stumble upon your site and your site is an extension of you. It will give people the basis to form an opinion about you. Make sure you create the impression you intended.
Fundamental Design Principle - Organization
The main thing you need to know is that "less is more". Regardless of the reason you are creating a web page (except for a couple of assignments here where the pages only purpose is to see if you understand certain tags) do not try to cram everything into one page. When you go to create your website, you should sketch out the site before you begin coding.
Put the most important items you need to convey to visitors of your site on the homepage, with links to important topics and subtopics. Try not to put everything on one page. That will only clutter the page. Unless you are designing something like lecture notes, if your information takes up more than one or two pages, then break up the page into multiple pages, with links to those pages.
Fundamental Design Principle - Using Images Appropriately
Make sure your pages have an aesthetic look. Images will make your site come alive, but make sure the images are nice. When designing a website for industry, I would suggest using a graphic designer to create tasteful pictures. Since we don't have access to a graphic designer, we will work with clip-art. There is a lot of nice clip-art out there. I would caution you about using animated gif's. One is fine, more than one is annoying.
Avoid using a lot of graphics. They increase download speed and can annoy users. How much is too much? The general guideline is 35K per page. When using images, remember to include a written description. People who have images turned off in there browsers, or people who are using special software because they are visually impaired. Also include the HEIGHT and WIDTH attributes. This will enable the browser to reserve the necessary space for the image, while downloading the text portion of the page.
Fundamental Design Principle - Navigation
Always provide good navigational tools. Navigational tools can take on three different forms, images(buttons or maps), text, or frames. You will notice that this course is placed inside a frame, with the navigation on the left side of your screen. No matter where you are in the course, you can always get to any other place in the course at any time.
The figure below is from the bottom of the CCBC homepage www.ccbc.cc.md.us. Notice that the author of the webpage uses text as a means of connecting to the various pages of interest.
Because you can never be sure exactly how a visitor got to your website, good navigational tools should be provided on every page, whether is is through a frameset, text, or images.
Fundamental Design Principle - The War of the Browsers
As you read through the lecture notes and visit various websites, you will see that some tags are Netscape specific and others that are Internet Explorer specific. Although we will go into some of these tags in some detail, my advice is to not use them. Since Netscape and Explorer combine for the overwhelming majority of browsers on the market, as long as you make sure your pages are visible in both of them, your pages will be visible to the majority of people on the web.
If you want to
test the compatibility of your web pages you may want to visit http://www.delorie.com/web/wpbcv.html.
Fundamental Design Principle - Beware of Link Rot
The web is a constantly changing place. Although this make is an exciting place to get current, up-to-date information, for web developers it also means extra work. It is important to make sure that the links you place in your web pages have not expired. Periodically go through your website and check for expired links. If you find one, either delete it or replace it with the current URL of the site you want to visit.
Accessibility Issues
Not everybody can view the web in the same way. For example, people who are visually impaired cannot see images or work with image maps. People with arthritis or who are paralyzed may not be able to use a keyboard or mouse. Not everybody speaks English as their native language. Others may have a learning disability which makes reading or comprehending text difficult. That doesn't have to mean that they cannot access your web page. There are many simple things we can do, which follow good design principles, that will make our web pages more accessible to all people. Below is an outline of the guidelines for making web pages generally accessible developed by the World Wide Web Consortium. Visit their website http://www.w3.org/TR/WAI-WEBCONTENT/ for further details.
Guideline 1. Provide equivalent alternatives to auditory and visual content.
"Provide content that, when presented to the user, conveys essentially the same
function or purpose as auditory or
visual content."
It is important to realize that not everybody is capable of viewing images in the same way. People who are blind or visually impaired may need a voice synthesizer to read the page to them. Others may have the pages translated into Braille for them to read. It is important to provide a good description of the image in text format. This can be done using the ALT attribute to the image tag. This will be discussed in more detail during week 6, but a quick example given on this page. If you place your mouse over the globe icon, the word "globe" will appear. It is a brief, concise description of the icon. It was simple to put in AND it makes the page more accessible. Avoiding changing the font style (using the FONT tag) is another way your pages can be made more accessible to everyone. Remember, not everybody has, or even wants, the latest and greatest fonts on their machines. If you have access to video equipment, having a video version of your web page that is interpreted in sign language is another idea.
NOTE: We don't have access to video equipment, but we can easily put in the ALT attribute to an IMAGE tag and avoid changing fonts using the FONT tag. We can play with the tags, but I expect your web assignments to take reasonable care in complying with these issues.
Make sure that the web pages you create can transformed gracefully into another format. Make sure you separate the structure of your presentation. Make sure you provide text equivalents as described above. Text can be translated into most browsing devices. If you are using video or audio, make sure you have an alternative version available in case a person is blind or deaf. Be careful not to create webpages that are dependent on a particular type of hardware (e.g. a mouse, monitor, etc.). People who visit your site may not have the hand coordination necessary to use a mouse. When using graphics, high end pictures are nice, but not everybody has the best monitor and/or video card on the market. If people cannot view your site, they will take there business elsewhere.
Guideline 2. Don't rely on color alone.
"Ensure that text and graphics are understandable when viewed without color."
Remember that not everybody sees things the same way that you do. For example,
people who are colorblind cannot differentiate between different colors. Many
colorblind people set the background color of there browser to yellow to make text easier
to read. If you are using a yellow font, your text will be lost. In general,
if the background color and foreground color are too close, monitors without high-end
graphics cards will have a difficult time displaying your pages.
Guideline 3. Use markup and style sheets and do so properly.
"Mark up documents with the proper structural elements. Control presentation with
style sheets rather than with
presentation elements and attributes."
Many web developers use headers to change font sizes or tables for organizing layout.
Formatting in this manner makes your pages difficult for people with specialized
software to interpret. We do not cover style sheets in this class, but we do discuss
some of the tags, like TABLE and the headings (<H1 ... H6>) and the CORRECT usage of
them. These guidelines are not telling web designers not to use these tags, but to
make sure you are using them for there intended purpose.
Guideline 4. Clarify natural language usage
"Use markup that facilitates pronunciation or interpretation of abbreviated or
foreign text."
If your website is going to use foreign words, make sure that has been identified (using
the LANG attribute in HTML). Remember, people who are using readers, either spoken
or brailled, to interpret your web page may not have the word defined using their
software. If you are using acronyms, make sure you spell out what the acronym stands
for when you first use it. In HTML, the TITLE tag has an attribute ABBR and ACRONYM
that can be used in the code. Also, expand out the acronym in the text as well.
Guideline 5. Create tables that transform gracefully.
"Ensure that tables have necessary markup to be transformed by accessible browsers
and other user agents."
Tables should be used for data that needs to be displayed in a tabular form. They
are not supposed to be used for page design or layout. For example, if you want text
within a table to appear bold, use the STRONG tag, not the TH tag. People that are
using screen readers may also have problems navigating between cells unless the tables are
marked up correctly. Make sure you have clearly identified rows and columns.
Use the TD tag to identify data in each cell and the TH tag to identify headers.
Guideline 6. Ensure that pages featuring new technologies transform gracefully.
"Ensure that pages are accessible even when newer technologies are not supported or
are turned off."
Again, the guidelines are not saying to avoid using the newest technology, just to use it
with caution. Remember that not everybody has the latest technology. Make sure
you have an alternate form for you website available to people working with older browsers
or with older software. For example, when we begin the JavaScript portion of the
course, remember to use the alternate NOSCRIPT tag to make sure a person who does not have
a browser capable of handling JavaScript can still access the page. When we are
discussing frames, make sure you use the NOFRAME tags to give people at least an
alternative message if there browser does not support frames.
Guideline 7. Ensure user control of time-sensitive content changes.
"Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be
paused or stopped."
Some people have problems reading moving text. Others just find it annoying.
Either way, moving text can be a distraction to the entire page and therefor make the page
unreadable. Screen readers are not capable to read moving text. If you are
going to use blinking or scrolling text. make sure that the text is stopped, at least
periodically, so that all visitors to your site can read it. Be careful of using
auto-updating pages using the HTTP-EQUIV=refresh" attribute, discussed during week
2's lecture, for any critical information. It is acceptable to use it for a
"splash page", but remember that people visiting your site do not have the
ability to pause the page if they cannot interpret it in time.
Also note that people with photosensitive epilepsy can "have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights).
The W3C HTML does specify that the BLINK and MARQUEE elements are not defined within
their specifications and should not be used. A PS from the author of this course,
they are also highly annoying and generally frowned upon by web developers.
Guideline 8. Ensure direct accessibility of embedded user interfaces.
"Ensure that the user interface follows principles of accessible design:
device-independent access to functionality,
keyboard operability, self-voicing, etc."
When using such features as Java, JavaScript, etc., make sure you have an equivalent
version available for people who do not have these features available.
Guideline 9. Design for device-independence.
"Use features that enable activation of page elements via a variety of input
devices."
Remember that not everybody who uses a computer inputs data via a keyboard or mouse.
Everybody does not receive output via a monitor. In general, pages that allow
for input via a keyboard can be accessed through speech input. If you are using an
image map with non-geometric shapes, client-side maps.
Guideline 10. Use interim solutions.
"Use interim accessibility solutions so that assistive technologies and older
browsers will operate correctly."
Be careful of creating web pages that spawn new web pages. For people who are
visually impaired, they will not see that a new page has been created. The result
can leave them disoriented. Another item you should be aware of is that older
browsers do not allow visitors to edit them. Be careful of using tables to display
data in columns like reading a newspaper. Assistive technology has a difficult time
interpreting the data.
Guideline 11. Use W3C technologies and guidelines.
"Use W3C technologies (according to specification) and follow accessibility
guidelines. Where it is not possible to
use a W3C technology, or doing so results in material that does not transform gracefully,
provide an alternative
version of the content that is accessible."
The current guidelines recommend HTML or Cascading Style Sheets. Other formats, like
PDF and Shockwave require plug-ins. These formats cannot be view using many types of
assistive technology. Attempts to convert these files to HTML are not always
graceful. Even when creating an equivalent version of the document, these new
versions are not necessarily updated as often as the original pages.
Guideline 12. Provide context and orientation information.
"Provide context and orientation information to help users understand complex pages
or elements."
If the relationship between the various pages in your website is difficult to understand,
people will go elsewhere. Simple things, such as providing navigation as defined
above, using consistent icons and giving each page or frame a title are simple ways of
making your pages easier to understand. Also, as stated above, if the page is too
long, break it up into smaller pages.
Guideline 13. Provide clear navigation mechanisms.
"Provide clear and consistent navigation mechanisms -- orientation information,
navigation bars, a site map, etc. --
to increase the likelihood that a person will find what they are looking for at a
site."
Although this is particularly important to people with cognitive disabilities, clear web
design is useful to all visitors of your site. When you are linking to a document,
tell people what will happen to them if they select the link. Although you should
keep the descriptions short, don't just say "Click Here." Remember,
sending people off into "The Twilight Zone" not only confuses them, it is just
plain rude. If you creating a complex site, like this course which consist of
several hundred pages, provide a page describing the layout of the site. Along these
lines, avoid ASCII art, like :-) for a smiley face. Software which is reading the
screen will not understand what that means.
Guideline 14. Ensure that documents are clear and simple.
"Ensure that documents are clear and simple so they may be more easily
understood."
For example, make consistent use of icons and use language that is easy for all to
understand. Remember that it is called the World Wide Web for a
reason. Anybody, anywhere in the world can be visiting your page. Although
they may have good comprehension of English, it may not be there first language.
They may not understand slang terms or reference. If I were to make a statement
about the "curse of the Bambino", unless you are a baseball fan, and
particularly a Boston Red Sox fan, you probably wouldn't know what I am talking about.
The point I am trying to convey would be missed on my audience (you).
It is also important that you make your content understandable and easy to navigate. The first piece of advice here is to make sure your language is clear and concise. Avoid using slang, or other terms that visitors may not understand. Many sites use image maps as part of a navigational bar. Although these are nice, blind people cannot see them. Again, provide text as an alternative. Visual hints such as scroll bars and frames are not always accessible to people who are using speech synthesis or Braille displays. Also very large tables, lists, menus, etc. may not be understandable to people whose browsers only display a small portion of the screen at a time. Clear navigation will help make your pages easier for all people to understand.
If you test your
webpage to see if it is compatible to software used by the visually impaired, you can go
to Bobby at http://www.cast.org/bobby/
Bobby's a website designed to help Web designers test out their pages to see if they are
accessible to people who are using software for the visually disabled. It will check
your tags to see if they are supported by various browsers.
The following
site was provided by Gretchen Willging of the Math/CMSC department.The link is a quick way
to check the accessibility of your own web pages by seeing how it would look in a text
only browser. The URL is http://www.delorie.com/web/lynxview.html
If you go to a search engine, you will find even more aids designed to help you make sure your webpages are compatible with the rest of the world. As with most things on the web, all you need to do is look.
Copyright Issues
When copyright laws were first enacted in 1976, they were designed to protect "tangible" forms of expressions. Examples include literary works, theater productions, music, art, even architectural works. Any original expression, which is in a tangible form, is eligible to receive copyright protection.
How does this affect what we see and use on the web? Images created in CorelDraw or PhotoShop or any other graphics package is protected as soon as it is save it to disk. Saving it to disk puts the work in tangible form. The same thing is true for a written webpage. Therefore many things you come in contact with on the web are eligible for copyright protection. This includes, but is not limited to, webpages, images, sound files, emails, information at news groups and computer programs. NOTE: Ideas, facts, titles, names, short phrases and blank forms are not copyright protected.
The moment you have saved your work in a tangible form (paper, disk, tape, etc.), the work is protected automatically. You might be asking why you should file for an official copyright if anything you have created is automatically protected. The answer is because it effects your ability to sue and the amount of money you can collect in damages. A person cannot sue for damages until their work is actually submitted to the Copyright Office. If the work is submitted within 3 months of creation, a person can collect money for statutory damages. If not, they can only collect for actual damages.
How do you know if a work is copyrighted? The four things you need to look for are:
1. The word "Copyright." Although the copyright symbol © is usually used for copyright identification, some older browsers will not recognize the symbol. Using the word copyright removes all doubt.
2. The copyright symbol ©, is the symbol used to identify a work as copyright protected. In fact, some foreign countries mandate the use of the symbol.
3. The year the work was published (or created).
4. The name of the person who owns the copyright. This may be the individual who created the work, or it may be the company that person works for.
5. A "reservation of rights." For protection in certain countries, a document must follow the requirements outlined in the Buenos Aires Convention.
For a terrific website on copyright information, you may want to go to the site used for this weeks lectures. The URL is http://www.benedict.com
© 2002
Written by: Donna Tupper