Table of Contents for

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, Second Edition

Index

A

A List Apart website, 126

abbreviation (abbr) element, 57

accessibility, 18–20, 239

accordion interfaces, 189–190, 221

addEventListener method, 172–173, 176

Adobe Typekit, 190–191

ads, Wi-Fi, 159

Airbnb, 167

alert role, 85

Allsopp, John, 208, 236

alternate media, 148

alternative interactions, 148–150

AlzForum, 82, 178, 180, 181, 186, 194–195

analytics and testing, 239

anchor (a) element, 56, 58

Andreessen, Marc, 86n

Angular JavaScript, 13

any-hover value, 150

any-pointer and any-hover values, 150

Application Cache, 205

ARIA, 59–60

clarifying interfaces with, 83–85

describing states with, 180–182

first rule of using, 84

potential issues with, 61

roles available in, 83, 84, 85

styles triggered with, 191–192

tabbed interfaces and, 179

aria-controls attribute, 179

aria-describedby attribute, 179, 180

aria-labelledby attribute, 179

aria-selected attribute, 180–181

article element, 72, 77

at-rules, 115–116

attachEvent method, 172–173

“Attack of the Zombie Copy” (Kissane), 28

attributes

class and id, 63–66

data, 182–185

audio element, 88

audit, design, 96

Autoprefixer, 137

B

back link, 117, 119, 120

background-color declaration, 111

bandwidth use, 19

Barebones software, 99

Berners-Lee, Tim, 12, 13, 18, 236

Block-Element-Modifier (BEM) methodology, 65n

blogs

planning for content on, 36

source order on, 80–81

Boston Globe website, 127–131, 193

Boulton, Mark, 35

Bowman, Doug, 53n

Bradley, Adam, 217

Brand, Zach, 37

breakpoints, 131–132

browsers

fault tolerance of, 14, 86–91

hiding content from, 177–178

line mode, 4–5

native rendering by, 153–154

button creation, 57–60

button element, 58

C

Canon website, 187, 188

cascade in CSS, 104, 106

Cederholm, Dan, 238

Çelik, Tantek, 21n, 66, 239

Champion, Steve, 4

checklist of key concepts, 230–235

Chimero, Frank, 228, 236

Chrome app, 8–9

Clark, Joe, 46n, 238

class attribute, HTML, 63–66

class selector, CSS, 107, 108, 109n

click event, 198–199

client-side storage, 201–204

CMS (content management system), 36–37

collapsed elements, 141

color declaration, 105

color selection

accessibility and, 19

CSS examples of, 105–107, 110–111

defensive design and, 137–138

Comcast, 159, 164

comments, conditional, 177–178

concert hall analogy, 127, 130

Conditional Comments, 177–178

conditional logic, 168

consistency of design, 96

content, 25–51

cost-benefit analysis of, 39–43

crafting conversation with, 31–35

designing meaningful, 29–31

empty space vs., 48–50

enhancing with markup, 53–91

fake text vs., 30

generated, 143–145

hiding, 139–143

importance of, 21, 27

key concepts checklist on, 230–231

leading the way with, 51

media used as, 39–47

navigation vs., 77–78, 80

performance related to, 42

planning for unknown, 35–38

problem situations and, 33–35

providing alternate forms of, 44–47

questions on forms as, 47–48

recommended reading on, 237

thinking about structured, 37–38

visual design related to, 100–103

writing for real people, 38

zombie copy vs., 28–29

content management system (CMS), 36–37

Contents Magazine, 79–80, 117

continuum of experience, 20

conversation

guidelines for crafting, 31–33

problem situations and, 33–35

questions on forms as, 47–48

user interactions based on, 29

cookies, 201–202

copy

content equated with, 27

guidelines for crafting, 31–32

zombie or robotic, 28–29

cost-benefit analysis, 39–43

crafting the conversation, 31–35

“Crippling the Web” (Kadlec), 16

Crockford, Douglas, 156

CSS (Cascading Style Sheets), 104–121

at-rules in, 115–116

cascade in, 104, 106

fault tolerance and, 109–116

feature detection for, 138–139

hiding rule sets in, 112–116

potential issues with, 61

progressive navigation example, 116–121

property fallbacks in, 110–111

proximity in, 104–107

recommended reading on, 238

specificity in, 107–109

CSS gradients, 134–136

CSS preprocessors, 137

CSS Zen Garden, 112, 113

D

Dale, Tom, 166, 167

data attributes, 182–185

datalist element, 90

dataset property, 184

data-title attribute, 143–144

Davidson, Mike, 53n

declarative instruction, 182–185

default styles, 152–154

defensive design, 137–139

defensive programming, 168–175

delegating behavior, 170–172

isolating DOM manipulation, 169–170

testing for feature support, 172–174

verifying JQuery library, 174–175

delegating behavior, 170–172

design, etymology of word, 29

See also visual design

desktop first approach, 124

devices

mobile first approach to, 124, 125

optimizing design for specific, 132–133

See also mobile devices

dial-up modems, 223

display property, 140

div element, 58, 59, 215

document outline, 72–77, 81

document.querySelector element, 176

DOM manipulation, 169–170

download attribute, 88

Duckett, Jon, 238

E

embed element, 86–87

embedded style sheets, 105, 106, 107

Ember FastBoot, 167

empty space, 48–50

errors

CSS handling of, 109–116

parsing, 109–110, 112, 125, 135

types of JavaScript, 164

See also fault tolerance

event bubbling phase, 170–171

event capturing phase, 170–171

event delegation, 170–172

experience vs. technology, 7–11

experimental features, 136

explicit sectioning, 72, 73, 76

F

Facebook

Open Graph protocol, 69–70

photo-reporting tool, 25–26

fake text, 30

Faulkner, Steve, 238, 239

fault tolerance, 14

CSS and, 109–116

defensive design and, 137–139

HTML and, 86–91

JavaScript and, 168

feature detection

CSS-based, 138–139

JavaScript, 172–174

Feliz, Teylor, 239

Fenton, Nicole, 237

Fidelity website, 183, 184

fieldset element, 72

figcaption element, 108

The Filament Group, 193

filling space, 48–50

Flash movies, 86, 87

flexible media, 122

flowcharts, 210, 211

fluid grids, 122

font stacks, 191

fonts, embedded, 190–191

Forbes website, 49, 50

forks, program, 173

forms

client-side storage of, 204

conversational questions on, 47–48

forward compatibility, 14

Friedman, Vitaly, 238

Frost, Brad, 14

future friendliness, 17

future-proof content, 13–14

G

Gawker Media, 157–158

generated content, 143–145

getActiveMQ function, 218

getComputedStyle method, 218

Give Central website, 187, 188

Google

Maps development, 10

semantic markup used by, 56

Social Graph product, 67

structured data testing tool, 70

graceful degradation, 8, 11

gradients, CSS, 134–136

Grigsby, Jason, 238

Guardian website, 41, 42, 213

H

Hagans, Andy, 239

Hawking, Stephen, 227

Hay, Stephanie, 31

Hay, Stephen, 95, 131, 237

heading levels, 73

Heilmann, Christian, 239

Henry, Shawn Lawton, 46n, 239

hiding content, 139–143

recommended approach to, 142–143

techniques to avoid for, 140–141

techniques to use sparingly for, 141–142

Hoh, Benjamin, 21

horizontal scrolling tabs, 187

Horton, Sarah, 239

HTML

class and id attributes, 63–66

fault tolerance and, 14, 86–91

future-proofing, 13–14

heading levels, 73

JavaScript and, 82

microformats, 66–68

recommended reading on, 238

semantic markup, 56, 57

See also markup

HTML5, 57

explicit sectioning, 72, 73, 76

first-class elements, 71

HTML5 Boilerplate, 174

human factors, 11

Hutchinson, Grant, 130

Hyatt, Dave, 134

hypermedia, 18

I

iA Writer, 12n

IBM Simon, 197

id attribute, HTML, 63–66, 79

id selector, CSS, 107, 108

img element, 89, 214

indented elements, 141–142

indexedDB, 10, 205

inline styles, 106–107

input element, 58, 89

installable websites, 205–206

interaction, 157–207

adapting interfaces for, 185–190

alternative methods of, 148–150

applying styles for, 190–192

building what you need for, 178–180

Conditional Comments and, 177–178

conversation as basis for, 29

declarative instruction and, 182–185

defensive programming for, 168–175

describing using ARIA states, 180–182

designing a baseline for, 165–168

enhancement requirements for, 175–176

feature detection and, 172–174, 175

key concepts checklist on, 234–235

keyboard functions for, 195–197

lazy loading and, 192–195

network issues and, 201–206

potential problems with, 160–165

progressive enhancement and, 206–207

recommended reading on, 238–239

touchscreen functions for, 197–201

voice-based, 225–228

Interface Experience Maps. See Ix Maps

interface inventory, 96

interfaces

accordion, 189–190, 221

adapting for screens, 185–190

clarifying with ARIA, 83–85

describing with ARIA states, 180–182

tabbed, 81–83, 178–180, 220–222

Internet Explorer (IE), 93, 125, 177–178

invisible elements, 140

isomorphic JavaScript, 166–167

Ix Maps, 210–222

benefits of using, 212

lazy loading images example, 213–220

tabbed interface example, 220–222

J

Java applets, 7

JavaScript

avoiding on some browsers, 177–178

data attributes accessed in, 184

establishing minimum requirements for, 175–176

feature detection for, 172–174, 175

HTML manipulated by, 82

isomorphic, 166–167

Ix Maps and, 214, 215, 217–220

jQuery library and, 158, 174–175

lazy loading of, 193, 195, 216–220

localStorage property, 202–204

network issues and, 201–204

noscript element, 163–164

potential problems with, 61, 160–165

programming defensively with, 168–175

progressive enhancement and, 162–165, 206–207

recommended reading on, 238–239

stories illustrating problems with, 157–159

tabbed interfaces and, 82–83, 178–180, 220

tabindex juggling, 196–197

Jehl, Scott, 237

Jing software, 96

jQuery library, 158, 174–175

jQuery Validation script, 183

jump link, 116, 117

K

Kadlec, Tim, 16, 42, 237, 239

Kaminsky, Dan, 159

Keith, Jeremy, 52, 90, 217n, 236, 238, 239

key concepts checklist, 230–235

keyboard interactions, 195–197

Kinect interactions, 148

King, Liam, 30

Kissane, Erin, 28, 237

Klatt, Dennis, 227

Kloos, Egor, 112

Koch, Peter Paul, 239

Kratzenstein, Christian, 227

Krug, Steve, 237

L

language, accessibility of, 19

Lawson, Bruce, 152, 238

layer-applied technologies, 21

lazy loading, 43, 192–195

Ix Maps example of, 213–220

progressive enhancement and, 195

Lee, Kate Kiefer, 33, 237

line lengths, 150

line mode browser, 4–5

link element, 191

linked style sheets, 106

links

anchor elements as, 58

CSS example of, 116–117

navigational, 84

list attribute, 90

localStorage property, 202–204

Lorem Ipsum copy, 30, 31

Lynx browser, 6, 7, 22

M

MacGrane, Karen, 30n

MailChimp, 33–35

main element, 57, 84

ManifoldJS tool, 206

man-in-the-middle attack, 159

Mann, Merlin, 50

mapping process. See Ix Maps

Marcotte, Ethan, 121, 237, 238

markup, 53–91

ARIA used in, 83–85

avoiding unnecessary, 81–83

choosing elements for, 57–63

class and id attributes in, 63–66

deliberate choices using, 71–83

document outline and, 72–77

enhancing content using, 21, 55

fault tolerance and, 86–91

illuminating content with, 57

key concepts checklist for, 232

learning from the past with, 55–56

meaning conveyed through, 91

microformats and, 66–68

potential issues using, 61

RDFa and microdata, 68–70

recommended reading on, 238

source order in, 77–81

Martin, George R. R., 39

max-width media query, 120–121, 122–123

McGrane, Karen, 237

meaning

content conveying, 29–31

markup conveying, 91

media assignments, 145–146

media content, 39–47

cost-benefit analysis of, 39–43

max-width query for, 120–121

providing alternates of, 44–47

media queries, 122, 125, 131, 149

@media block, 121, 145, 148

Meyer, Eric, 53n, 66, 146, 147, 238

microdata, 68–69

microformats, 66–68

min-width media query, 123

mobile devices

content vs. navigation on, 77–78

mobile first approach and, 124, 125

performance optimization for, 223–224

Mobile First (Wroblewski), 77

Modernizr, 138, 173

Molero, Gorka, 237

Mosaic browser, 5

MOSe technique, 112

motion-based controls, 148

mouse interactions, 195, 198

Mullenweg, Matt, 66

MVC framework, 166, 167

N

namespacing, 185

native rendering, 153–154

natural-language processing, 225–226

navigation

content vs., 77–78, 80

progressive, 116–121

negatively indented elements, 141

Nelson, Sarah B., 210

Netscape Navigator, 5, 126

network issues, 201–206

New York Times website, 40, 71, 213

Nichols College website, 80, 116–121, 214–219

noscript element, 163–164, 194

NPR website, 37, 143–145

O

object element, 86–87

offscreen elements, 142

OmniGraffle software, 212

on-demand enhancements, 192–195

Open Graph protocol, 69–70

operating system (OS) look/feel, 153–154

optimization vs. support, 14–15, 16

outline, document, 72–77, 81

overdesigning websites, 95

P

Page, Larry, 56n

page performance, 42

PageRank algorithm, 56

parsing errors, 109–110, 125

parsing script, 3n

Pattern Lab, 99, 132

pattern libraries, 98–99

Pattern Primer, 99

PDFs, challenge of using, 46–47

performance

accessibility related to, 19

media content and, 42

optimizing for mobile, 223–224

user experience and, 42

picture element, 88–89

Pinterest, 70

placeholder text, 30n

Pointer Events, 200–201

pointer-based interactions, 200–201

Point-to-Point Protocol (PPP), 7

Portis, Eric, 238

positively indented elements, 141–142

post-processors for CSS, 137

PouchDB tool, 204

Powazek, Derek, 237

preprocessors for CSS, 137

presentation role, 85

printer-friendly pages, 146–148

progressive enhancement, 3–4

benefits of, 228–229

Boston Globe example of, 130–131

continuum of experience and, 20

cost effectiveness of, 10–11

CSS example of, 116–121

fault tolerance and, 14, 86–91

future friendliness of, 17

Ix Maps for exploring, 210–222

JavaScript and, 162–165, 206–207

key concepts checklist for, 230–235

layer-applied technologies and, 21

lazy loading and, 195

mapping the experience of, 210–222

mobile connections and, 223–224

navigation example of, 116–121

recommended reading on, 236–239

screen size and, 224–225

support vs. optimization and, 15, 16

user experience and, 22–23

progressive navigation, 116–121

property fallbacks, 110–111

proximity in CSS, 104–107

Q

queries, media, 122, 125, 131

Quesenbery, Whitney, 239

R

race condition, 169

Raggett, Dave, 64

RDFa tags, 68, 69–70

Redish, Janice, 237

rel attribute, 66–67

Responsive Design Workflow (Hay), 95

responsive web design, 122–133

basic formula for, 122

Boston Globe example of, 127–131

embracing fluidity in, 131–133

recommended reading on, 237

support vs. optimization in, 125–127

RGB color values, 111

RGBa color values, 111

Rieger, Bryan, 125

roadblocks, 8, 9

role attribute, 59–60, 83, 84, 85

rule sets, hiding in CSS, 112–116

S

Sambells, Jeffrey, 238

Samuels, Jason, 93, 132, 239

Schema.org website, 69

screen readers, 18, 227

screen size

adapting the interface for, 185–190

progressive enhancement and, 224–225

visual design and, 124, 150–152

screen-capture software, 96

script element, 174

scripts

parsing, 3n

Service Worker, 205

validation, 183

scroll jacking, 187

search engine optimization (SEO), 78–79

section element, 72, 77

sectioning elements, 72, 73, 76–77

select box, 153

selectors in CSS, 107–109, 112, 114–115

semantic markup

Google’s use of, 56

illuminating content with, 57

recommending reading on, 238

SEO (search engine optimization), 78–79

server-rendered apps, 168

Service Worker scripts, 205

sessionStorage property, 202–204

Sharp, Remy, 238

Shea, Dave, 112n

Simmons, Amber, 237

skins, 154

Skitch software, 96

Sky Broadband, 158–159, 174

small screen first approach, 124

source order, 77–81

space, empty, 48–50

specificity in CSS, 107–109

speech synthesis, 225, 227

Squirrel.js plugin, 203

states, ARIA, 180–182

Sticka, Tyler, 238

structured content, 37–38

structured data testing tool, 70

style guides, 98

Style Prototype, 99

style tiles, 97–98

styles

conservative use of, 138–139

default, 152–154

inline, 106–107

tiles and guides for, 97–98

when to apply, 190–192

support vs. optimization, 14–15, 16

@supports block, 138–139

T

tabbed interfaces, 81–83

adapting for screens, 185–190

ARIA attributes for, 179–180

Ix maps example of, 220–222

JavaScript and, 82–83, 178–180, 220

keyboard navigation of, 196–197

markup for building, 81

tabindex juggling, 196–197

table element, 55–56

:target pseudoclass, 118–119

TechCrunch website, 17

technology vs. experience, 7–11

testing and analytics, 239

text

fake or placeholder, 30

line mode browser for, 4–5

video games based on, 225, 226

voice-based interactions and, 225–228

thumbnail images, 41, 43, 213–214

touchend event, 198–199

touchscreen interactions, 197–201

transition property, 120, 133

Turing Test, 226

Twitter, 70, 167

Typekit service, 190–191

U

UI construction flows, 210

universal accessibility, 18–20

User Agent sniffing, 8n

user experience

content strategy and, 43

controlled by Web users, 161–162

crafting the conversation for, 33

page performance related to, 42

progressive enhancement and, 22–23

recommended reading on, 237

V

van der Merwe, Rian, 30n

Vanguard website, 44, 45

Veen, Jeffrey, 92, 100

vendor prefixes, 133–137

video element, 87–88

viewport width (vw) units, 151–152

virtual personal assistants, 227

visibility property, 140

visual design, 93–155

accessibility and, 19

altered aesthetics and, 153

conducting an audit of, 96

conservative use of styles in, 138–139

content as basis for, 100–103

CSS overview for, 104–121

default styles for, 152–154

defensive design in, 137–139

embracing the continuum in, 155

finding the edges in, 102–103

fluidity in, 131–133

generated content in, 143–145

hiding content in, 139–143

interaction methods and, 148–150

key concepts checklist for, 233–234

larger screens and, 150–152

media assignments for, 145–146

page hierarchy and, 22

pattern libraries for, 98–99

printed page and, 146–148

progressive navigation example, 116–121

recommended reading on, 238

responsive web design and, 122–133

screen resolution and, 94

specific devices and, 132–133

standards considered in, 133–137

style guides for, 98

style tiles for, 97–98

system vs. page, 94–99

Voice and Tone website, 33–34

voice-based interactions, 225–228

W

W3C (World Wide Web Consortium), 10

Wachter-Boettcher, Sara, 237

Walton, Trent, 237

Warren, Samantha, 97

watchResize function, 218

Web, the

constancy of change on, 1

early experiences on, 4–7

installable sites on, 205–206

recommended reading about, 236

web browsers. See browsers

web design process. See responsive web design

Web Developer Toolbar, 72n

Web Standards Project, 53

Web Standards Sherpa site, 74

“Web’s Grain, The” (Chimero), 228

WebSQL support, 10

What Does My Site Cost? tool, 42

Wi-Fi hotspots, 159

window.addEventListener method, 176

window.localStorage method, 176

Word for MS-DOS, 12–13

words, power of, 27, 29, 31

writing for real people, 38

Wroblewski, Luke, 77, 237

X

XFN microformat, 66–67

XMLHttpRequest, 204

Y

YouTube, 19, 46n, 101

Z

Zakas, Nicholas, 8n

Zeldman, Jeffrey, 24, 126, 237

z-index property, 119

zombie copy, 28–29

Zork video game, 225, 226