Index

A List Apart site 69, 196

A-Z Index 207

ABBR tag 183, 190

abbreviations 49, 50, 189–191

About.com site 77

access by design xviii

accessibility xvii, 18. See also universal design

Accessible Design in the Digital World Conference xi

ACM x, xi

Acrobat Reader 30

ACRONYM tag 183, 190

acronyms 49, 50, 189–191

ActiveX 173

Adobe site 133

alert text 158, 160

ALT attribute 28, 77–79

alt-text 77–83

for image links 152–153

for irrelevant/redundant images 81–83

providing blank 81–83, 201

for relevant images 77–80

alternate formats 23–24, 28, 166–168

alternate text. See alt-text

Amazon site 11, 135

animated images 76–77

AnyWho site 35

Association for Computing Machinery x, xi

Atlantic site 63, 100

Audible.com site 58, 143

audio content 165–171

allowing users to control 170–171

challenges presented by 163

providing alternate formats for 166–168

providing keyboard access to 169–170

providing text for 164–165

types of 164

aural styles 50

B tag 43, 48, 49

back button 19–20, 112, 148, 204

background color 64–65, 157

background images 80

background music 170

background patterns 76–77

base text size 60–61

BBC site 55

Berners-Lee, Tim xi, xiii, 16

bitmap images 85

blank alt-text 81–83, 201

BLOCKQUOTE tag 48, 49

Blogger site 60, 215

BODY tag 48

bookmarking 111, 112

BORDER attribute 99

Boxes and Arrows site 47, 196

BR tag 48, 49

branding 195

breadcrumb navigation 150, 151, 204

brightness contrast 156–157

Bringhurst, Robert xvi, 23

Bronx Zoo site 90

browsers

and CSS 44, 50, 100–101

and frames-based pages 111

and graphic text 75

how text is displayed by 6

and layout tables 97

and text size 39

for visual vs. nonvisual users 3

bulleted lists 184

cameras ix

CAPTION tag 94–95, 97

captions 62, 80–81, 94–95, 164, 165

Cascading Style Sheets. See CSS

cataloging images 83

CDC site 207

Census Bureau site 94

checkboxes 137, 138

Chicago Manual of Style 201

Chronicle of Higher Education site 107

citations 48–49

CNET site 209

color 155–161

allowing users to override 160–161

background 64–65

basic principles regarding 155–160

contrast considerations 64–65, 155–157

conveying information with 66–67, 158–160

as design tool 155

for links 147, 149

and nonvisual users 66–67, 155, 158–160

reinforcing with text 159–160

for text 64–67, 157, 159–160

unpredictability of 37

using style sheets to set 65–66

and visual users 155, 158–160

Color Contrast Analyzer software 156

column headings, table 93–94

communication function, Web page 4–5

compound lists 122–123

compression schemes 85

Computer User High-Tech Dictionary site 116

Conference on Universal Usability xi

conferences, Web design xi

content

allowing quick access to 214

audio (See audio content)

balancing navigation and 203–205

encoding with structural tags 49, 67–69

grouping related 197

keeping fresh/current 188–189

positioning important 213–215

providing universal access to 44–45

separating presentation and 43, 44–47

video (See video content)

content layer, Web design xx

contrast, color 64–65, 155–157

conventions, design 201–203

Copyright site 32

Creative Commons site 82

CSS. See also style sheets

assigning cell widths with 108

benefits of 50–52

browser support for 44, 50, 100–101

meaning of acronym 44

and navigation design 121

as page layout tool 100–101

styling text with 59

vs. HTML 46–47

ways of using 46–47

CSS Zen Garden site 50, 51

data tables 89–95

basic principles of 90–93

displaying captions with 94–95

drawbacks to 89

identifying columns/rows in 93–94

simplifying layouts for 92–93

summarizing contents of 94–95

when to use 89, 91

design. See also Web design

collaborative 14

defined xxi

fixed 14–18, 25

flexible 17, 18–21, 25

functional basis for 1–2

graphic xvi, 14

information xvi

principles (See design principles)

simple vs. flashy 26–27

for transformation 18, 36–38

universal xviii, 8–9

user-centered xvii, xviii–xix, 15, 39

design principles

audio/video 164–171

color 155–160

data tables 90–93

document structure 44–53

editorial style 184–189

forms 126–129

frames 112–114

images 72–77

interactivity 175–179

layout tables 99–103

links 143–146

lists 120–123

page layout 194–208

text 58–59

designers xxi–xxii. See also Web designers

Designing the User Interface xix

device independence 44–45

dialogue 164. See also audio content

digital cameras ix

digital media 166

Digital Web Magazine site 151

Dignubia site 167

disabilities, Web access for users with xvii, 18. See also universal usability

Disability Status table 95

display resolution 194

DOCTYPE declaration 53

document structure 43–55

general principles regarding 44–53

how software derives meaning from 6–7, 48

marking up 48–49

separating content and presentation in 44–47

writing valid code for 53

document type declaration 53

documents

compatibility problems with 43

dealing with long 92, 191

device-independent format for 43

marking language changes in 189

providing print option for 191

structured 6–7 (See also document structure)

supporting skimming of 145–146, 183, 185–186

Dreyfus, Henry xiv

Eastman, George ix

Ed.gov site 61

editorial style 183–191

basic principles regarding 184–189

breaking text into segments 184–185

clarity/conciseness in 186

identifying abbreviations/acronyms 189–191

marking language changes 189

providing keywords 185–186

providing print option 191

using appropriate language/terminology 187

Elements of Style, The 186

Elements of Typographical Design, The 23

embedded media content 170

embedded styles 54–55, 59

emphasized words 49

Envisioning Information 26

Epinions site 153

ESPN 15

Evolt.org site 190

Expedia site 175

external style sheets 59

fallbacks 23, 28

Fast Company site 40, 212

FIELDSET tag 131

fixed design 14–18, 25

fixed layouts 12, 63, 106–107

Flash 30, 133, 173, 175, 180

flexibility, Web page 8–9, 11–14, 25

flexible design 17, 18–21, 25

flexible layouts 11–14, 64, 106–108, 208–211

FONT tag 43, 48, 49

footnotes 62

form design 125–129

form fields. See also forms

associating related 131

auto-populating fields in 135–137

labeling 126, 129–131, 137

“form follows function” formula 1–2

forms 126–139

applying logical sequence to elements in 134

associating related fields in 125, 131

auto-populating fields in 135–137

avoiding redundancy in 128

basic principles regarding 126–129

designing 125–128

grouping related elements in 125, 127

labeling fields in 126, 129–131, 137

and nonvisual users 130, 134

providing alternate to 126, 128–129

providing keyboard access to 132–134

purpose of 125

using menu-style elements in 137–139

frame titles 114–115

frames 111–117

avoiding use of 112–114

and back button 112

basic principles regarding 112–114

and bookmarking 111, 112

browser considerations 111

defined 111

identifying functions of 114–115

and nonvisual users 111–112, 113, 114–115

printing considerations 111, 112

pros and cons of 111–112

providing alternative to 115–117

FRAMESET tag 114

framesets 112

function

defining 2–5

form vs., 1–2, 10

providing 10–21

functional layer, Web design xix–xx

GIF images 85

global navigation 204

Google site 20

graphic design xvi, 14

graphic text 58–59, 75–76

H1-6 tags 7, 43, 49, 213

headings

controlling size/style of 43, 46

placing keywords in 185–186

sizing relative to other text elements 62

table column/row 93–94

tags for 49, 213 (See also H1-6 tags)

HTML

device-independent nature of 43

and page-level interactivity 175–176

structural tags 49, 50, 67–69

vs. alternate formats 24, 30–33

Hubble site 17, 148

hue 157

I tag 48, 49

Iberia site 174

IBM Accessibility Center site 149

IBM Contact form 139

IBM Ease of Use site 38, 184

IBM News site 98

ID attribute 130

image captions 80–81

image cataloging 83

image formats 85

image links 141, 144, 152–153

image maps 80, 152

images 71–87

animated 76–77

basic principles regarding 72–77

browser considerations 75

commonly used formats for 85

identifying irrelevant/redundant 81–83

maintaining catalog of 83

printed vs. Web 71

providing full text description of 80–81

providing text alternates for 77–83

saving 85

size considerations 83–87

using thumbnails for large 86–87

when to use 72–74

IMG tag 28, 77, 80

information architecture xvi

information design xvi

InformIT site 191, 205

InfoSpace site 130

initialisms 190

inline links 142

inline styles 59

interaction function, Web page 5, 173–174. See also interactivity

interactive controls 33–35

interactive elements, labeling 34–35

interactivity 173–181

allowing users to control 176–178

basic principles regarding 175–179

defined 178

and nonvisual users 178

providing alternate for 180–181

providing keyboard access to 178–179

using add-ons for 175–176

Web support for 173–174

interface, allowing users to control 176–178

interface design xvi, xviii–xix

interface layer, Web design xx

invisible tables 89, 97, 99

Java 30, 175

Java applets 173

JavaScript 133, 135, 175, 176, 180

JAWS 185

Jefferson, Thomas xi, xiii

John F. Kennedy International Airport site 179

JPEG images 84, 85

keyboard access, designing for 33–35, 194–195

keyboard accessibility

for audio/video content 169–170

for forms 132–134

and HTML 30

for interactivity 24, 178–179

KidsHealth site 36, 141

LABEL FOR tag 35, 130–131

labeling

form fields 126, 129–131, 137

links 35

page elements 34–35

LANG attribute 183, 189

language

accessible 183

marking changes in 189

using appropriate 187

languages, markup 48

layout tables 97–108

avoiding complexity in 101–103

basic principles regarding 99–103

designing for linear access 104–106

limiting use of tags in 104

and nonvisual users 98, 102, 104

popularity of 99

and screen reader software 101, 104

using flexible cell widths in 106–108

vs. other page layout techniques 97–101

layouts. See also page layout

fixed vs. flexible 11–14, 63–64, 106–108, 208–211

multicolumn 11–14, 91, 102

LEGEND tag 131

legibility 155–157. See also readability

Lego site 31

Leonardo’s Laptop xix

line breaks 43, 48

linear access

designing pages for 194–197

designing tables for 104–106

linked style sheets 54–55

links 141–153

basic principles regarding 143–146

breadcrumb navigation 150, 151, 204

coloring 147, 149

differentiating from other page elements 142, 147–148

differentiating visited/unvisited 148–150

examples of bad 145

image vs. text 141, 144, 152

importance of 141, 143

labeling 35

and nonvisual users 145, 152

opening in new window 19–21

placing keywords in 185–186

providing for effective skimming of 145–146, 185–186

repairing broken 188–189

styling 145

using descriptive text with 145–146

using underlining to identify 16–17, 77, 142, 147–148

for Web page navigation 143–145

list markup 119, 121–122

lists 119–123

avoiding compound 122–123

basic principles regarding 120–123

defined 120

defining relationships between items in 122–123

and screen reader software 119

structural tags for 49

using list markup for 121–122

ways of using 119

local navigation 204

Lonely Planet site 102

LONGDESC attribute 28, 80

Lynch, Patrick xvi

MapQuest site 126

markup

color 160–161

data table 89, 90–91, 93–95, 101

document structure 53–55

editorial style 189–191

form 129–139

frame 114–117

fundamentals 33–41

interactivity 180–181

languages 48

layout table 104–108

link 147–153

list 119, 120–123

page layout 208–215

presentation 44, 48, 50

semantic 49, 91

standards 53

structural (See structural markup)

table 104

text 67–69

MayoClinic.com site 206

media-based content

allowing users to control 170–171

challenges of 163

providing alternate formats for 166–168

providing keyboard access to 169–170

media formats 168

Media Player 168

Medline Plus site 61, 136

Meetup site 177, 199

menu-style form elements 137–139

Microsoft site 13, 73, 108

MoMA site 202, 203

Motley Fool site 195, 121

MPEG-4 format 168

multicolumn layouts 11–14, 91, 102

music 164, 170. See also audio content

My Yahoo! sign-up form 132

narration 164. See also audio content

NASA site 81

National Air and Space Museum site 103

National Geographic site 86, 168

National Library of Medicine site 136, 188, 207

National Park Service site 12, 105, 136

navbars 119

navigation

allowing users to bypass 208

balancing content and 203–205

breadcrumb 150, 151, 204

browser-based 111

global 204

as list of links 119

local 204

page 204

providing tools for 207–208

navigation design 120–121, 207–208

navigation links 142, 143, 144, 148

NCES Students’ Classroom site 180

nested lists 119, 122

Netflix site 24

Network for Good site 29, 67, 75

Newell, Alan xi

NextD site 79, 113

NOFRAMES tag 28, 112, 113, 115–117

nonvisual users

and alternates/fallbacks 28

and color 66–67, 155, 158–160

communicating visual information to 197–200

and data tables 89

defined 3

and forms 130, 134

and frames 111–112, 113, 114–115

and image links 141

and images 72, 78

and interactivity 178

and keyboard accessibility 33

and layout tables 98, 102

and links 145, 152

and lists 119, 122

and separation of content/presentation 44

and sequence of page elements 194

and video content 166

Norman, Donald xvi

NOSCRIPT tag 28, 180

Nova site 165, 181

NPR site 91

numbered lists 123

Nutrition.gov site 78, 150

OBJECT tag 28

Opera browser 40

operability, Web page 7–8

ordered lists 49, 123

orientation cues 150–151

OXO site 34

P tag 43, 48, 49

page layout 193–215

balancing content/navigation in 203–205

basic principles regarding 194–208

consistency in 193–194, 201–203

designing for linear access 194–197

flexibility of 208–211

grouping related items in 197, 198–199

positioning important content in 213–214

providing navigation tools in 207–208

and universal usability 194

using style sheets for 211–212, 215

page navigation 204. See also navigation

page width 37

paragraphs 49. See also P tag

patterned backgrounds 76–77

PDF documents 30

Peet’s Coffee and Tea site 128

photography ix

pixilated text 75

plain text 58–59, 76. See also text

plugins 173, 174, 175

PNG images 85

point-and-click interactivity 178, 179

pointing devices 7, 24, 33, 132, 169

Portable Document Format 30

POV site 171

presentation

separating content and 43, 44–47

using styles sheets for 50–52

presentation markup 44, 48, 50

print design xvi

print option 191

product information 72

proximity, communicating related page elements with 198–199

QuickTime 168, 169, 173

quoted text 48, 49

radio buttons 137, 138

readability

and color 64, 157

and fixed-width columns 12

and page layout 193

and text/background contrast 157

and text size 60

Real Player 168, 171

relative measurements 62, 108

reports 97

rollovers 180

row headings, table 93–94

Salon.com site 120

SCOPE attribute 93–94

screen reader software

and abbreviations/acronyms 190–191, 191

and control of media playback 170

and cursor position 177

and data tables 95

and forms 133

and headings 213

and HTML 30

and images 78–79, 82, 200

and keywords 185

and language changes 189

and layout tables 101, 104

and links 145, 159, 214

and lists 119

and positioning of page content 197, 213

and structured documents 7, 48, 52, 67

and style sheets 50

and tables 89, 93, 99

scripts 173

search engines

and descriptive link text 145

and HTML 30

and page rankings 159

and positioning of page content 213

and structured documents 6–7, 48, 67, 99

and text transcripts 165

search function 208

select menus 137, 138

semantic markup 49, 91

Shneiderman, Ben xiii, xvi, xviii–xix

Shockwave 30

Shopzilla site 72

Shutterfly site 146, 201

SIGCHI x, xi

simple designs 26–27, 193–194

SimpleBits site 161

site index 208

site maps 207, 208

skip links 214

Smith & Hawken site 4

Solar System Exploration site 65

sound 164. See also audio content

“speak” style 50

Special Interest Group on Computer Human Interaction x, xi

spoken narration 164. See also audio content

standards Web xvii–xviii, 53, 201

Stephanidis, Constantine xi

structural markup 43, 48–49, 67–69, 175, 200

structural tags 49, 50, 67–69

structured documents 6–7. See also document structure

Strunk, William 186

style sheets. See also CSS

benefits of 44, 50–52

browser support for 52

controlling page layout with 211–212

designing pages to function without 52–53

external 59

and fixed vs. flexible design 15, 18, 211–212

linked vs. embedded 54–55

and nonvisual attributes 50

setting text color with 65–66

styling text with 59

Sullivan Louis H., 1–2

SUMMARY tag 94–95, 97

Surprise.com site 74

tab order, Web page 34, 194

TABINDEX attribute 34

table captions 94–95

table markup 89, 90–91, 101, 104

TABLE tag 48, 49, 95, 97, 104

tables 89–108

basic principles regarding 99–93, 99–103

designing for linear access 104–106

displaying captions with 94–95

identifying rows/columns in 93–94

misuse of 89, 91

as page layout tool 89, 97–101 (See also layout tables)

simplifying layouts for 92–93

summarizing contents of 94–95

using flexible cell widths in 106–108

when to use 89, 91

tabular information 49, 90, 97–98. See also tables

tags, structural 49, 50, 67–69

TD tag 104

text 57–69

allowing users to resize 63

auto-populating form fields with 135–137

basic principles regarding 58–59

breaking into segments 184–185

color considerations 64–67, 157

graphic vs. plain 58–59, 75–76

as lingua franca of Web 6

marking up 67–69

printed vs. Web 57, 60

reinforcing color with 159–160

reinforcing with images 71–72

size considerations 60–63

styling with CSS 59

text alternates. See alt-text

text input fields 137

text links 143–146. See also links

text size 39

text-to-speech technology 163. See also screen reader software

text transcripts 164, 165, 167

TH tag 93, 97

thumbnail images 86–87

TigerDirect.com site 27

TITLE attribute 114, 190

TITLE tag 7, 48

TR tag 104

Trace Center University of Wisconsin x

transcripts 164, 165, 167

transformation, designing for 18, 36–38

travel applications 175

Tribeworks site 158

Tufte, Edward xvi, 26

typography 57. See also text

UI4ALL xi

underlining 16–17, 77, 142, 147–148

UNICEF site 159

Universal Access in the Information Society xi

universal design xviii, 8–9

universal usability

and audio/video control 170–171

best-practices guidelines for xx–xxi

conference xi

defined xix

designing Web sites for 10, 23–41

and forms 132, 134

goal of 21

and graphic text 75–76

and HTML vs. alternate formats 24, 30–33

and images 72

importance of xii

and interactivity 173–174

and links 143

and page layout 194

risks associated with xii–xiii

and Web markup 24

University of Wisconsin x

unordered lists 49

U.S. Census Bureau site 94

usability, universal. See universal usability

user-centered design xvii, xviii–xix, 15, 39

user control

of color 160–161

of cursor position 177–178

of media-based content 170–171

of user interface 39–41, 176–178

of window size 176, 178

user-defined styles 52, 58

user interface allowing users to control 39–41, 176–178

User Interfaces for All xi

users

defined xxii

partnering with 14

visual vs. nonvisual 3

Vanderheiden Gregg x–xi

video content 165–171

allowing users to control 170–171

challenges presented by 163

and nonvisual users 166

providing alternate formats for 166–168

providing captions with 165

providing descriptions for 166

providing keyboard access to 169–170

visibility 11–12

visited links 142, 148–150

visual users

and color 155, 158–160

and data tables 89

defined 3

and layout tables 97–98

and links 145

and lists 119, 122

and sequence of page elements 194

vocabulary 187

W3C 53

W3Schools site 37, 92

Wall Street Journal site 64

Web

attributes of 6–9

defining best practices for xv

dynamic nature of xv

flexibility of 8–9, 11–14, 106–108

global audience for 183, 187

as hypertext system 173

imposing established conventions on 16

improving usability of x (See also universal usability)

popularity of ix, xii

setting type on 57

as software application 173

universality of xi

writing for 183

Web accessibility xvii, 18. See also universal design

Web Accessibility Initiative 18

Web audio. See audio content

Web browsers. See browsers

Web Content Accessibility Guidelines Working Group xi

Web design

basic principles of 23–41 (See also design principles)

challenges of xix 197–198

collaborative nature of 14

conferences xi

consistency in 193–194, 201–203

cost/benefit considerations 11–14

evolution of xvi–xviii

layers of xix–xx

making informed decisions about 10–14

recognized experts in xvi

standards 201

text size considerations 60–63

and universal usability xii–xiii, 23

Web designers xxii, 193

Web documents. See documents

Web forms. See forms

Web images. See images

Web pages. See also specific page elements

basic functions of 4–5

building to standards 53

controlling nonvisual attributes of 50

defining base text size for 60–61

designing (See Web design)

determining audience for 2–3

frames-based 111–112 (See also frames)

laying out (See page layout)

“optimal” dimensions for 194

positioning important content in 213–215

readability of (See readability)

tab order for 34

Web sites

designing (See Web design)

ensuring functionality of 23

frames-based 111–112 (See also frames)

maintaining/updating 188–189

navigation design for 120–121 (See also navigation)

Web standards xvii–xviii, 201

Web Style Guide site 196

Web users. See users

Web video. See video content

Westciv site 144

White, E. B. 186

White House site 164

Wikipedia site 45, 46, 142, 185

window size, allowing users to control 176, 178

Wired site 19, 25, 101

World Wide Web. See Web

World Wide Web Consortium 18, 53

Wright Brothers site 103, 198

writing style 186, 187. See also editorial style

XHTML 53

“you are here” cues 150–151

YellowstonePark.com site 156