Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P63 pdf

Some of the things we haven't yet addressed, however, are the many different preferences and experience levels that the visitors to your site will have.. In this Lesson In today's lesson

Trang 1

5. The advantages of creating one large page are that one file is easier to maintain, the links don't break, and it mirrors real-world document structure The disadvantages are that it has a longer download time, visitors have to scroll a lot, and the structure is rigid and too linear

Exercises

1. Try your hand at reworking the example shown in Figure 16.5 Organize the

information into a definition list or a table Make it easy for the visitor to scan for the important points on the page

2. Try the same with the example shown in Figure 16.7 How can you arrange the

information so that it's easier to find the important points and links on the page?

file:///G|/1/0672328860/ch16lev1sec8.html (3 von 3) [19.12.2006 13:49:54]

Trang 2

Lesson 17 Designing for the Real World

Lesson 17 Designing for the Real World

In previous lessons, you learned about what you should and shouldn't do when you plan your website and design your pages You also learned about what makes a good or bad website There's another

important factor that you should take into consideration, and that's how to design your pages for the real world

You've already learned that the real world consists of many different users with many different computer systems who use many different browsers Some of the things we haven't yet addressed, however, are the many different preferences and experience levels that the visitors to your site will have By

anticipating these real-world needs, you can better judge how you should design your pages I'll also explain how you can make sure that your websites are usable people who are disabled and must use accessibility technologies to browse the Web

In this Lesson

In today's lesson, you'll learn some ways that you can anticipate these needs, as well as the following:

● Things to consider when you're trying to determine the preferences of your audience

● Various ways of helping users find their way around your site

● HTML code that displays the same web page in each of the XHTML 1.0 specifications

(Transitional, Frameset, and Strict)

● What accessibility is, and how to design accessible sites

● Using an accessibility validator

file:///G|/1/0672328860/ch17.html [19.12.2006 13:49:55]

Trang 3

What Is the Real World, Anyway?

What Is the Real World, Anyway?

You're probably most familiar with surfing the Internet on a computer that runs a specific operating

system, such as Windows, Mac OS X, or something similar You may think you have a pretty good idea

of what web pages look like to everyone

Throughout this book, you've learned that the view you typically see on the Web isn't the view that

everyone else sees The real world has many different computers with many different operating

systems Even if you try to design your pages for the most common operating system and the most

common browsers, there's another factor that you can't anticipate: user preference Consider the

following family, for example:

● Bill is a top-level executive at a Fortune 100 company that has its own intranet Almost everyone

in the company uses the same operating system and the same browser Bill is used to seeing the Internet as mostly text, with a smattering of images here and there to stress informational

pointsa lean and mean Web with very little multimedia and a lot of information He finds all the extra glitz annoying and inconvenient to download, so he turns off JavaScript and Flash

● Bill's wife, Susan, has never used a computer before, but she has always wanted to learn She's

a genealogist by hobby and has learned that the Internet has many resources in that field She also wants to publish her family history on the Web When she and her husband got their cable modem hooked up, she was thrilled But soon she was asking questions such as, "Can we fit more on the screen? Those letters are a bit too small can we make them larger? Where are the pictures? How come you have the music turned off? It says that there's sound on this page!" She already wanted to see the Internet much differently than what her husband was used to seeing

● Bill and Susan have a son, Tom, who's in high school He's an avid gamer and wants to see

special effectsglitz, multimedia! He pumps up the volume as loud as he can and pushes the

capacities of their new computer to the max He also thinks "Browser X" is better than "Browser Y" because it supports lots of cutting-edge features He wants to design a website that provides hints, tips, and tricks for one of his favorite online games

● Tom's older sister, Jill, is an art major in college, studying to be a commercial artist She has a keen interest in sculpture and photography She plans to use her new computer for homework assignments, so she'll be looking at the Web with a keen visual interest She wants to view her pages in true color, in the highest resolution possible

● Then there are the senior members 533 the family, Susan's aging parents, who have recently moved in with the family after years of living in a rural town Their experience with computers is minimalthey've only seen them in stores They're interested in learning so that they can view family photos online and exchange email with out of town relatives, but Dad's eyes aren't quite

as sharp as they used to be He needs a special browser so that he can hear the text as well as see it

All these people are using the same computer and operating system to view the Web In all cases but one (young Tom), they're also using the same browser This example illustrates one of the other things that you need to think about when you design your website: the needs of the users themselves Some

of these needs are easier to accommodate than others The following section describes some of the

considerations you saw in the previous example

file:///G|/1/0672328860/ch17lev1sec1.html [19.12.2006 13:49:55]

Trang 4

Considering User Experience Level

Considering User Experience Level

There are varied levels of experience in our fictitious family Although everyone is keenly interested in the Web, some of them have never even seen a Web browser before When you design your site, you should consider that the people who visit it might have varying levels of experience and browsing

requirements

Will the topics that you discuss on your site be of interest to people with different levels of experience?

If so, you might want to build in some features that help them find their way around more easily The key, of course, is to make your navigation as intuitive as possible By keeping your navigation scheme consistent from page to page throughout the site, you'll do a favor for users of all experience levels There are a number of features you can add to your site that will improve its usability for everyone

Add a Search Engine

Many users go straight to the search engine when they want to find something on a site No matter how much time and effort you put into building a clear, obvious navigation scheme, someone looking for information about Frisbees is going to look for a box on your page where they can type in the word

"Frisbee" and get back a list of the pages where you talk about them

Unfortunately, locating a good search engine package and setting it up can be an awful lot of work, and difficult to maintain On the other hand, there are some alternatives Some search engines enable you

to search a specific site for information You can add a link to them from your site Some search engines even allow you to set things up so that you can add their search engine to your site, such as Google:

http://www.google.com/services/free.html

By signing up, you can add a search box to your site that enables your users to search only pages on your own site for information For a list of other ways to add search functionality to your site, see the following page in the Mozilla Directory:

http://dmoz.org/Computers/Software/Internet/Servers/Search/

Use Frames Wisely

One failing of some HTML books is that they tell you about all the different techniques you can use to create Web pages, but they don't offer any comparative information that explains when and how these techniques ought to be used For example, I've devoted a number of pages to discussing frames, but the fact is that they should really be used only when nothing else will work For example, putting all of your navigation in one frame and your content in another just because you can is generally a poor idea

Frames have a couple of specific disadvantages that make them unsuitable for use in many cases The first is that they make it hard for users to bookmark inner pages on sites If your entire site is a

frameset, the URL in the user's location bar never changes as the user navigates within the site When the user gets to your inner page that has a wonderful recipe for chocolate chip cookies that your

grandmother gave you, he'll have a hard time bookmarking it because his browser wants to bookmark the top-level frameset itself When he returns on future visits, he'll be taken back to your home page

The second issue that's common with framesets is that they can interfere with search engines Again, if your entire site is inside a frameset, when a search engine fetches your home page, it's probably going

to get a page with no real content to speak of Then, it will download, say, the navigation frame, which

Trang 5

lacks context, the content frame, which may lack header and footer information, and on and on If you want people to be able to find your site using search engines, frames can get in your way

There are also other issues people have had with framesets in the past, like problems printing and

problems with the back button Browsers mostly compensate for these issues today, but even so,

frames can confuse your users In some cases, there's just no other good way to attack a problem, but you should always make sure that there's not a better way before going the frames route

Use Concise, Sensible URLs

One common mistake made by web designers is not considering how users share URLs If your site is interesting at all, people are going to email the URL to their friends, paste it into instant messaging conversations, and talk about it around the water cooler Making your URLs short and easy to remember makes them that much easier for people to share

There's a reason why people have paid huge sums for domain names like business.com and computers com in the past They're easy to remember and you don't have to spell them out when you tell them to people

You may not have any control over your domain name, but you can exercise control over the rest of your URLs Say that you have a section of your site called "Products and Services." All the pages in that section are stored in their own directory You could call it any one of the following:

/ps

/prdsvcs

/products

/products_services

/products_and_services

There are plenty of other options as well (you could call it /massapequa if you wanted to), but the

preceding list seems like a reasonable group of options Of the list, a few stand out to me as being poor choices /products_service and /products_and_services just seem too verbose If the pages under those directories have long names at all, you're suddenly in very long URL territory, which isn't conducive to sharing On the other hand /prdsvcs may be short, but it's also difficult to remember, and almost

certainly has to be spelled out if you tell it to anyone It's probably no good That leaves two remaining choices: /ps and /products The first, /ps, is nice and short, and probably easy to remember Using it would be fine However, there's one other principle of URLs that I want to talk aboutguessability

Chances are that most of the people who visit your website have been using the Web for awhile There's some chance that they might just assume that they know where to go on your site based on experience

If they want to read about your products, they may guessbased on their experience with other sites they've visitedthat your products will be listed at http://www.your-url.com/products Any time you can put your content where your users will assume it to be, you're doing them a favor Using standard

directory names such as /about, /contact, and /products can make things ever so slightly easier for your users at no cost to you

My final bit of advice on URLs is to make sure that they reflect the structure of your site One time, I worked on a site that consisted of hundreds of files, all in a single directory The site itself had structure, but the files were not organized based on that structure Whether the user was on the home page or five levels deep within the site, the URL was still just a filename tagged onto the hostname of the

server Not only did this make the site hard to work on, but it also kept some useful information away from users Let's say you have a site about cars What's more useful to your users? This:

Trang 6

http://www.example.com/camry.html

or

http://www.example.com/cars/toyota/2003/camry.html

The second URL provides a lot more information to the user than the first one does As an added bonus, you can set up your site so that the user can take camry.html off the end and get a list of all Toyota models for 2003, or take toyota/2003/camry.html off the end and get a list of all car makes discussed on the site Veteran web users are accustomed to dealing with URLs; you should help them out as much as you can by using URLs responsibly

Navigation Provides Context

The key purpose of navigation is obviously to enable your users to get from one place to another within your site However, its secondary purpose is to let your users know where they are within the site This was the stroke of genius behind Yahoo!'s introduction of "breadcrumb" navigation in its directory Take a look at the screenshot from Yahoo!'s directory in Figure 17.1

Figure 17.1 A page from Yahoo!'s directory.

[View full size image]

Near the top, you can see a list of links that start at the top of the directory and lead down to the page that I'm actually on The first thing it does is give me the ability to go back to any level of the directory

Trang 7

between the home page and the Photojournalism page that I'm actually on The second thing it does is let me know that I'm six levels into the directory, and that the page I'm on is part of the Arts category

of the directory, and all the subcategories between that category and the page that I'm on That's a lot

of utility packed into a small feature

Not all sites have as large and complex a structure as Yahoo!, but you can still provide context for your users through your navigation scheme By altering your navigational elements based on the page that the user is on, you can indicate to them not only where she can go but also where she is This is also particularly helpful to users who arrive at your site not via the home page, but from an external link Enabling users to immediately deduce where they are in the larger scheme of things makes it more

likely that they'll take in more of your site

Are Your Users Tourists or Regulars?

When you're designing a site, especially one that uses forms, one of the key questions you have to ask yourself is whether your users are tourists or regulars If your users are tourists, which means that they don't use your site very often, or will probably only ever use it one time, you should design your site so that the first-timer can easily figure out what he should be doing and where he needs to go This may annoy regular users who already know where they're going, but in some cases you have to cater to

tourists

On the other hand, if your site is normally used by the same existing group of users who come back once a day or once a week, your emphasis should be on providing shortcuts and conveniences that

enable them to use your site as efficiently as possible It's okay if it takes a bit of work to learn about the conveniences, because it's worth your users' time

Clearly, the secret is to strike a balance here The holy grail is a site that's obvious and clear to new users but also provides the features that repeat users crave However, understanding what sort of

audience you have can help you determine how to assign your resources

All of this is doubly true with forms The forms that are part of a discussion board used by the same people day after day will be designed much differently from those that are part of a

request-more-information form on a product page When you design a form, always think about the type of user who'll

be using it

Trang 8

Determining User Preference

Determining User Preference

In addition to the various levels of experience that visitors have, everyone has his own preferences for

how he wants to view your web pages How do you please them all? The truth is, you can't But you can

give it your best shot Part of good web design is anticipating what visitors want to see on your site This becomes more difficult if the topics you discuss on your site are of interest to a wider audience

You'll notice that each person in our fictitious family needs to see the Web differently Sometimes this is due to his or her interests, but other times it's because of special needs Therein lies the key to

anticipating what you'll need on your web pages

A topic such as "Timing the Sparkplugs on Your 300cc Motorcycle Engine" is of interest to a more select audience It will attract only those who are interested in motorcyclesmore specifically, those who want

to repair their own motorcycles It should be relatively easy to anticipate the types of things these

visitors would like to see on your site Step-by-step instructions can guide them through each process, while images or multimedia can display techniques that are difficult to describe using text alone

"The Seven Wonders of the Ancient World," on the other hand, will attract students of all ages as well as their teachers Archaeologists, historians, and others with an interest in ancient history also might visit the site Now you have a wider audience, a wider age range, and a wider range of educational levels It won't be quite as easy to build a site that will please them all

In cases such as this, it might help to narrow your focus a bit One way is to design your site for a

specific user group, such as the following:

● Elementary school students and their teachers This site requires a very basic navigation

system that's easy to follow Content should be basic and very easy to read Bright, colorful

images and animations can help keep the attention of young visitors

● High school students and their teachers You can use a slightly more advanced navigation

system Multimedia and the latest in web technology will keep these students coming back for more

● College students and their professors A higher level of content is necessary, whereas

multimedia may be less important An online encyclopedia format might be a good approach here

● Professional researchers and historians This type of site probably requires pages that are

heavier in text content than multimedia

It's not always possible to define user groups for your website, so you'll need to start with your own

preferences Survey other sites that include similar content As you browse through them, ask yourself what you hope to see there Is the information displayed well? Is there enough help on the site? Does the site have too much or too little multimedia? If you can get a friend or two to do the survey along with you, it helps you get additional feedback before you start your own site Take notes and incorporate those ideas into your own web pages

After you design some initial pages, ask your friends, family members, and associates to browse

through your site and pick it apart Keep in mind that when you ask others for constructive criticism, you might hear some things that you don't want to hear However, this process is important because you'll often get many new ideas on how to improve your site even more

file:///G|/1/0672328860/ch17lev1sec3.html [19.12.2006 13:49:56]

Trang 9

Deciding on an HTML 4.01 or XHTML 1.0 Approach

Deciding on an HTML 4.01 or XHTML 1.0 Approach

First, let me explain the difference between HTML 4.01 and XHTML 1.0 The HTML specification dictates which HTML tags are valid XHTML describes how to write HTML so that it conforms to the XML

specification When you want to know whether a particular tag or attribute is valid, check out the HTML specification When you want to know how to close a tag that has no closing tag, such as , consult with the XHTML spec In earlier lessons, you learned about the various flavors of HTML 4.01 and XHTML 1.0 and how each of them is geared toward users of older or newer browsers:

● HTML 4.01 or XHTML 1.0 Transitional For those who want to provide support for older

browsers

● HTML 4.01 or XHTML 1.0 Frameset For sites that want to use frames in a standards-compliant

manner

● HTML 4.01 or XHTML 1.0 Strict For those who want to develop pages that strictly adhere to

the HTML 4.0 or XHTML 1.0 specification by not using deprecated elements or attributes

HTML 4.01 and XHTML 1.0 Transitional

If you expect your visitors to use a wide variety of different browsers, it's probably to your advantage to design your web pages around the HTML 4.01 or XHTML 1.0 Transitional specification By doing so, you provide backward compatibility with older browsers The Transitional specification provides the flexibility

to use tags that are deprecated in the strict HTML 4.01 specification Therefore, you can use

presentation attributes that were introduced in HTML 3.2, such as the center or align attribute for

alignment or bgcolor and color attributes for background and foreground colors

For example, look at the Halloween House of Terror page that you created in Lesson 7, "Adding Images, Color, and Backgrounds." Here, the page has undergone yet another facelift, as shown in the following code This page uses HTML 3.2-compatible tags to display the page Fonts, colors, and alignment are formatted with tags that have been deprecated in the Strict specification

The deprecated tags and attributes are shown in italics in the following code example In addition, a table is used to create a staggered layout of links, descriptions, and images on the page

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Welcome to the Halloween House of Terror</title>

</head>

<body bgcolor="#ff9933" link="#990000">

<h1 align="center">

The Halloween House of Terror!!</h1>

<div align="center">

<img src="skel05.gif" alt="skel05.gif" width="140" height="100" />

Trang 10

Deciding on an HTML 4.01 or XHTML 1.0 Approach

</div>

<hr />

Voted the most frightening haunted house three years in a row, the

Halloween House of Terror

provides the ultimate in Halloween thrills Over 20 rooms of thrills and excitement to make your blood run cold and your

hair stand on end!

<hr />

Don't take our word for it preview some images of what awaits!

<div align="center">

<table border="0" width="75%" cellspacing="5" cellpadding="5">

<tr>

<td width="30%">

<img src="skel01.gif" alt="skel01.gif" width="140" height="100" /> 

</td>

<td width="40%" bgcolor="#CC0000"> 

Watch out for Esmerelda You never know what she has in her cauldron

 </td>

<th width="30%" bgcolor="#FF6600"> <a href="entry.gif">The Entry Way</a> </th>

</tr>

<tr>

<th width="30%" bgcolor="#FF6600"> <a href="bedroom.gif">The Master Bedroom</a> </th>

Don't open the closet door, whatever you do!</td>

<td width="30%">

</td>

</tr>

<tr> <td width="30%">

</td>

More than a few innocents have been cast in chains for eons They just

aren't the same anymore </td>

<th width="30%" bgcolor="#FF6600"> 

<a href="galley.gif"> The Galley</a></th>

</tr>

<tr>

<th width="30%" bgcolor="#FF6600"> 

<a href="dungeon.gif"> The Dungeon</a> </th>

Định dạng
Số trang	10
Dung lượng	177,6 KB