|
|
|
|
|
|
|
|
|
|
Here you will find information
regarding this topic, which I have gathered by browsing the Net. I found it
really useful and it has a highly technical approach.
Visual contrast and page design
Good typography depends on the
visual contrast between one font and another, and the contrast between text
blocks and the surrounding empty space. Nothing attracts the eye and brain
of the viewer like strong contrast and distinctive patterns, and you only
get those attributes by carefully designing them into your pages. If you make
everything bold, then nothing stands out and you end up looking as if you
are SHOUTING at your readers.
If you cram every page with
dense text, readers see a wall of gray and their brains will instinctively
reject the lack of visual contrast. Just making things uniformly bigger doesn't
help at all. Even boldface fonts become monotonous very quickly, because if
everything is bold then nothing stands out "boldly." Use the major HTML headings
sparingly. One alternative to overly bold HTML headers is to use the physical
style controls of HTML to make text bold or italic without increasing the
font size. However, you should understand that there are some disadvantages
to using physical styles to control the typography of your Web pages.
The HTML heading tags (H1, H2,
etc.) are designed to identify important titles and subtitles in your text,
and are only incidentally meant to change the visual display of the titles.
If you use the "FONT SIZE" tags in Netscape and use physical styles like "BOLD"
then automatic indexing and text analysis programs will have a difficult time
analyzing your web documents.
Visual logic versus structural
logic
The framers of the original
HTML standards were physical scientists who wanted a standard means to share
documents with minimal markups aimed at revealing the logical structure of
the information. Since they had little interest in the exact visual form of
the document, no precise typography and page formatting is possible in current
implementations of HTML. In focusing solely on the structural logic of the
HTML document, the framers of the Web ignored the need for the visual logic
of sophisticated graphic design and typography. The standards organization
responsible for codifying the HTML language is responding the widespread complaints
of graphic designers that the heading tags in Web documents often produce
clunky, over-large titles and subtitles.
Through style sheets and new
font control tags future versions of HTML will soon allow you to specify what
size font each header level will produce in each Web page. Thus you will be
able to produce more sophisticated typography without giving up the substantial
advantages of using the conventional HTML header tags. Type and legibility
We read primarily by recognizing the overall shape of words, not by parsing
each letter and then assembling a recognizable word.
Avoid all-uppercase headlines
they are much harder to read, because words formed with capital letters are
monotonous rectangles that offer few distinctive shapes to catch the reader's
eye: Legibility depends on the tops of words Your choice of uppercase or lowercase
letters can have a dramatic effect on legibility. In general, use downstyle
(capitalize only the first word, and any proper nouns) for your headlines
and subheads. Downstyle headlines are more legible, because we primarily scan
the tops of words as we read:
Notice how much harder it is
to read the bottom half of the same sentence: If you use initial capital letters
in your headlines you disrupt the reader's scanning of the word forms. Pattern
and page design When your content is mostly text, typography is the tool you
use to "paint" patterns of organization on the page. The first thing your
reader sees is not the title or other details of the page, but the overall
pattern and contrast of the page. The reader's eye scans the page first as
a purely graphic pattern, then begins to track and decode type and page elements.
The regular, repeating patterns established through carefully organized pages
of text and graphics help the reader to quickly establish the location and
organization of your information, and increase the overall legibility of your
pages.
Patchy, heterogeneous typography
and text headers makes it difficult for the user to see major patterns quickly,
and makes it almost impossible to for the user to quickly predict where information
is likely to be in located in unfamiliar documents: Settle on as few heading
styles and subtitles as are necessary to organize your content, then use your
chosen styles consistently. The fact that HTML provides six levels of headings
doesn't mean that you should ever use six levels of headings in a single page.
This whole manual of over 60 Web pages uses only two headers; an H2-level
page title, and boldface subtitles.
Manipulating text blocks
Text on the computer screen
is hard to read because of the low resolution of today's computer screens,
but also because the layout of most Web pages violates one of the most basic
rules in book and magazine typography: the lines of text in most Web pages
are much too long to be easily read. Magazine and book columns are narrow
for physiologic reasons: at normal reading distances the eye's span of movement
is only about 8 cm (3 inches) wide, so designers try to keep dense passages
of text in columns no wider than reader's comfortable eye span. Wider lines
of text require the readers to move their heads slightly, or strain their
eye muscles to track over the long lines of text. Unfortunately most Web pages
are almost twice as wide as the viewer's eye span, so extra effort is required
to scan through those long lines of text.
If you want to encourage your
Web site users to actually read a document online (as opposed to printing
it out for later reading), consider using the "BLOCKQUOTE" or "PRE" HTML tags
to shorten the line length of text blocks to about half the normal width of
the Web page. The pages in this manual are laid out using an invisible 2-column
table (BORDER="0") to restrict the text line length to about 40 to 60 characters
per line. The exact character count is difficult to predict because of the
way different browser software and different operating systems display type
sizes. In conventional print layout columns of 30 to 40 characters per line
are considered ideal, but this seems too sparse to our eyes for Web page layout.
Until Netscape 3.0, site designers
had to accept that their carefully formatted documents would be viewed in
any and every typeface, from Times to Tekton. The font was determined by the
user's designated browser preferences, and these preferences could not be
controlled. However, the most recent version of Netscape has a new tag called
. You can use this tag to set the font to a common typeface such as Palatino,
and this tag will override the user preferences. This is useful not only because
of aesthetic partiality, but because of the differing dimensions of typefaces.
A table that is carefully designed
on one face might not format correctly in another. Table set in Palatino or
Times New Roman Cross-platform font sizes The Macintosh and Windows operating
systems display type differently, even when the same typefaces are involved.
In general, type displayed on Windows Web browsers will look 2 to 3 points
larger than the equivalent face on the Macintosh. This difference in font
rendering can have a major impact on your page layouts. Macintosh users can
obtain the Mac TrueType versions of the major Windows TypeType fonts listed
above by downloading and installing Microsoft's Internet Explorer 3.0.
Specifying particular typefaces
The recent addition of the "FACE"
attribute of the "FONT" HTML tag allows you to specify what typeface the browser
should use to render type on your Web pages. You can specify the name of any
type font in the "FACE" attribute, but in practice you should stick to the
most widely used typefaces for the Macintosh and Windows operating systems.
If the typeface you specify is not available, the browser will switch to the
default font (most often the default font will be "Times New Roman" or "Times").
Specifying typefaces To increase the chances that you will get a typeface
you are happy with, you can specify multiple fonts in the "FACE" attribute.
The browser will check for the presence of each font (in the order given),
so you can specify three or four alternate possibilities before the browser
defaults to the standard Times Roman font.
Typefaces The table below shows
the fonts that come with Windows95 and the Macintosh operating system. If
you are going to use the FACE attribute to specify type you should probably
stick to the typefaces listed here, and always specify at least one typeface
from each operating system (example: "Verdana, Geneva) to avoid having the
browser render your pages in the default font. Note that although "Bookman"
and "Bookman Old Style" are basically the same typeface, the exact name you
specify in the FACE attribute matters.
If you want both Macintosh and
Windows95 users to see the typeface Bookman, then use both names in your FACE
attribute tags: Names matter Watch out for tables If you are using both tables
and font tags in your document you should be warned that the combination can
be a bit unpredictable. When you are developing your site, set your default
proportional font to something obviously different from your intended font.
That way you will see clearly whether or not your font settings are being
applied to your document.
Just as in traditional print
publishing, high-quality web sites adhere to an established set of type style
settings consistently throughout the site. Consistency gives polish to a site
and encourages visitors to stay by establishing an expectation on the structure
of a text. If this expectation is dashed by sloppy, inconsistent formatting,
visitors will not have a comfortable experience and may not return. Style-setting
You should decide on settings such as fonts, inter-paragraph spacing, the
size of subheads, and so on, and then create a style sheet to help you maintain
these settings throughout your site development. This is especially critical
for large sites with numerous pages for example, this style manual.
Maintaining consistency is not
as easy with the current web authoring tools as it is using page layout software
like QuarkXpress or Pagemaker, but the considerations behind that functionality
are applicable. It is equally important to have good, consistent layout on
the screen as it is on the printed page. The custom selection in the "HTML
Tools" palette is extremely useful for creating style settings. You can define
custom settings, and then apply them to your pages. For example, you can define
an em dash ( ) to be a black square 14 pixels long and one pixel high with
three pixels of vertical space, like so: In the custom settings dialog box
paste this tag and name it "em dash."
Then every time you need to include
an em dash in your text simply select "em dash" from the custom menu and this
tag will be inserted. References Bringhurst, R. 1992.The elements of typographic
style. Washington: Hartley and Marks. Siegel, D. 1996. Creating killer web
sites. Indianapolis: Hayden Books. www.killersites.com Without tables, text
and graphics are essentially poured onto the user's screen, with the actual
layout of pages depending entirely on the width and height of the browser
window. All of the issues of legibility, readability, and style that we have
discussed in this manual rely on the ability to position words, images, and
screen elements on the "page" in a way that adheres to established typographic
conventions. Because of the limitations of HTML, the only layout tool for
site designers at this time is tables.
Using tables for page layout
Tables are currently the only HTML option for page layout. If you simply place
a chunk of text on a page, the length of the lines is determined by the dimensions
of the viewer's browser window. When the user resizes their window, the text
reflows to fill the new space. Though some may consider this a "feature,"
it actually hinders the user's experience with the content. The conventions
of print give us a comfortable place to access content. Without some adherence
to these standards you may discomfit and ultimately lose your readers.
To avoid this use tables to
define the areas of your pages. Use table cells to create margins, put your
text in table cells to limit the line length (ideally 10 to 12 words on a
line), and use cells to position elements on the page. Cell attributes and
table dimensions The behaviour of a table depends largely on how its cells
are defined. For the purposes of page layout you should define cell widths
with absolute values. Additionally, the cell should contain a single-pixel
GIF equal to the width of the cell to make sure that the table dimensions
do not change when the browser window is resized.
Page with table examples No borders,
please! When we talk about tables we are not speaking of the beveled beauties
that HTML offers for the presentation of tabular content. We are using tables
to get around the limitations of HTML, and we are using them in ways in which
they were not intended. These are invisible tables whose sole purpose is to
give us control over page elements, so be sure to set BORDER="0". While we're
on the subject, table borders are ugly and unnecessary even in the context
of the tabular materials they were intended for. It is much cleaner to use
spacing, alignment, and indents to delimit tabular information. Gutters In
print the space between columns is referred to as a gutter.
You can use tables to create
gutters, either through 1) adding a cell that serves as the gutter, or 2)
by using the cellpadding (space between cell contents and cell) or 3) cellspacing
(space surrounding cell) attributes. 1 Table with cell gutter 2 Table with
cellpadding = 8 3 Table with cellspacing = 8 Determining the proper length
for any particular World Wide Web (Web) page requires balancing four major
factors: The relationship between the page and screen size. The particular
content of your documents. Whether the reader is expected to browse the content
online, or to download the documents for later reading. The bandwidth available
to your target audience. (e.g., how fast is their connection to the Web?)
Relationships between the document
length and the screen Many human interface researchers and designers of graphic
user interfaces have noted the disorienting effect of scrolling on computers
screens. This loss of local context within scrolling computer screens is particularly
troublesome when basic navigational elements like linkages to other local
pages in the Web site disappear off-screen as the user moves through very
long pages. This argues for navigational Web pages (home pages and menus in
particular) that contain no more than about one to two 640x480 screens worth
of information, and which feature local navigational links at both the beginning
and end of the page layout.
Long Web pages require the user
to remember too much information that is currently scrolled off the screen;
users easily lose a sense of context when the navigational buttons or major
links are not visible: In long Web pages the user must depend on the vertical
scroll bar slider (the little box within the scroll bar) to navigate. In most
graphic interfaces (Macintosh, Windows 3.1) the scroll bar slider is also
fixed in size, and provides little indication of the document length relative
to what's currently visible on the screen, so the user gets no visual cue
to page length. In very long Web pages small movements of the scroll bar can
completely change the contents of the screen, leaving no familiar landmarks
to orient by. This gives the user no choice but to crawl downward with the
scroll bar arrows, or risk missing sections of the page.
However, long Web pages are
often easier for managers to organize, and for users to download. Web site
managers don't have to maintain as many links and pages with longer documents,
and users don't need to download multiple files to collect information on
a topic. Long pages are particularly useful for providing information that
you don't expect users to read online (realistically, that should include
any document longer than two printed pages). If the Web pages get too long,
or contain too many inline graphics, the pages can end up taking too long
to download. Very large Web pages with lots of graphics can also overwhelm
the RAM memory limitations of the Web browser.
Mirror the structure of your
content It makes sense to keep closely related information within the confines
of a single Web page, particularly when you expect the user to print or save
the text. Keeping the content all in one place makes printing or saving easier.
However, once you get beyond about four screens worth of information the user
must scroll so much that the utility of the online version of the page begin
to deteriorate. Long pages often fail to take full advantage of the linkages
available in the Web medium. If you want to provide both a good online interface
for pages and easy printing or saving of the content: Divide the page up into
chunks of two to three printed pages worth of information, including inlined
graphics or figures.
Use the power of hypertext links
to take full advantage of the Web medium. Provide a link to a separate file
that contains the full-length text combined into one page, designed so the
reader can print or save all the related information in just one step. Don't
forget to include the URL of the online version within the text of that page
so users can find updates and correctly cite the page source. Modular design
of online collections of pages. One of the primary advantages of online documents
is that they can be rapidly updated. In practice the editor or "webmaster"
of a large Web site is constantly swapping in new updated files for old ones.
In a well-designed modular system pages covering particular topics can be
updated quickly without needing to change large sections of information or
re-format complex pages.
The page length may increase
in a modular system, but the URL of each topic page remains the same, regardless
of how long the page grows. Thus modular systems are better when you want
to give your readers a sense of stability (the URLs of major pages remain
constant) , even while your Web site expands. The concept is essentially similar
to the loose-leaf procedural manuals most organizations use to keep paper
documents reasonably up to date by replacing old sections for new, except
that Web systems offer much more flexible and economical means of keeping
information current. In general, you should favor shorter Web pages for: Home
pages, and menu or navigation pages elsewhere in your site.
Documents to be browsed and read
online. Pages with very large graphics. In general, longer documents are:
Easier to maintain (they are all in one piece, with fewer links). More like
the structure of their paper counterparts (not chopped up). Much easier for
users to download and print. Titles and subtitles Forget icons, banner graphics,
bullets, horizontal rules, and colored backgrounds. Editorial landmarks like
titles and headers are the fundamental human interface issue in Web pages,
just as they are in any print publication. A consistent approach to the titling,
headlines, and subheads in your documents will aid your readers in navigating
through a complex set of Web pages.
The text styles used in this
manual follow suggestions from the Xerox Publishing Standards: Headline style
Bold, capitalizing the initial letters, for: Document titles Other web sites
Titles of documents referred to within the text Proper names, product names,
trade names Downstyle Bold, capitalize first word only, for: Subheads References
to other heading within the style manual Figure titles Lists HTML and page
titles Web page titles are designated in the HTML document head section with
the "TITLE" tag. the title is crucial, because the page title is often the
first thing visible to users using slow Internet connections, and because
the title becomes the text for any bookmarks the reader makes to your pages.
The page title should: Incorporate
the name of your company, organization, or Web site. Form a concise, plainly
worded reminder of the page contents. Always think of what your page title
will look like in a long list of bookmarks. Will your page title remind the
reader what was interesting about your pages? Style for online documents Documents
to be read online must be concise and structured for fast scanning. The "inverted
pyramid" style used in journalism works well on Web pages as well. Get the
important facts up near the top of the first paragraph where users can find
them quickly.
Assume readers will print anything
longer than half a page rather than read the text online. Be concise Use lists
where possible Make printing easy Longer documents Many types of documents
(like this manual) are not well suited for the telegraphic style that works
well for documents designed to be read online. Web authors often cut so much
out of Web presentations that what is left would barely fill a print pamphlet.
Concise writing is always better, but don't "dumb down" what you have to say
there's enough dumb stuff on the Web already. Just understand that readers
will want to print longer documents.
Make printing easy for your readers
and you can use the Web to deliver content without cutting the heart out of
what you have to say. Text for the Web Some general points about text formatting
specific to the Web: Excessive markup: Beware of too much markup in your paragraphs.
Too many links, or too many styles of typeface destroy the homogeneous, even
"type color" that characterizes good typsetting. Link colors: If you are using
custom link colors, choose colors that closely match your text color. Reading
from the screen is hard enough already without having to deal with screaming
orange or bilious green links.
Use the best tool: Write your
text in a good word processing program with spell-checking and search features.
Transfer text to HTML only after it has been proofread. Style sheets: Don't
use the word processor style sheets to produce "All capitals" or other formatting
effects. You will lose those special formats when you convert to plain ASCII
text for HTML use. Special characters: Don't use the "smart quotes" feature.
Avoid all special characters like bullets, ligatures, and typographer's "en"
and "em" dashes not supported in standard HTML text. Consult a good HTML guide
book for the listing of special and international characters supported through
the HTML extended character formatting.
No auto hyphens: Never use the
automatic hyphenation feature of your word processor on text destined for
the Web. This may add non-standard "optional hyphen"characters to your text
that will not display properly in Web browsers. Links and language If you
are new to the Web it can sometimes be awkward to figure out where to place
links within sentences. Never construct a sentence around a link phrase such
as "click here for more information." Write the sentence as you normally would,
and place the link anchor on the most relevant word in the sentence. Poor:
Click here for more information on placing links within your text. Better:
Web links are powerful, but may also cause problems if they are placed carelessly.
Parenthetic links Links are
a distraction. It is pointless to write a paragraph and then fill it full
of invitations to your reader to go elsewhere. Put only the most salient and
interesting links within the main body of your text. Group all minor, illustrative,
parenthetic, or footnote links at the bottom of the document where they are
available but not distracting. Web references Several companies have made
excellent style manuals or publications guidelines available on the Web, including:
Sun Microsystems, Guide to Web Style, by Rick Levine. The best of a good group;
excellent, self-exemplifying advice for Web design. Ameritech, Ameritech Web
Page User Interface and Design Guidelines Apple Computer, Apple Web Design
Guide Apple Computer, Apple Publications Style Guide Guide to good practices
for WWW authors.
Margaret Issacs, UniversitFrames
allow you to display multiple HTML documents on a single page. There are quite
a number of practical uses for this functionality. However, frames-based pages
behave differently than regular pages because frame-based documents are not
HTML documents, but rather meta documents which call and display HTML documents.
A frame page contains no body HTML tags, only the parameters for the frames
and the URLs of the HTML documents designated to fill them. Because of this
frames can sometimes yield unexpected results, particularly when using the
Back button. If you have been navigating within a frame and then press Back,
you will go back within the frame instead of going back to the previous page.
But despite their unpredictability and aesthetic limitations, frames provide
a functionality that is appropriate for certain content, and that can greatly
facilitate site maintenance.
Frames for flexibility One type
of site suited to frames is one whose contents are expected to change frequently.
Because you can design a frame-based site to have one file for navigation,
if you expect to add or remove pages you will only have to modify that one
file. A site, for example, can require a number of files to be changed if
a page is added or deleted because each page has a navigation column. If we
had used frames we would have had a single file for the section menu, and
when we needed to add a page only that file would have had to be changed to
reflect the addition.
As it is, when we add a page
to a section we must edit each file in the section to add the new link to
the navigation column. Frames for functionality Frames can provide a certain
functional coherence to a targeted area of your site. Say your site contains,
among other things, a collection of Frost poems. You could create a virtual
"reading room" for his poetry using frames, with the left-most frame providing
the navigation links and the main frame displaying the poems. Visitors would
most likely go to this area and stay for a time, and do their navigation using
the links you provide, so the quirky navigation of the Back button would not
be too intrusive. You can also use frames to provide additional interactivity
to your page. Frames allow you to put a page up on the user's screen and change
its contents without actually rewriting the entire screen. The frames can
interact; clicking a link in one frame can change the contents of the other.
For example, a text with annotations
in one frame can be linked to a footer frame, and clicking on the text reference
fills the footer frame with the corresponding note. "Reading room" example
Frames for interactivity Frames can also allow users to choose their content.
This is particularly significant when working with large files. Say, for example,
you have a movie file that you would like to put on your page with other elements
such as text, but rather than force the user to download the file you want
the download to be optional. If you simply include the HTML tag for the movie
on the page with your other page elements, the movie will download automatically
with the page.
However, if your page is a frameset,
you can designate an area of the page as the movie space and give the user
a link to click if they wish to download the movie into that space. "Viewing
room" example Aesthetics Many page designers have not used frames because
of their prescribed borders and limited flexibility. However, the current
versions of browser software allow many more frame parameters to be defined.
In fact, frame borders can now be set to zero. This allows you to design using
the functionality of frames without requiring them to be visual and perhaps
inharmonious elements on your page. You can use tables in creative ways to
help achieve effects that you may want to incorporate into your web-publishing
efforts.
There are a number of design
challenges for which tables provide the solution. One
thing you can do with tables is take a composite image and split it into pieces,
then re-combine it in the cells of table. This is useful for creating wrap-around
effects or image captions. The following example is shown with borders off
and borders on to illustrate how the table is formatted. It is possible to
approximate wrapping text around a graphic by splitting the image into two
parts and combining the images and text in a table.
It is possible to approximate
wrapping text around a graphic by splitting the image into two parts and combining
the images and text in a table. Watch out for hard returns in your HTML code
when using tables to mortice images. A hard return before a tag will add space
between the table cells. You will also need to set cellpadding, cellspacing,
and border to 0 in order for the image to mortice correctly. And finally,
be sure to use the single-pixel GIF to keep the cells in your tables from
collapsing. Alignment You can use tables to combine different text alignment
specifications. In this example the text in the left column is right justified,
and the text in the right is left justified.
This section contains techniques
to optimize the look and efficiency of your Web page graphics.
Although electronic publishing
frees you from the cost and limitations of color reproduction on paper, you
will still need to make some careful calculations (and a few compromises)
if you want to optimize your graphics and photographs for various display
monitors and current Internet access speeds. Graphics and modems Most of the
present Web audience consists of people accessing Internet service providers
via 28.8 kilobit per second (kbps) modems from their homes, offices, or remote
work sites. At 28.8 kbps you only get about 3.6 kilobytes (KB) per second
(remember it takes 8 bits to make each byte).
This means a modest 36 KB graphic
on your Web page could take 10 seconds or longer to load into the reader's
Web viewer. Actual data transmission rates will vary, depending on the type
of modem, the speed of your Web server, the type of Internet net connection
used, and other factors, but the overall point is clear: the more graphics
you use, the longer your reader will have to wait to see your page. A full-screen
graphic menu on your home page, plus background graphics could leave your
modem-based readers twiddling their thumbs for a full minute or more, even
if they have a state-of-the-art modem and good Internet connections. Look
at your watch (or better yet, hold your breath) for a full minute, then figure
out if that is the first thing you are willing to ask your users to do when
they visit your Web site.
A better interface strategy
would be to gradually increase the graphics loading of your pages, drawing
users into your site with reasonable download times. As users become more
engaged with your content, they will be more willing to endure longer delays,
especially if you give them notes on the size of graphics, or warnings that
particular pages are full of graphics and will take longer to download. Graphics
and intranets Luckily for graphic designers, many Web sites are created primarily
for educational, organizational, or commercial users who access their local
intranets and the larger World Wide Web at Ethernet speeds or greater. Graphics
and page performance are also an issue for these users, but it makes little
sense to arbitrarily restrict Web page graphics in the cause of "saving bandwidth."
Overview of color computer displays
The bandwidth nazis and gearheads
always miss this point: graphics are what drew most people to the Web in the
first place. If you got the access speed, indulge! The following is a brief
overview of color computer displays that explains some of the basic terminology
used in the Macintosh and Windows operating systems. Current color monitors
for desktop microcomputers are based on cathode ray tubes (CRT's). Because
CRT's transmit light, CRT displays use the red-green-blue (RGB) additive color
model. The RGB model is called "additive" because a combination of the three
pure colors "adds up" to white light. The computer's operating system (Mac,
Windows, etc.) organizes the display screen into a grid or x,y coordinates,
like a checkerboard. Each little box on the screen is called a "pixel" (short
for "picture element").
Current Macintosh and Windows
displays are made up of these grids of pixels (see screen diagram below).
Pixels and color To control the color of each pixel on the screen the operating
system must dedicate a small amount of memory to each pixel. In aggregate
this memory dedicated to the display screen is often referred to as "video
RAM" or "VRAM". In the simplest form of black and white computer displays
a single bit of memory is assigned to each pixel. Since each memory bit can
only be positive or negative (0 or 1), a one-bit display system can only manage
two colors (black or white) for each pixel on the screen: If we dedicate more
bits of memory to each pixel in the display, we can manage more colors.
When eight bits of memory are
dedicated to each pixel, each pixel could be one of 256 colors. (256 = 2 to
the eighth power; in other words, 256 is the maximum number of unique combinations
of 0's and 1's you can make with eight bits). This kind of computer display
is called an "eight-bit" or "256-color" display, and is very common in current
microcomputing, especially on lap-top computers and older desktop machines.
If still more memory is dedicated to each pixel, we can get nearly photographic
color on the computer screen. "True-color" or "24-bit" color displays can
show millions of unique colors simultaneously on the computer screen. True-color
(24-bit) images are composed by dedicating 24 bits of memory to each pixel;
eight each for the red, green, and blue components (8+8+8=24).
The amount of VRAM dedicated
to each screen pixel in the display is commonly referred to as the "bit depth"
of the monitor. Most Mac and Windows microcomputers sold in the last few years
are capable of displaying bit depths greater than eight-bit, in thousands
(16-bit) or millions (24 bit) of simultaneous colors. To check your computer
system for the range of bit depths available to you, use the "Display" control
panel (Windows95) or the "Monitors" control panel (for Macintosh): Bit depth
and color graphics files The terminology and memory schemes used in color
displays are directly analogous those used to describe color depth in graphics
files. In their uncompressed states, eight-bit or 256-color image files dedicate
eight bits to each color pixel in the image. In eight-bit images the 256 colors
that make up the image are referenced to a "palette" or "index" (also called
a color lookup table, or CLUT).
The main point for eight-bit
images is that they can never contain more than 256 colors. True-color or
24-bit images are typically much larger than eight-bit images in their uncompressed
state, because each pixel in a 24-bit image has 24 bits of memory dedicated
to it, typically in three monochrome layers: red, green and blue: GIF files
The Graphic Interchange Format (GIF) was popularized by the Compuserve Information
Service in the 1980s as an efficient means to transmit images across data
networks. In the early 1990s the original designers of the World Wide Web
adopted the GIF format for its efficiency and widespread familiarity. Today
the overwhelming majority of images on the Web are in GIF format. Virtually
all Web browsers that support graphics support the GIF file format for inlined
images.
The GIF format incorporates a
compression scheme to keep files sizes at a minimum, and GIF files are limited
to 8-bit (256 or fewer colors) color palettes. There are now several slight
variants of the basic GIF file format that add support for transparent color,
and support for the interlaced GIF graphics popularized by the Netscape Navigator
Web browser. You may see references to the different GIF formats, such as
"GIF87a," or "GIF89a." All forms of GIF images will work in Web browsers that
support the basic GIF file format, so that you do not have to worry whether
your readers will be able to see your GIF graphics, regardless of the GIF
version that you use.
Users whose browsers support
the transparency and interlacing (such as Netscape Navigator and Microsoft
Explorer) will see more sophisticated visual effects, but everyone will see
your basic GIF images. GIF File Compression The GIF file format uses a relatively
basic form of file compression (Lempel Zev Welch, or LZW) that squeezes out
inefficiencies in the data storage without causing a loss of any data ("lossless
compression") or distortion of the image. The LZW compression scheme is most
efficient at compressing images with large fields of homogeneous color.
It is not very good at squeezing
complex pictures with lots of grainy texture. All variations of the GIF graphics
file format incorporate LZW file compression. See Siegel (1996) for an excellent
discussion on optimizing graphics for GIF compression. Contents Web Graphics
Introduction Color display primer Graphic file formats Interlaced GIF Transparent
GIF JPEG graphics Summary-File formats Illustrations Optimizing graphics I
Optimizing graphics II Height & width tags Colored backgrounds Imagemaps The
primary challenge in creating illustrations for Web pages is the relatively
low resolution of the computer screen.
But these days computer screens
can also display thousands or millions of colors, and that wealth of color
can often make the resolution limitations less noticeable. Very complex graphics
or color photographs often look surprisingly good on Web pages for two major
reasons: True-color (24-bit) or high-color (16-bit) displays show enough colors
to accurately reproduce photographs or complex art. The transmitted light
from display monitors shows more dynamic range and color intensity than light
reflected from printed pages. Science and education users are just waking
up to the fact that digital publishing is inherently color publishing on the
Web there is no economic penalty for publishing in color.
Web pages may be the best current
means to distribute color photography it's a lot cheaper than color printing,
and is also more consistent and reliable than all but the most expert (and
costly) color printing: The Web is also great for transmitting complex color
artwork to students. Processing complex illustrations or photographs The anatomic
graphic above was originally painted at much higher resolution in Adobe Photoshop
(1000 by 2000 pixels, 24-bit RGB file). We then reduced a copy to the size
above, and used the Photoshop "Unsharp Mask" filter (at 60%) to restore the
sharpness of the graphic.
Although this small version of
the painting has lost some resolution and color detail, it still shows all
the major anatomic landmarks. We think it is just as good as any equivalent
graphic printed in a textbook. We chose the JPEG file format for the anatomic
painting because the artwork is relatively large for a Web graphic. It also
does not contain any lettering or diagrammatic elements that reproduce poorly
in highly compressed JPEG images. JPEG images can be used for paintings or
photographs with labels if you choose the right compression setting. The painting
above was compressed in Photoshop at "good" quality," which is the medium
setting ("excellent, good, poor").
If you choose the "good" or "excellent"
JPEG compression settings text labels may look acceptable, at least on 16-bit
or 24-bit displays. Note that the text of the signature is clear and legible,
even though close inspection shows there is JPEG noise around the characters.
All other graphics on this page are in GIF format, either because they are
smaller, or because they contain text or diagram elements. Diagrams for the
computer screen Basic diagrams also work well on the computer screen if they
are carefully designed to match the grid of pixels on the screen. Graphics
built with orthogonal lines (straight horizontal or vertical lines) or diagonal
lines at 45 degree angles work best for the screen, as this enlarged view
illustrates:
Complex icons are hard to interpret,
and look mushy and confusing on the screen. Keep your icons and navigation
graphics as simple as possible: Simple isometric perspective graphics also
work well, because they depend on straight lines and 45 degree diagonals.
Graphics built carefully to match the pixel grid cannot be resized automatically
in Photoshop they must be re-drawn by hand to larger or smaller sizes to avoid
a mushy, fuzzy look that destroys their effectiveness:
Always use the GIF graphic format
for diagrams, navigation graphics, or any graphic that contains text. Contents
Page Design Introduction Graphic design 100 Balanced pages Design grids for
pages Graphic safe areas Page headers Typography I Typography II Typefaces
Consistency Basic Tables Page length Cross platform issues Editorial style
Frames Advanced tables Understand the medium Readers experience Web pages
in two ways: as a direct medium where pages are read online, and as a delivery
medium to access information that is later downloaded into text files or printed
onto paper. Your expectations about how readers will typically use your site
should govern your design decisions.
Documents to be read online
must be concise, with the amount of graphics carefully "tuned" to the bandwidth
available to the mainstream of your audience. But don't patronize your readers
or insult their intelligence. The common advice that the Web is dominated
by semi-literate "screenagers" who won't read more than two sentences in a
row is grossly exaggerated, and probably irrelevant to you and your audience
anyway. You do not need to "dumb down" your content or shave it to a meaningless
skeleton. Just be aware that readers will typically want to print longer pages
or more complex presentations to read "offline" from paper. Establish a visual
hierarchy
The primary task of graphic design
is to create a strong, consistent visual hierarchy, where important elements
are emphasized, and content is organized logically and predictably. Graphic
design is visual information management using the tools of layout, typography,
and illustration to lead the reader's eye through the page. Readers see pages
first as large masses of shape and color (see below), with foreground elements
contrasted against the background field. Only secondarily to they begin to
pick out specific information, first from graphics if they are present, and
only afterward do they start parsing the "harder" medium of text and begin
to read individual words and phrases.
Thus the overall graphic balance
and organization of the page is crucial to drawing the reader into your content.
A dull page of solid text will repel the eye as a mass of undifferentiated
gray, but a page dominated by poorly designed or overly bold graphics or type
will also repel sophisticated users looking for substantive content. What
you want is an appropriate balance that attracts the eye with visual contrast:
Proportion and "appropriateness" are the keys to successful design decisions,
but those things can only be determined within the context of your overall
purpose in developing a Web site, by the nature of your content, and most
importantly, by the expectations of your audience.
Direct the reader's eye
In the West readers of English
read from left to right, and from the top of the page to the bottom. This
fundamental visual axis dominates most design decisions, and is the basis
for most conventional graphic design of print publications. In page layout
the top of the page is always the most dominant location, but on Web pages
the upper page is especially important, because the top four inches of the
page is all that is visible on the typical 14 to 16 inch office computer monitor.
Subtle pastel shades of colors typically found in nature make the best choices
for background or minor elements, especially if you are new to graphic design
and color selection. Avoid bold, highly saturated primary colors except in
regions of maximum emphasis, and even there use them cautiously.
Type must always contrast sharply
with any background color. If you have a dramatic or complex graphic scheme
in mind, hire a professional graphic designer to execute it. If you are not
a designer and must do things yourself, keep everything conservative, conventional,
and simple. Graphic distractions Beware of graphic embellishments. Horizontal
rules, graphic bullets, icons, and other visual markers have their occasional
uses, but apply each sparingly (if at all) to avoid a patchy and confusing
layout. The same applies for the larger sizes of type on Web pages. One reason
professional graphic designers are so impatient with HTML is the grotesquely
large type sizes displayed by most Web browsers when using the "H1" and "H2"
header tags.
The tools of graphic emphasis
are powerful, and should be used only in small doses for maximum effect. Overuse
of graphic emphasis leads to a "clown's pants" effect where everything is
garish and nothing is really emphasized: Be consistent Establish a layout
grid and a style for handling your text and graphics, then stick with it to
build a consistent rhythm and unity across all the pages of your site. Repetition
is not boring; it gives your site a consistent graphic identity that reinforces
a distinct sense of "place," and that makes your site more memorable. A consistent
approach to layout and navigation allows readers to quickly adapt to your
design, and to confidently predict the location of information and navigation
controls across the pages of your site. If you choose a graphic theme, use
it throughout your site.
Metadesign's home page banner
(below) sets the graphic theme for the site, and introduces distinctive typography
and a set of navigation icons: Graphic has been reduced from the original
size. æ www.metadesign.com/ This is a banner at the top of an interior page
in Metadesign's site. Note how the typography and icon theme is carried through
to all interior banners. There is no confusion about whose site you are navigating
through: Graphic has been reduced from the original size. æ www.metadesign.com/
"Style" Don't set out to develop a "style" for your site, and be very careful
about simply importing the graphic elements of another Web site or print publication
to "decorate" your pages.
The graphic and editorial style
of your Web site should evolve as a natural consequence of consistent and
appropriate handling of your content and page layout.
|
