Using Images Watch Out for Assumptions About Your Visitors' Hardware Many web designers create problems for their visitors by making a couple of careless assumptions about their hardware. When you're developing web pages, be kind and remember that not everyone has the same screen and browser dimensions as you do. Just because that huge GIF you created is narrow enough to fit in your browser doesn't mean that it'll fit in someone else's. An image that's too wide is annoying because the visitors need to resize their windows or scroll sideways. To fit within a majority of browsers, try to keep the width of your images to fewer than 600 pixels or, even better, don't set the page width to a specific amount. Be Careful with Backgrounds and Link Colors Using HTML extensions, you can use background colors and patterns on your pages and change the color of the text. This can be very tempting, but be very careful. Changing the page and font colors and providing fancy backdrops can quickly and easily make your pages entirely unreadable. The following are some hints for avoiding these problems: ● Make sure you have enough contrast between the background and foreground (text) colors Low contrast can be hard to read. Also, light-colored text on a dark background is harder file:///G|/1/0672328860/ch16lev1sec5.html (4 von 5) [19.12.2006 13:49:53] Using Images to read than dark text on a light background. ● Increasing the font size of all the text on your page can sometimes make it more readable on a low-contrast background You can use the <basefont> tag or Cascading Style Sheets to increase the default font size for your page. ● If you're using a background image, make sure that it doesn't interfere with the text Some images may look interesting on their own but can make text difficult to read when you put it on top of them. Keep in mind that backgrounds are supposed to be in the background. Subtle patterns are always better than wild patterns. Your visitors are visiting your pages for their content, not to marvel at your ability to create faux marble in your favorite image editor. When in doubt, try asking a friend to look at your pages. Because you're already familiar with the content, you may not realize how hard your pages are to read. Someone who hasn't read them before will be able to tell you that your text colors are too close to your background color, or that the background image is interfering with the text. Of course, you'll have to find a friend who will be honest with you. file:///G|/1/0672328860/ch16lev1sec5.html (5 von 5) [19.12.2006 13:49:53] Other Good Habits and Hints Other Good Habits and Hints In this section, I've gathered several other miscellaneous hints and advice about working with groups of web pages. This includes notes on how big to make each page and how to sign your pages. Link Back to Home Consider linking back to the top level or home page on every page of your site. This link will give visitors a quick escape from the depths of your site. Using a home link is much easier than trying to navigate backward through a hierarchy or repeatedly clicking the Back button. This is especially important since the visitors to most sites are directed there by search engines. If a search engine leads users to an internal page on your site, you'll want to give them a way to find their way to the top. Don't Split Topics Across Pages Each web page works best if it covers a single topic in its entirety. Don't split topics across pages; even if you link between them, the transition can be confusing. It will be even more confusing if someone jumps in on the second or third page and wonders what's going on. If you think that one topic is becoming too large for a single page, consider reorganizing the page so that you can break up the topic into subtopics. This tip works especially well in hierarchical organizations. It enables you to determine the exact level of detail that each level of the hierarchy should go and exactly how big and complete each page should be. Don't Create Too Many or Too Few Pages There are no rules for how many pages your website must have, nor for how large each page should be. You can have one page or several thousand, depending on the amount of content you have and how you've organized it. With this point in mind, you might decide to go to one extreme or another. Each one has advantages and disadvantages. For example, let's say that you put all your content on one big page and create links to sections within that page, as illustrated in Figure 16.24. Figure 16.24. One big page. file:///G|/1/0672328860/ch16lev1sec6.html (1 von 5) [19.12.2006 13:49:53] Other Good Habits and Hints Advantages: ● One file is easier to maintain, and links within that file won't ever break if you move elements around or rename files. ● This file mirrors real-world document structure. If you're distributing documents both online and in hard copy, having a single document for both makes producing them easier. Disadvantages: ● A large file can take a long time to download, particularly if the visitor has a slow network connection and the page includes a large number of images. ● Visitors must scroll a lot to find what they want, and accessing particular bits of information can become tedious. Navigating anywhere other than at the top or bottom becomes close to impossible. ● The structure is overly rigid. A single page is inherently linear. Although visitors can skip around within the page, the structure still mirrors that of the printed page and doesn't take advantage of the flexibility of smaller pages linked in a nonlinear fashion. At the other extreme, you could create a whole bunch of little pages with links between them, as illustrated in Figure 16.25. file:///G|/1/0672328860/ch16lev1sec6.html (2 von 5) [19.12.2006 13:49:53] Other Good Habits and Hints Figure 16.25. Many little pages. Advantages: ● Smaller pages load very quickly. ● You can often fit the entire page on one screen, so the information can be scanned very easily. Disadvantages: ● Maintaining all those links will be a nightmare. Just adding some sort of navigational structure to that many pages may create thousands of links. ● If you have too many links between pages, the links may seem jarring. Continuity is difficult when your visitors spend more time moving from page to page than actually reading. What's the solution? The content you're describing will often determine the size and number of pages you need, especially if you follow the one-topic-per-page suggestion. Testing your web pages on a variety of platforms at different network speeds will tell you whether a single page is too large. If you spend a lot of time scrolling around in your page, or if it takes more time to load than you expected, it may be too large. Sign Your Pages Each page should contain some sort of information at the bottom to act as the signature. I mentioned this tip briefly in Lesson 6, "Formatting Text with HTML and CSS," as part of the description of the <address> tag. That particular tag was intended for just this purpose. Consider putting the following useful information in the <address> tag on each page: file:///G|/1/0672328860/ch16lev1sec6.html (3 von 5) [19.12.2006 13:49:53] Other Good Habits and Hints ● Contact information for the person who created this web page or who is responsible for it, colloquially known as the webmaster. This information should include the person's name and an email address, at the least. ● The status of the page. Is it complete? Is it a work in progress? Is it intentionally left blank? ● The date this page was most recently revised. This information is particularly important for pages that change often. Include a date on each page so that people know how old it is. ● Copyright or trademark information, if it applies. Figure 16.26 shows a nice example of an address block. Figure 16.26. A sample address. Another nice touch is to link a Mailto URL to the text containing the email address of the Webmaster, as in the following: <address> Laura Lemay <a href="mailto:lemay@lne.com">lemay@lne.com</a> </address> This way, the visitors who have browsers that support the Mailto URL can simply select the link and send mail to the person responsible for the page without having to retype the address into their mail programs. Note One downside of putting your email address on your web page is that there are programs that search websites for email addresses and add them to lists that are sold to spammers. You'll want to consider that risk before posting your email address on a public web page. Finally, if you don't want to clutter each page with a lot of personal contact information or boilerplate copyright info, a simple solution is to create a separate page for the extra information and then link the signature to that page. Here's an example: <address> <a href="copyright.html">Copyright</a> and file:///G|/1/0672328860/ch16lev1sec6.html (4 von 5) [19.12.2006 13:49:53] Other Good Habits and Hints <a href="webmaster.html">contact</a> information is available. </address> Provide Nonhypertext Versions of Hypertext Pages Although the Web provides a way to publish information in new and exciting ways, some visitors still like to print things off to read on the bus or at the breakfast table. These kinds of visitors have real problems with web pages because it's difficult to tell your browser to print the whole thing. The browser knows only the boundaries of individual pages. If you're using the Web to publish anything that might be readable and usable offline, consider creating a text or PDF version that's available as an external document for downloading, or even just publishing your information on one page without navigational elements or excessive layout. This way, your visitors can both browse the document online, print it out for reading offline, or even just save it to their local drive so that they can read it on their computer when it's not connected to the network. You can link the location of the hard-copy document to the start of the hypertext version, like the following: A <a href="ftp://myhome.com/pub/mydir/myfile.pdf">PDF version</a> of this document is available via ftp at myhome.com in the directory /pub/mydir/ myfile.pdf. Of course, a handy cross-reference for the hard-copy version would be to provide the URL for the hypertext version, as follows: This document is also available on hypertext form on the World Wide Web at the URL: http://myhome.com/pub/mydir/myfile.index.html. file:///G|/1/0672328860/ch16lev1sec6.html (5 von 5) [19.12.2006 13:49:53] Summary Summary The main do's and don'ts for web page design are as follows: ● Do understand the differences between HTML 2.0, HTML 3.2, and the different flavors of HTML 4.01 and XHTML 1.0. Decide which design strategy to follow while using them. ● Do provide alternatives if at all possible if you use nonstandard HTML tags. ● Do test your pages in multiple browsers. ● Do write your pages clearly and concisely. ● Do organize the text of your page so that your visitors can scan for important information. ● Do spell check and proofread your pages. ● Do group related information both semantically (through the organization of the content) and visually (by using headings or separating sections with rule lines). ● Do use a consistent layout across all your pages. ● Do use link menus to organize your links for quick scanning, and do use descriptive links. ● Do have good reasons for using links. ● Do keep your layout simple. ● Do provide alternatives to images for text-only browsers. ● Do try to keep your images small so that they load faster over the network. ● Do be careful with backgrounds and colored text to avoid making your pages flashy but unreadable. ● Do always provide a link back to your home page. ● Do match topics with pages. ● Do provide a signature block or link to contact information at the bottom of each page. ● Do provide single-page, nonhypertext versions of linear documents. ● Do write context-independent pages. ● Don't link to irrelevant material. ● Don't write web pages that are dependent on pages before or after them in the structure. ● Don't overuse emphasis (such as boldface, italic, all caps, link text, blink, or marquees). ● Don't use terminology that's specific to any one browser ("click here," "use the Back button," and so on). ● Don't use heading tags to provide emphasis. ● Don't fall victim to the "Here" syndrome with your links. ● Don't link repeatedly to the same site on the same page. ● Don't clutter the page with a large number of pretty but unnecessary images. ● Don't split individual topics across pages. file:///G|/1/0672328860/ch16lev1sec7.html [19.12.2006 13:49:54] Workshop Workshop Put on your thinking cap again because it's time for another review. These questions, quizzes, and exercises will remind you about the items that you should (or should not) include on your pages. Q&A Q I've seen statistics that say the majority of people on the Web are using Internet Explorer. Why should I continue designing and testing my pages for other browsers when most of the world is using one browser? A You can design your pages explicitly for Internet Explorer. Your pages are your pages, and the decision is yours. But, given how easy it is to make small modifications so your pages can be viewed and read in other browsers without losing much of the design, why lock out the remainder of your audience for the sake of a few tags? Remember, the Web is growing all the time, and that "small" minority of visitors could very well be a million people or more. Q I'm converting existing documents into web pages. These documents are very text-heavy and are intended to be read from start to finish instead of being scanned quickly. I can't restructure or redesign the content to better follow the guidelines you've suggestedthat's not my job. What can I do? A All is not lost. You can still improve the overall presentation of these documents by providing reasonable indexes to the content (summaries, tables of contents pages, subject indexes, and so on) and including standard navigation links. In other words, you can create an easily navigable framework around the documents themselves. This can go a long way toward improving content that's otherwise difficult to read online. Q I have a standard signature block that contains my name and email address, revision information for the page, and a couple of lines of copyright information that my company's lawyers insisted on. It's a little imposing, particularly on small pages. Sometimes the signature is bigger than the page itself! How do I integrate it into my site so that it isn't so obtrusive? A If your company's lawyers agree, consider putting all your contact and copyright information on a separate page and then linking to it on every page rather than duplicating it every time. This way, your pages won't be overwhelmed by the legal stuff. Also, if the signature changes, you won't have to change it on every single page. Failing that, you can always just reduce the font size for that block and perhaps change the font color to something with less contrast to the background of the page. This indicates to users that they're looking at fine print. file:///G|/1/0672328860/ch16lev1sec8.html (1 von 3) [19.12.2006 13:49:54] Workshop Quiz 1. What are the three flavors of XHTML 1.0, and which of these three accommodates the widest range of markup? 2. What are some ways you can organize your pages so that visitors can scan them more easily? 3. True or false: Headings are useful when you want information to stand out because they make the text large and bold. 4. True or false: You can reduce the download time of an image by using the width and height attributes of the <img> tag to scale down the image. 5. What are the advantages and disadvantages of creating one big web page versus several smaller ones? Quiz Answers 1. The three flavors of XHTML 1.0 are Transitional (designed for the widest range of markup, including tags that are deprecated in the standard), Frameset (which includes all tags in the Transitional specification, plus those for framesets), and Strict (for those who want to stick to pure XHTML 1.0 tags and attributes). 2. You can use headings to summarize topics, lists to organize and display information, and link menus for navigation, and you can separate long paragraphs with important information into shorter paragraphs. 3. False. You should use headings as headings and nothing else. You can emphasize text in other ways, or use a graphic to draw attention to an important point. 4. False. When you use the width and height attributes to make a large image appear smaller on your page, it may reduce the dimensions of the file, but it won't decrease the download time. The visitor still downloads the same image, but the browser just fits it into a smaller space. file:///G|/1/0672328860/ch16lev1sec8.html (2 von 3) [19.12.2006 13:49:54] . paragraphs with important information into shorter paragraphs. 3. False. You should use headings as headings and nothing else. You can emphasize text in other ways, or use a graphic to draw. subject indexes, and so on) and including standard navigation links. In other words, you can create an easily navigable framework around the documents themselves. This can go a long way toward. improving content that's otherwise difficult to read online. Q I have a standard signature block that contains my name and email address, revision information for the page, and a couple of lines