If you're using text just to describe links, consider using a link menu instead of a paragraph.. Probably the easiest way to figure out whether you're creating links within text properly
Trang 1Figure 16.13 DO: Another better link menu.
[View full size image]
Either one of these forms is better than the first They both give your visitors more clues about what's
on the other side of the link
Use Links in Text
The best way to provide links in text is to first write the text as if it isn't going to have links at allfor example, as if you were writing it for hard copy Then you can highlight the appropriate words that will link to other pages Make sure that you don't interrupt the flow of the page when you include a link The text should stand on its own That way, the links provide additional or tangential information that your visitors can choose to follow or ignore at their own whim
Figure 16.14 shows another example of using links in text Here the text itself isn't particularly relevant; it's just there to support the links If you're using text just to describe links, consider using a link menu instead of a paragraph Instead of having to read the entire paragraph, your visitors can skim for the
Trang 2links that interest them.
Figure 16.14 DON'T: Links in text that don't work well.
[View full size image]
Figure 16.15 shows one way to restructure the previous example The most important items on the page are the name of the conference, the events, and the dates on which they occur You can restructure the page so that this information stands out As you can see in Figure 16.15, presenting the events in a preformatted text table makes the important information stand out from the rest
Figure 16.15 DO: Restructuring the links in the text.
[View full size image]
Trang 3Probably the easiest way to figure out whether you're creating links within text properly is to print out the formatted web page from your browser In hard copy, without hypertext, does the paragraph still make sense? If the page reads funny on paper, it'll read funny online as well
The revisions don't always have to be as different as they are in this example Sometimes, a simple rephrasing of sentences can make the text on your pages more readable and more usable, both online and when printed
Avoid the "Here" Syndrome
A common mistake that many web authors make when creating links in body text is using the "Here" syndrome This is the tendency to create links with a single highlighted word (here) and to describe the links somewhere else in the text Look at the following examples, with underlining to indicate link text:
Information about ostrich socialization is contained here
Select this link for a tutorial on the internal combustion engine
Because links are highlighted on the web page, the links visually pop out more than the surrounding text
(or draw the eye, in graphic design lingo) Your visitors will see the link first, before reading the text
Try creating links this way
Figure 16.16 shows a particularly heinous example of the "Here" syndrome Close your eyes, open them quickly, pick a "here" in the figure at random, and then see how long it takes you to find out what the
"here" is for
Trang 4Figure 16.16 DON'T: The "Here" syndrome.
[View full size image]
Now try the same exercise with a well-organized link menu of the same information, as shown in Figure 16.17
Figure 16.17 DO: The same page reorganized.
[View full size image]
Because "here" says nothing about what the link is used for, your poor visitors have to search the text before and after the link itself to find out what's supposed to be "here." In paragraphs that have many occurrences of "here" or other nondescriptive links, matching up the links with what they're supposed to link to becomes difficult This forces your visitors to work harder to figure out what you mean
To Link or Not to Link
Just as with graphics, every time you create a link, consider why you're linking two pages or sections Is the link useful? Does it give your visitors more information or bring them closer to their goal? Is the link
Trang 5relevant in some way to the current content?
Each link should serve a purpose Just because you mention the word "coffee" on a page about some other topic, you don't have to link that word to the coffee home page Creating such a link may seem cute, but if a link has no relevance to the current content, it just confuses your visitors
The following list describes some of the categories of useful links in web pages If your links don't fall into one of these categories, consider the reasons why you're including them in your page:
● Explicit navigation links indicate the specific paths that visitors can take through your web pages: forward, back, up, and home These links are often indicated by navigation icons, as shown in
Figure 16.18
Figure 16.18 Explicit navigation links.
[View full size image]
● Implicit navigation links (see Figure 16.19) are different from explicit navigation links because the link text implies, but does not directly indicate, navigation between pages Link menus are the best example of this type of link The highlighting of the link text makes it apparent that you'll get more information on this topic by selecting the link, but the text itself doesn't
necessarily say so Note the major difference between explicit and implicit navigation links: If you print a page containing both, you won't be able to pick out the implicit links
Figure 16.19 Implicit navigation links.
[View full size image]
Trang 6Implicit navigation links also can include tables of contents or other overviews made up entirely
of links
● Definitions of words or concepts make excellent links, particularly if you're creating large
networks of pages that include glossaries By linking the first instance of a word to its definition, you can explain the meaning of that word to visitors who don't know what it means without distracting those who do Figure 16.20 shows an example of this type of link (You could also use
a DHTML effect to display the definition without requiring the user to follow the link.)
Figure 16.20 Definition links.
[View full size image]
● Finally, links to tangents and related information are valuable when the text content will distract from the main purpose of the page Think of tangent links as footnotes or endnotes in printed text (see Figure 16.21) They can refer to citations to other works or to additional information that's interesting, but isn't necessarily directly relevant to the point you're trying to make
Figure 16.21 Footnote links.
Trang 7[View full size image]
Be careful that you don't get carried away with definitions and tangent links You might create so many tangents that your visitors spend too much time linking elsewhere to follow the point of your original text Resist the urge to link every time you possibly can, and link only to tangents that are relevant to your own text Also, avoid duplicating the same tangentfor example, linking every instance of the letters
"WWW" on your page to the WWW Consortium's home page If you're linking twice or more to the same location on one page, consider removing most of the extra links Your visitors can select one of the other links if they're interested in the information
Note
Thanks to Nathan Torkington for his "Taxonomy of Tags," published on the www-talk mailing
list, which inspired this section
Trang 8Using Images
In Lesson 7, "Adding Images, Color, and Backgrounds," you learned all about creating and using images
in web pages This section will summarize many of those hints
Don't Overuse Images
Be careful about including a large number of images on your web page Besides the fact that each image adds to the amount of time it takes to load the page, having too many images on the same page makes
it look cluttered and distracts from the point you're trying to get across Sometimes, though, people think that the more images they include on a page, the better it is Figure 16.22 shows such an example
Figure 16.22 DON'T: Images that are too large.
[View full size image]
Trang 9Remember the hints I gave you in Lesson 7 Consider how important each image really is before you put
it on the page If an image doesn't directly contribute to the content, consider leaving it out
Use Alternatives to Images
Of course, as soon as I mention images, I also have to mention that a small minority of web users either use a web browser that doesn't support graphics or turn off image loading in their browser
Furthermore, visually impaired users need accommodation as well To make your pages accessible to the widest possible audience, you need to take the text-only browsers into account The following two solutions can help:
● Use the alt attribute of the <img> tag to automatically substitute appropriate text strings for the graphics in text-only browsers (a requirement in XHTML 1.0) Use a descriptive label to
substitute for the default [image] that appears in the place of each inline image
● If providing a single-source page for both graphical and text-only browsers becomes too much work and the result isn't acceptable, consider creating separate pages for each one: a page designed for the full-color, full-graphical browsers, and a page designed for the text-only
browsers Then allow visitors to choose one or the other from your home page
Keep Images Small
Keep in mind that each image you use is a separate network connection and takes time to load over a network This means that each image adds to the total time it takes to view the page Try to reduce the number of images on the page, and keep them small both in file size and in actual dimensions In
particular, keep the following hints in mind:
● Your page should load at an average of 3KB to 4KB per second with a 56Kbps modem
connection The entire page (text and images) shouldn't take more than 20 seconds to load; otherwise, your visitors may get annoyed and move on without reading your page This rule of thumb limits you to 60KB80KB total for everything on your page Strive to achieve that size by keeping your images small
● For larger images, consider using thumbnails on your main page and then linking to the images rather than putting them inline
● Interlace your larger GIF files or save your JPEGs as progressive JPEGs
● Save your image in both the JPEG and GIF formats to see which creates a smaller file for the type of image you're using You might also want to increase the level of compression for your JPEG images or reduce the number of colors in the palette of the GIF images to see whether you can save a significant amount of space without adversely affecting image quality
● The fewer colors you use in a GIF file, the smaller the image will be You should try to use as few colors as possible to avoid problems with system-specific color allocation
● You can reduce the physical size of your images by cropping them (using a smaller portion of the overall image) or scaling (shrinking) them When you scale an image, you might lose some of the detail
Caution
Remember that reducing the size of your images using the height attributes of the
<img> tag only makes them take up less space on the page; it doesn't affect the size
of the image file or the download speed It also has a tendency of making your images just look bad
Trang 10● You can use the width and height attributes to scale the image to a larger size than it actually is These attributes originally were Netscape-only extensions, but were added to the HTML standard with version 3.2 Note that the scaled result might not be what you expect Test this procedure before trying it
With the preceding suggestions in mind, take a second look at the images on your page You really have your heart set on using all these different images How can you put the page shown in Figure 6.22 on a diet and improve its appearance?
● The graphic at the top of the page, which displays a logo for the site, could stand some size reduction It's basically just a banner and doesn't have any links on it, so you can make it half as high That will cut the download time for the graphic roughly in half
● Another problem that needs to be addressed is that the title of the page (in this case, the name
of the site) doesn't appear anywhere as text Anyone who visits the site with graphics turned off won't know the name of the site! You need to add that to your improved version
● Those horizontal rules are a big problem First, there are too many of them Second, they
overpower the banner image because they're so much wider Third, they distract from the list of items because they create separation between them So, reduce the quantity and the size of those images for more download time savings
● The bullets that appear before each list item are way too large They could stand to be cut down
to half their size As a rule, most bullets are kept to 30 30 pixels or less
● The bullets and text were centered on the page, making the list items look very disorganized Actually, there are several different ways to use images for bullets You can make this an
"official" bulleted list, using the <ul> tag, and use CSS to specify the bullet image However, browsers running HTML 3.2 and earlier will see standard bulleted lists instead of the images Another alternative is to lay out the images and the list items in a borderless table
All the improvements I've suggested here are shown in Figure 16.23
Figure 16.23 DO: Better use of images.
[View full size image]