2/11/04
Constantly being Updated!

COSC 330

LEARNING MODULE II
FUNDAMENTALS OF WEB DESIGN

   This learning module is an introduction to the basic principles of Web page design as presented in  Part I of the textbook, Web Design In a Nutshell, by J Niederst.   In this part, she introduces some broad concepts that are characteristic of the Internet in general and the Web in particular. The following presentation parallels that of the first four chapters of Niederst, with summaries of their content, emphasis on their important principles and guidelines, and incorporations of complementary ideas from the designing of the Web pages in this course (including mistakes) as well as those of Roger Black, a prominent Web designer.

The Objectives of this learning module are to help the student:

1. learn the fundamental guidelines of Web page design
2. gain an appreciation for lack of absolutes in Web page design
3. to understand the variables that lead to different designs in different types of Web sites
4. to relate parts of the textbook, Niederst, to concepts reviewed in LM I.

The sequence of presentations in this learning module is as follows.  You can click on any link to jump directly to that section.

• INTRODUCTION
• 1. DESIGNING FOR A VARIETY OF BROWSERS
• 2. DESIGNING FOR A VARIETY OF DISPLAYS
• 3. WEB DESIGN PRINCIPLES
• 4. A BEGINNER'S GUIDE TO THE SERVER

    Web pages run the gamut of every type of human activity, from personal home pages to interfaces to government agencies, from small home-based Web businesses to portals for the worlds largest corporations.  Obviously, therefore, there is no one model for an ideal Web page, so Web design depends on the message.  In fact, Web design is more of an art than a science.   On the other hand, there probably are universal guidelines that apply to effective communication using Web pages and generic templates for particular kinds of Web pages like personal home pages, educational pages, commercial pages, etc.  However, because Web design is in its infancy, I doubt such guidelines and templates are very mature; we still have a lot to learn about Web design.  In this learning module we will use several sources to investigate basic features of Web design and use them as a basis the development of effective, creative, personal skills.

Roger Black, one of the foremost Magazine designers turned Web designers, in his Interview on ZDTV's Big Thinkers said his basic guideline (like mine) is "just KISS -- Keep It Simple Silly. (Unfortunately, this online video no longer available; I have a copy on VHS which I will show during a class period.) Although the Web is considered a new media form, the old rules for design still come in to play, according to Black... In his (controversial) book, Web Sites That Work, Black tells his readers that many Web designers have relied too heavily on a software interface for creating layouts. The result, he says, are home pages with so many buttons and drop-down menus the user gets turned off. "  ... Black's Ten Rules for Web Design (as published in zdtv.com) are:

1. Put content on every page.
2. The first color is white
3. the second is black,
4. the third red
5. Never letterspace lowercase
6. Never set a lot of text type in all caps.
7. A cover should be a poster
8. Use only one or two typefaces
9. Make everything, e.g. fonts and pictures, as big as possible.  (This, I think is questionable.  Bigger text and pictures means less content on the computer screen.  I this this depends on the purpose of the page.)
10. Get lumpy, i.e. change pace.   "Instead of boring stereotypes, provide some ups and downs, some lumps!"

(The following has been disabled; I'm looking for an alternative.) Brief explanations and justifications of these "rules" (I would call them "guidelines") is given at

His Ten Things Not to Do are:

1. Don't repurpose, i.e. don't dump valid media! Add value and customize for the Web.
2. Don't confuse the viewer.  Your site and its navigational tools and graphics needs to be consistently designed.
3. Don't confuse the viewer, part two. KISS and be clear.
4. Don't make oversize pages.  Design for 640-by-480-pixel monitors! (This, obviously, is transient; minimum constraints will improve!)
5. Don't design pages that require scrolling.  (I violate this "rule" in my LMs, but Roger is not referring Web pages designed for study, so I am not sure if he would believe this rule applies here.  If he does, I disagree!)
6. Don't use big, slow graphics
7. Don't use a lot of colors
8. Don't use blurry drop shadows.  (Personally, I can't agree; if I understand what he is referring to, I think they provide an appealing 3D effect on a page.)
9. Don't have a lot of text.  (Depends on the purpose of the page.  Obviously it can't apply to learning material!)
10. Don't use tiny type

(The following has been disabled; I'm looking for an alternative.) Brief explanations and justifications of these "rules" (I would call them "guidelines") is given at

Black's Do's and Don'ts probably apply to commercial sites, but I don't think anything is categorically true or false across all types of Web sites.  As a contrast, you  can consider my Design Decisions for developing my online learning material (a youthful but critically important field); I would like your feedback.

SAQ 1: Condense Black's ten rules and ten things not to do into two lists of DO'S and DON'TS using your own words.
TPQ 2:  (a) Rewrite Black's ten rules and ten things not to do as separate list's of "guidelines".  Separate them as DO'S and DON'TS and prioritize them according to YOUR opinion as to their importance.  (b) Delete those with which you you disagree.  (c) Insert in the prioritized lists guidelines that you think should be included. This exercise should help you think about Black's ideas and thus develop your own guidelines for Web design.
 

1. DESIGNING FOR A VARIETY OF BROWSERS (Niederst, Chapter I):

1. The different capabilities of the browsers of your Web site visitors must be considered.
1. different types of browsers, e.g.                         (1) and Microsoft                        (2).  The text statistics are out of date; IE has (to my chagrin) replaced NN as the most frequently used browser.
2. different generations of a specific browser.
Niederst, Table 1-1 tabulates the support of different Web technologies by different generations of various browsers.  These have also improved with later versions of these browsers.
Probably the most important thing to remember is that your Web design does not necessarily control the appearance of your Web pages in browsers.  Browser preferences can be used to specify fonts and often browsers do not have access to unusual fonts.  To be safe use common standard fonts.
2. Design strategies have can be based on one of several targets:
1. lowest common denominator means you constrain your design to the capabilities obsolete browsers.  However one does not need to worry excessively about this because an nice feature of browser displays of HTML is that if the browser can not understand an HTML tag it ignores it.  Thus, your Web page doesn't crash; the usually features not supported by a browser simply do not appear in the displayed Web page.
2. current version means you assume your visitor has a relatively up-to-date browser (but not necessarily the most recent version).
3. a (weighted?) average of the previous categories.
4. something for everyone. This, the most labor intensive strategy, provides alternative presentations for different types and generations of browsers.
3. HTML VALIDATION.  There are two basic ways one can have HTML documents check for quality:
1. HTML validation services such as the W3C'S free validator at http://validator.w3.org and validators listed on Yahoo.
2. HTML authoring tools as validators.
4. Understanding your audience means to consider their hardware/software platforms.  This can be accomplished by:
1. specifying minimal requirements (as done in my Online courses)
2. researching platforms of your target audience, and/or
3. analyzing your site usage.
However, it is prudent to consider the "law of diminishing returns";  making Web sites perform optimally on a wide variety of platforms is a labor intensive activity.
5. Consider the purpose of your Web site.
1. As stated previously, no one design model is best for all types of Web sites.
2. It is advisable to prioritize the goals of a Web site, e.g. information transfer would require completeness, links to additional resource, efficiency, etc. whereas entertainment would require appeal, ease of use, etc.
6. Test your Web site on various platforms.  As with any type of communication, it is not enough to plan it; one must analyze its effectiveness. This should not just involve personal testing; one must assess reactions of actual users with different computers and a variety software.

2. DESIGNING FOR A VARIETY OF DISPLAYS (Niederst, Chapter II):

1. A unknown, unique to Web design, is the fact that as a Web developer you do not have control over the display of your multimedia design.  That appearance is affected by:
1. the monitor characteristics, which vary
2. the viewer' browser capabilities, which in addition to varying in functionality and continuously improving like monitors, have characteristics, especially for text, that are under control of the viewer, e.g. font size and type as well as color.
3. the user's choice of browser preferences which allow the user to select default fonts and link colors as well as background colors.
2. Current differences in monitor resolution are illustrated in Niederst, Table 2-1.  Resolution is measured in          (3) rather than inches which means that the display will vary in its sized depending on the screen resolution.
3. Live space is the available surface area of a browser display.  It has a maximum when the page fills the monitor display and the browser navigation bars and tool bars are minimized.
4. Current monitors typically have pixel colors capable specified by 8-bits (            (4) colors), 16-bits (64K colors), or 24-bits (16M colors).
1. There is a standard "Web Palette" of 216 colors that is a cross-section of Mac and Windows system palettes; these will not dither on Mac and Windows 8-bit displays.  These are considered "Web safe colors". These are covered in more detail in chapters 3 and 17 of Niederst (section 3, below andLM V).
5. Fixed versus Flexible Web Page Design:
1. Web pages are flexible by default, especially the text.  The Web, by its inherent nature, assumes that the displayed text adjusts not only to the         (5) resolution but also to the                    (6) size, which is controlled by the viewer.
2. The designer can create a fixed display by constraining Web page elements with tables, e.g. the headers of the COSC 330 pages and Navigation panel.  Tables are a powerful tool for formatting because:
1. Tables can be created within table, i.e. a table can be created within any cell of another table.
2. Web page components (text as well as images) and be independently sized, formatted, and aligned within each cell.
The primary disadvantage of fixed page design is that it usually requires scrolling to view the complete display.
3. In Dreamweaver, one can also affect fixed page layout using the absolute positioning function of CSS( cascading style sheets).  These allow the developer to create a file that defines a template for Web page format and style that can be applied to any page by importing the style sheet.
4. It seems to me that, of the sites I visit, the majority of developers apparently prefer fixed page design; they use tables to define everything on the page. I think this is because users are used to the fixed presentation of print media like books and magazines.  Personally I think the fixed approach does not take advantage of the unique new facilities of the Web, but in commerce, "the customer is always right" so I suppose this applies to e-commerce as well.  I like a combination of fixed and flexible designs for my learning material; the dominant flexible design is constrained by the use of two frames and only enough tables
6. Accessibility is the focus on making pages viewable by users with disabilities, such as hearing or sight impairments.
1. Many "Do and Don'ts" are given on Niederst, p. 24; they are mostly common sense that comes from trying to put yourself in the "boots" of a handicapped visitor.
2. The W3C is trying to encourage developers to make Web documents accessible to everyone.  It's guidelines are published at www.w3.org/WAI.
1. The introduction ot W3C pages says:  "As part of their ongoing efforts to pursue and promote accessibility, the Web Accessibility Initiative (WAI), joined forces with the W3C HTML Working Group in the design of HTML4.0, which became a W3C Recommendation in December, 1997. For this latest release of the World Wide Web's publishing language, the WAI group sought remedies for a number of authoring habits that cause problems for users with:
1. Screen readers that intercept code being sent to a monitor and direct the output to speech synthesis or a refreshable Braille display.
2. Audio browsers that read and interpret HTML (and style sheets) and are capable of producing inflected speech output.
3. Text-only browsers for devices (including handheld devices with small character displays) that may only be able to display characters."
In particular, the WAI group addressed:
1. Unstructured pages, which disorient users and hinder navigation.
2. Abuse of HTML structural elements to for purposes of layout or formatting.
3. Heavy reliance on graphical information (e.g., images, image maps, tables used for layout, frames, scripts, etc.) with no text alternatives.
That document explains how WAI contributions to HTML 4.0 (in conjunction with style sheets) allow authors to avoid accessibility pitfalls even as they create more attractive, economical, and manageable pages.
2. HTML 4.0 introduces new attributes and tags that facilitate accessibility.  These are reviewed at:  www.w3.org/WAI/References/HTML4-access.
3. CSS2 (                       (7) 2nd recommendation) facilitates accessibility by making it possible to create custom style sheets (files that define a  format and style which can be applied to a Web page by linking to the style sheet).  These can be used to manage positioning and alignment, to control audio rendering, to improve navigation, etc. to improve accessibility.  These are reviewed at:   www.w3.org/WAI/References/CSS2-access.
7. Since alternative Web access devices such as WebTV, hand-held devices, and thin client browsers are rapidly becoming more widely used, it is wise to take these into account if they would be popular with your target audience.
8. The "bottom line" is that designing Web pages for an unknown and varying viewer capabilities is an art instead of a science.  There are few universal rules, so the designer should actually analyze prototype designs in as many popular viewing scenarios as possible.  One can design for the average or typical viewer in mind or implement viewer options, a more labor intensive approach.

3. DESIGN PRINCIPLES CHARACTERISTIC OF WEB DEVELOPMENT (Niederst, Chapter III):

        The key to using the Web effectively is to recognize (1) the Web's unique characteristics and (2) the differences between a Web page and hardcopy (printed material).  The purpose of your Web should be the foundation of your development guidelines.  If you are in e-commerce, then conformity to customer-friendly practices is of primary importance, but if you are learning Web skills, then nonconformity is the best way to discover new avenues of experimentation.  In any case, the following design principles should help in developing guidelines.

1. Guidelines for Using Color in Web pages:
1. Factors, characteristic of the Web, that effect colors include type of monitor, type/version of               (8), and           (9) control over default fonts,  link colors, etc.
2. There are three common systems for defining colors
1. RGB defines the numeric values representing the orthogonal colors                        (10) which are blended to give a pixel its color.
2. Lab defines lightness, a channel and b channel.
3. HSB defines hue, saturation, and brightness.
3. Monitor colors depend on how many bits are used to represent the color spectrum:  8-bits ( 256 colors), 16-bits (                   (11) colors), or 24-bits (16M colors) to represent colors.  These define "color cubes" (See Niederst, Figure 3-1, p.31) for RGB monitors specified by numeric values red, green, and blue.  For example, with 24-bit color, hexadecimal numbers (required by HTML) between 0 and FF are specified for each orthogonal color; when expressed as decimal digits the following colors are illustrative:
1. (0,0,0) for black
2. (255,255,255) for _____(12)
3. (255, 0, 0) for _____(13)
4. (0, 255, 0) for "lime" (!)
5. (0, 0, 255) for ____(14)

1. The Web Palette, a set of 6x6x6 = 216 "Web safe" colors may be used to avoid problems arising from displaying 24-bit color on 8-bit monitors.  Colors on a Web page are governed by the browser's Web Palette, with the unspecified 40 colors (available to fill the 256 colors that can be specified with 8 bits) normally supplied by the user's system palette.   Using only the Web Palette colors will guarantee that every viewer will see the same colors, although their brightness ("gamma"; see section B.c, below.) will differ on Macintosh, PC, and Unix platforms.
2. Online color design utilities recommended by Niederst include Sam Choukri's JavaScript Color Maker and NED's DynaColor.
1. Graphics  in Web pages:
1. The three standard bit mapped graphic formats (with built in compression) used on the Web today include JPEG for photographs and GIF and PNG for images that contain flat colors.
1. JPEG (Joint Photographic Experts Group) is a 24-bit standard with a lossy compression scheme for photographs.
2. GIF (Graphic Interchange Format) has an 8-bit palette and lossless compression used primarily for illustrations that contain large areas of constant colors.
3. PNG (Portable Network Graphic) is a standard designed to replace GIF.  It can support 8-bit indexed color, 16-bit grayscale, or 24-bit true color images with a lossless compression scheme.
2. Image Resolution governs how graphics are displayed on the Web. Linear dimensions, like inches, are meaningless in a Web document; one must think in terms of ppi, pixels per inch.  Since typical computer screens have low resolutions Web graphics are based on low resolution of 72 ppi , but this is an average; high-end graphics workstations have much higher resolutions.  When working with images, especially when scanning images, it is useful to remember that
1. an image scanned at 72 ppi will appear approximately the same on the Web as it does on paper.
2. A 100 ppi image will appear smaller on the computer screen than a corresponding 72 ppi image and visa versa
3. the higher the resolution the larger the file.

3. Gamma is the measure of brightness of an image.  This can be modified in most graphics editors.
4. File size is a critical parameter in Web development because the bigger the file the longer it takes to download.
5. Anti-aliasing is a technique for smoothing the jagged appearance of diagonal lines or curves in bitmapped images.  The colors of pixels that are adjacent to the edges of lines are varied progressively to blend the sharp edge into the background.
   
6. Guidelines for using graphics on Web pages:
1. Work in RGB mode or the native file format of your graphics editor.  In fact it is wise to keep a master copy of images, e.g. an original scanned image or composites of several images, because converting to a Web image makes it virtually impossible to regenerate the original.
2. When resizing images remember three things: (1) covert to RGB before resizing, (2) avoid increasing the size, and (3) reduce sizes incrementally tweaking quality at each reduction step.
3. Use anti-aliased text except for very small text (less than 10 points).
3. Typography in Web pages:
1. Web pages guarantee the distinction of two fonts, proportional and fixed-width, but, characteristically for the Web, the specific font style of these two fonts is under the control of the user.
2. Since a particular font will not be used by a browser unless it is installed on the user's system, it is wise to use standard fonts for the majority of the text on a Web page.  Helvetica/Arial (sans serif), Times (serif), and Courier (fixed width) are a nice contrasting threesome that are universally available.
3. The only way to define unalterable text is to convert text to a graphic.
4. Type sizes vary widely from computer to computer and from font to font on a single computer.  Therefore, I think selecting font sizes is best done by experimenting.
4. BNT Guidelines (NOT "rules"!) are Roger Blacks rules augmented by Niederst's advice and reworded by Tracy as "DOs and DON'Ts".
1. DO ...
1. KIS, keep is simple.
2. put content of every page.
3. use clear text  by using a minimum number of styles, contrasting text and backgrounds (light on dark and visa versa), readable fonts, etc.
4. provide changes of pace to maintain interest.
5. use text efficiently, i.e. be clear, be precise, and be concise (in order of importance).
6. keep file sizes to a minimum, to minimize download times.
7. use tables to display data, format subsections of a page, and control page layout.
2. DON'T:
1. confuse the reader.
2. mislead the reader.  Navigation should be clear, simple, and use-friendly.
3. be gaudy.  Use graphics, animation, and multimedia to augment the message of your Web pages; avoid distractions.
5. There is a nice concise advice on Web design as well as a portal to resources on the Web Design page of About.com.  It is located at

SAQ 6: What is the single most important guideline in Web development?
4. A BEGINNER'S GUIDE TO THE SERVER (Niederst, Chapter IV):

1. Most of the content of this chapter was covered in LM I so only new material is discussed below.
2. A Web server is a particular type of server that uses HTTP to make HTML documents available over the Internet.  (See LM I, section 1.5.A.b and section 3.5.)
3. A Web server is a program that, like all programs is accessible via the server's operating system.  The majority of servers use the Unix operating system although Microsoft oriented sites will use Windows NT.
4. To access a server directly, one can use Telnet to log on to the server (if logon privileges have been given by the system administrator).  Obviously, a knowledge of the server's operating system is necessary to manipulate the system.  The Unix file system and some of its basic commands are given in Niederst, pp. 50-57, but COSC 330 students are not required to master this material because an FTP client can be used to accomplish these Unix tasks.  The one task requiring direct access to the server is to change a password; how to do this with the SGA server is explained in the Web server interface.
5. An FTP client (e.g. WS_FTP) can be used as a "surrogate operating system" for transferring files, renaming them, deleting them, etc.  Therefore, for basic Web site maintenance, one need not learn the operating system of the server.
6. MIME Types were covered in LM I, section 4.3.

NOTE: you have now covered the material required to answer questions 32-40 on PREASSESSMENT 330-1.  Be sure to circle you answers now and go back and study the content relevant to questions about which you are unsure!