Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.

Symbols

<!-- --> (angle bracket, exclamation), enclosing HTML comments, Separating Content and Presentation, Browser Support
{ } (curly braces)
enclosing CSS declarations, How CSS Works
enclosing CSS for media queries, Media Query Structure
( ) (parentheses), enclosing media query expressions, Media Query Structure
% (percent), unit of measurement, Measurements
; (semicolon), separating CSS declarations, How CSS Works
/* */ (slash, asterisk), enclosing CSS comments, Keeping It Simple

A

abandoned navigation, Abandoned Navigation
absolute positioning, CSS, Relative
absolute units of measurement, Organizing Your Stylesheet
Accessibility Handbook (Cunningham), Accessibility (Universal Design)
accessibility (universal design), Accessibility (Universal Design)
audio issues, Color blindness
cognitive issues, Cognitive Disabilities
input methods
keyboard-only navigation, Keyboard only
speech recognition software, Keyboard only
visual issues
color blindness, Color contrast
color contrast, Screen readers
screen readers, Structural Elements, Accessibility (Universal Design), Emulators and Simulators
text size, Screen readers
WCAG (Web Content Accessibility Guidelines), Color contrast
adaptive content, Creating Timeless Content
Adaptive Images polyfill, Picturefill
Adobe Dreamweaver, adobe Dreamweaver
Adobe Edge Reflow, Adobe Edge Reflow
Adobe InDesign, Responsive Design Tools
Adobe Photoshop, Responsive Design Tools
alignment of images, Alignment
alt attribute, <img> element, Content Images, Icon Fonts
and operator (in media query), Media Query Structure
Android phones, Fixed-Width Design
(see also mobile devices)
aspect ratios, Aspect Ratio
browsers for, Browsers and Operating Systems
operating systems for, Browsers and Operating Systems
screen size for, Navigation Location
SVG images, SVG
angle bracket, exclamation (<!-- -->), enclosing HTML comments, Separating Content and Presentation, Browser Support
animated graphics, Cognitive Disabilities
<article> element, <footer>
<aside> element, <footer>, Creating a Page
aspect-ratio media feature, Aspect Ratio
assistive technology, Accessibility (Universal Design)
(see also accessibility)
screen readers, Structural Elements, Accessibility (Universal Design), Emulators and Simulators
speech recognition software, Keyboard only
testing, Emulators and Simulators
async attribute, <script> element, Defer execution
attributes (see specific attributes)
audio, accessibility of, Color blindness
auditing content, Content Audit/Inventory

B

background-image property, CSS, Content Images, Maximum Width
background-position property, CSS, Alignment
Ball, David, Screen readers
Balsamiq prototyping tool, Frameworks
Belam, Martin, User Research
block elements, display
blocking CSS, CSS
blocking JavaScript, How JavaScript Works
Boag, Paul, Whitespace
<body> element, Document Type Declaration (DOCTYPE), User-Scalable, Creating a Page, External resources
books and publications
Accessibility Handbook (Cunningham), Accessibility (Universal Design)
Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition (Brown), Strategy and Planning
Content Strategy for Mobile (McGrane), Content Strategy
Content Strategy for the Web, Second Edition (Halvorson; Rach), Content Strategy
Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive Projects (Schmitt), Compressing Images
Just Ask: Integrating Accessibility Throughout Design (Henry), Accessibility (Universal Design)
Ordering Disorder: Grid Principles for Web Design (Vinh), Designing with Grids
Responsive Design Workflow (Hay), Thinking About Layout
Tapworthy: Designing Great iPhone Apps (Clark), Touch
Bootstrap framework, Frameworks
border-box property, CSS, Borders
border-color property, CSS, Margins and Padding
border-style property, CSS, Margins and Padding
border-width property, CSS, Margins and Padding
bottom navigation, Flyout Navigation
Boulton, Mark, Whitespace
box model, CSS, Organizing Your Stylesheet
border property, Margins and Padding
box-sizing property, Borders
height property, Ems
margin property, Height and Width
padding property, Height and Width
positioning elements, Fixed
units of measurement for, Organizing Your Stylesheet
width property, Ems
box-sizing property, CSS, Borders
branding, Branding
breakpoints, Testing Media Query Answers, Using a Grid
choosing, Design for Small Screens First, How to Choose Breakpoints
for images, Third-party services
Brown, Dan (author)
Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition, Strategy and Planning
Brown, Tim, Relationship Between Sizes
browser prefixes, CSS, Browser Prefixes
browsers, File Compression
(see also specific browsers)
caching by, File Compression
CSS support, Browser Prefixes
as design tool, The Browser
media query support, Other Media Features
mobile web browsers, Fixed-Width Design
resizing window, Validators
testing, Browsers and Operating Systems
which to support, Cognitive Disabilities
BrowserStack tool, Emulators and Simulators
buttons, Images

C

caching, browser, File Compression
Can I Use website, Using HTML5, Browser Prefixes
Cant, Edward, High-Density Screens
capacitive touch screen, Touch
captions for videos, Color blindness
cascade hierarchy, CSS, Inline Styles
applying, Using the Cascade
conflicts in, resolution of, Inherited Rules
Cascading Style Sheets (see CSS (Cascading Style Sheets))
CDN (Content Delivery Network), CSS Frameworks
Center for Plain Language, Plain Language
character encoding, The Page Title
charset attribute, <meta> element, The Page Title
CheckMyColours tool, Color contrast
Chrome browser, File Compression
(see also browsers)
resolution media feature, Aspect Ratio
viewing HTTP headers, HTTP Request
WebKit rendering engine for, Browser Prefixes
Windows Resizer tool, Validators
Clark, Josh, Navigation Location
Tapworthy: Designing Great iPhone Apps, Touch
classes, User-Scalable
avoiding, Measuring Performance
CSS styles for, How CSS Works, Inline Styles, Everything Else
clear property, CSS, Fixed
clients
deliverables for, Cost
expectations of, Cost
presentations to, Deliverables
selling responsive design to, The Browser
CMS (content management system), Content Delivery Networks (CDN)
cm, unit of measurement, Measurements
code, How CSS Works
(see also CSS; HTML; JavaScript)
compressing, Avoid Redirects
concatenating, Minimizing HTTP Requests
minifying, Use Straightforward Code
simplifying, Measuring Performance
third-party code, minimizing, Third-Party Code
cognitive disabilities, Cognitive Disabilities
color blindness, Color contrast
color contrast, Screen readers
Color Contrast Checker tool, Color contrast
Color Contrast Check tool, Color contrast
color-index media feature, Other Media Features
color keyword media feature, Other Media Features
columns, designing with, Using columns, Two-Column Layout
Command-+ keystroke, Why 100%?
comments
in CSS, Keeping It Simple
in HTML, Separating Content and Presentation
Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition (Brown), Strategy and Planning
compression
of code files, Avoid Redirects
of images, High-Density Screens
concatenating code files, Minimizing HTTP Requests
conditional comments, HTML, Separating Content and Presentation, Browser Support
conditionally loading content, Conditionally Loading Content
contact information for this book, How to Contact Us
content
adaptive, Creating Timeless Content
auditing, Content Audit/Inventory
conditionally loading, Conditionally Loading Content
headings for, Inverted pyramid
hierarchy of, Linear Design
internationalization of, Document Structure
maintaining, Content Parity
managing, Content Strategy
metadata for, Adaptive Content
outline for, Content outline
plain language for, Headings
reducing, Managing Content
reflows and repaints of, Conditionally Loading Content
separating from presentation, Separating Content and Presentation
strategy for, Responsive Content
structuring, Content Audit/Inventory, User-Scalable, User Research
timeless, Content Parity
Content Delivery Network (CDN), CSS Frameworks
content governance, Content Strategy, Content Parity
content images, CSS Alternatives, Actual Dimensions
content management system (CMS), Content Delivery Networks (CDN)
content marketing, Content Strategy
content parity, Plain Language
Content Strategy for Mobile (McGrane), Content Strategy
Content Strategy for the Web, Second Edition (Halvorson; Rach), Content Strategy
cost, Responsive Design Is Not Always the Best Option
Coyier, Chris, bookmarklet for testing line length, Testing Line Length
Cross Browser Testing tool, Emulators and Simulators
CSS2, More Devices, What’s a Media Query?, Media Query Structure, Hyphenation
CSS3, Versions of CSS, Basic Styles
browser prefixes, Browser Prefixes
embedding fonts, Choose Your Typeface First
media queries, More Devices, What’s a Media Query?
performance improvements using, Asynchronous loading
properties, Borders, Adjusting Margins and Font Size
CSS (Cascading Style Sheets), How CSS Works
blocking, CSS
box model, Organizing Your Stylesheet
border property, Margins and Padding
box-sizing property, Borders
height property, Ems
margin property, Height and Width
padding property, Height and Width
positioning elements, Fixed
units of measurement for, Organizing Your Stylesheet
width property, Ems
browser prefixes, Browser Prefixes
cascade hierarchy, Inline Styles
applying, Using the Cascade
conflicts in, resolution of, Inherited Rules
clear property, Fixed
comments, Keeping It Simple
compressing, Avoid Redirects
concatenating files, Minimizing HTTP Requests
display property, display
example using, Basic Styles
float property, Fixed, Two-Column Layout, The <img> element
frameworks, How Many Page Layouts to Create, CSS
image alternatives using, Images
linking to fonts, Font Services
minifying, Use Straightforward Code
position property, Positioning
simplifying, Measuring Performance
specificity for, How It Works, Inherited Rules
style rules, How CSS Works
embedded, Browser Prefixes
guidelines for, Everything Else
!important rule, How It Works
inherited, Inline Styles, Reset
inline, Stylesheets, Inline Styles
resetting, Using the Cascade
stylesheets, Stylesheets
importing, Other Ways to Use Media Queries
optimizing, How CSS Works
organizing, Keeping It Simple
stylized text using, CSS Alternatives
transitions, Toggle Push Navigation
versions of, Versions of CSS
CSS Minifier tool, Minification
Cunningham, Katie (author)
Accessibility Handbook, Accessibility (Universal Design)
curly braces ({ })
enclosing CSS declarations, How CSS Works
enclosing CSS for media queries, Media Query Structure

D

declarations, CSS, How CSS Works
Declaring Character Encodings in HTML (W3C), The Page Title
decompression, HTTP Request
default values for HTML elements, Inherited Rules
defer attribute, <script> element, Load above-the-fold code first
descendant selectors, How CSS Works, Everything Else
design (see responsive web design (RWD))
Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive Projects (Schmitt), Compressing Images
design ranges, for media queries, Breakpoints
desktop computers, Desktop and Laptop Computers
aspect ratios, Aspect Ratio
browsers for, Browsers and Operating Systems
operating systems for, Browsers and Operating Systems
screen size for, Navigation Location
device-agnostic design, Multi-Device Usage
device-aspect-ratio media feature, Aspect Ratio
device-height media feature, Viewport Width and Height
device labs, Why Use Real Devices for Testing
device pixels, Pixels and Resolution
devices, Types of Devices
(see also desktop computers; laptop computers; mobile devices)
testing on, Why Use Real Devices for Testing
touch screens (see touch screens)
which to support, Cognitive Disabilities
device-width media feature, Viewport Width and Height
disabilities (see accessibility)
Display CSS Property (Mozilla Developer Network), display
display property, CSS, display
<div> element, Unstyled Page
DNS (Domain Name System), DNS Request
<!DOCTYPE> declaration, Using HTML5
Document Object Model (DOM), DOM
document type declaration, Using HTML5
Domain Name System (DNS), DNS Request
DOM (Document Object Model), DOM
Dreamweaver, adobe Dreamweaver

E

Edge Reflow, Adobe Edge Reflow
elements, HTML (see specific elements)
embedded styles, Browser Prefixes
emulators, for mobile devices, Browsers and Operating Systems
em, unit of measurement, Measurements, Ems, Screen Distance, Why 100%?
compared to rem, Deciding between ems and rems
for margins, Margins and Padding
ereaders, Tablets
(see also mobile devices)
events, JavaScript
hover events, Gestures
onclick events, Hover, How JavaScript Works
onload events, Rendering the <body>
touch events, Gestures
expressions (see media queries)

F

Fangs Screen Reader Emulator, Accessibility (Universal Design), Emulators and Simulators
FastClick plug-in, Hover
Faulkner, Steve, Writing Good Alt Text
feature phones, Types of Devices
(see also mobile devices)
Federal Plain Language Guidelines, Plain Language
Firefox browser, File Compression
(see also browsers)
Fangs Screen Reader Emulator, Accessibility (Universal Design), Emulators and Simulators
Gecko rendering engine for, Browser Prefixes
Responsive Design View tool, Validators
Firtman, Maximiliano, Emulators and Simulators
fixed positioning, CSS, Absolute
fixed-width design, Fixed-Width Design
flexible units of measurement, Media Queries
float property, CSS, Fixed, Two-Column Layout, The <img> element
fluid design, Fixed-Width Design
flyout navigation, Select Menu Navigation
@font-face rule, CSS, Font Services
font-family property, CSS, Linking to Font Files
fonts, Choose Your Typeface First
(see also text)
changing based on screen size, Margins and Padding
choosing, Choose Your Typeface First
compared to typefaces, Typefaces
embedding (linking to), Font Services
font services, Font Services
self-hosted, Well-Designed Fonts
setting for HTML elements, Linking to Font Files
testing, Font Services
Fonts.com service, Well-Designed Fonts
font-size property, CSS, Absolute Versus Relative
Font Squirrel web fonts, Well-Designed Fonts
font stack, Linking to Font Files
<footer> element, <footer>, Creating a Page
footer navigation, Top Navigation
Foresight.js plug-in, HiSRC
Foundation framework, Frameworks
frameworks
CSS, How Many Page Layouts to Create, CSS
JavaScript, Using HTML/CSS instead of JavaScript
Froont prototyping tool, Frameworks
Frost, Brad, Fixed
Responsive Patterns website, Navigation Patterns, Toggle Push Navigation

G

game consoles, Tablets
Gecko rendering engine, Browser Prefixes
gestures, on touch screen, Gestures
GIF files, JPEG
Gillenwater, Zoe Mickley, Linking to Font Files
goal-based navigation, Goal-Based Navigation
golden ratio, Relationship Between Sizes
Google Web Fonts service, Font Services
Granneman, Scott, Creating the Font Stack
graphics, animated, Cognitive Disabilities
(see also images)
grid media feature, Other Media Features
grids, designing with, Progressive Enhancement, Using Floats
Grigsby, Jason, Breakpoints
Gustafson, Aaron, Toggle Overlay Navigation
GZIP Test tool, File Compression

H

<h1>–<h6> elements, Adding Content, Separating Content and Presentation
Halvorson, Kristina (author)
Content Strategy for the Web, Second Edition, Content Strategy
hamburger icon (see navigation icon)
hardware pixels, Pixels and Resolution
Hay, Stephen (author)
Responsive Design Workflow, Thinking About Layout
<head> element, Document Type Declaration (DOCTYPE), DOM
<header> element, Screen Readers, Creating a Page
header, for web page, Screen Readers, Creating a Page, Navigation and Header Layout, Sticky Menus for Wider Screens
branding in, Branding
complicated, Minimalist Header
icons in, Complicated Header
minimalist, Sticky Menus for Wider Screens
headings, in content, Inverted pyramid
height media feature, Other Ways to Use Media Queries
height property, CSS, Ems
Henry, Shawn Lawton
Just Ask: Integrating Accessibility Throughout Design, Accessibility (Universal Design)
high-density screen, Pixels and Resolution
HiSRC plug-in, Adaptive Images
horizontal navigation, Styling Your List
hosting service, CSS Frameworks
HotGloo prototyping tool, Frameworks
hover event, Gestures
HTML, HTML for Responsive Sites
(see also specific HTML elements)
case-insensitivity of, User-Scalable
comments in, Separating Content and Presentation
compressing, Avoid Redirects
content structure elements, User-Scalable, Start with HTML
default values for elements, Inherited Rules
email, Browser Prefixes
example using, IE Support
guidelines for, Unstyled Page
indentation of, Creating a Page
minifying, Use Straightforward Code
page structure elements, Using HTML5
semantic markup, Structural Elements
simplifying, Measuring Performance
standards for, Versions of HTML
versions of, HTML for Responsive Sites
viewport settings, Charset
HTML 4, Versions of HTML
HTML5, HTML for Responsive Sites, Summary
async attribute, Defer execution
character set, The Page Title
dates, Asynchronous loading
elements, User-Scalable, IE Support
HTML5 Please polyfill, Box-Sizing
HTML5 Shiv, IE Support, Adding Content, Separating Content and Presentation
<html> element, Document Type Declaration (DOCTYPE)
HTML Element Reference (Mozilla Developer Network), Using HTML5
HTTP header, HTTP Request
HTTP (or URL) redirect, Avoid Redirects
HTTP request, DNS Request, Minification
HTTP response, HTTP Request
hyphenation, Adjusting Margins and Font Size
hyphens property, CSS, Adjusting Margins and Font Size

I

IA (information architecture), User Research
(see also content: structuring)
icon fonts, Image Sprites
icons, in header, Complicated Header
IDs, User-Scalable
avoiding, Measuring Performance
CSS styles for, How CSS Works, Inline Styles, Everything Else
IE (Internet Explorer), File Compression
(see also browsers)
box-sizing, Box-Sizing
conditional comments, Separating Content and Presentation, Browser Support
HTML5 elements, IE Support
max-width property with images, Maximum Width
media queries, Conditional Comments for Internet Explorer
PNG file transparency, GIF
rem, unit of measurement, Nested ems
SVG images, SVG
Trident rendering engine for, Browser Prefixes
images, Images
alignment of, Alignment
alternatives to, with CSS, Images
background images, Content Images, Maximum Width
breakpoints for, Third-party services
compressing, High-Density Screens
content images, CSS Alternatives, Actual Dimensions
dimensions of, Compressing Images, Flexible Image Dimensions
file formats for, Writing Good Alt Text
floating, The <img> element
icon fonts, Image Sprites
icons, Complicated Header
image sprites, Content Images, Third-Party Code
loading, Rendering the <body>
logos, Branding
media queries for, Flexible Image Dimensions
multiple versions of, switching between, Proposed Client-Side Solutions, Third-party services
opacity of, Background Images
optimizing, SVG
padding, The <img> element
resizing, Picturefill
responsive, potential solutions for, Alignment
polyfill solutions, <picture>
third-party services, HiSRC
W3C solutions, Proposed Client-Side Solutions
story depicted by, Maximum Width
testing without, Emulators and Simulators
text alternative to, Content Images, Icon Fonts
title of, Writing Good Alt Text
<img> element, CSS Alternatives, The <img> element
alt attribute, Content Images
src attribute, Content Images, The <img> element
srcset attribute, Proposed Client-Side Solutions
!important rule, How It Works
@import rule, Stylesheets, Other Ways to Use Media Queries
InDesign, Responsive Design Tools
information architecture (IA), User Research
(see also content: structuring)
inherited style rules, Inline Styles, Reset
initial-scale attribute, viewport, Width
inline elements, display
inline scripts, JavaScript, Load above-the-fold code first
inline styles, Stylesheets, Inline Styles
input methods
accessibility issues regarding, Keyboard only
touch screens (see touch screens)
Instapaper service, Adaptive Content
internationalization, Document Structure
Internationalization Techniques: Authoring HTML & CSS (W3C), Document Structure
Internet connection, The Bloated Web
Introduction to HTML (Mozilla Developer Network), HTML for Responsive Sites
in, unit of measurement, Measurements
inverted pyramid technique, How Users Read
iPad, Fixed-Width Design
(see also mobile devices)
browsers for, Browsers and Operating Systems
history of, More Devices, Mobile Phones
operating systems for, Browsers and Operating Systems
Paper app, Thinking About Layout
screen size for, Navigation Location
iPhone, Types of Devices
(see also mobile devices)
aspect ratios, Aspect Ratio
browsers for, Browsers and Operating Systems
history of, Fixed-Width Design, Mobile Websites, Touch
operating systems for, Browsers and Operating Systems
resolution, Pixels and Resolution, Forget About Pixels

J

Jankord, Brett (author)
Style Guide Boilerplate, Style Guide
JavaScript, JavaScript
asynchronous loading of, Defer execution
blocking, How JavaScript Works
compressing, Avoid Redirects
concatenating files, Minimizing HTTP Requests
deferring execution of, Load above-the-fold code first
delaying loading of, Load above-the-fold code first
events
hover events, Gestures
onclick events, Hover, How JavaScript Works
onload events, Rendering the <body>
touch events, Gestures
execution of, External resources
flyout navigation using, Flyout Navigation
HTML and CSS as alternative to, Asynchronous loading
inline scripts, Load above-the-fold code first
libraries and frameworks, Using HTML/CSS instead of JavaScript
minifying, Use Straightforward Code
select menu navigation using, Select Menu Navigation
toggle push navigation using, Toggle Push Navigation
Jehl, Scott (developer)
Picturefill polyfill, <picture>
jPanelMenu plug-in, Flyout Navigation
JPEG files, JPEG
jQuery library, Using HTML/CSS instead of JavaScript
jQuery Responsive Menu Plugin, Select Menu Navigation
Just Ask: Integrating Accessibility Throughout Design (Henry), Accessibility (Universal Design)

K

Kadlec, Tim, The Bloated Web
Keith, Jeremy, Conditionally Loading Content
Kellum, Scott, High-Density Screens
keyboard-only navigation, Keyboard only
Krantz, Peter (developer)
Fangs Screen Reader Emulator, Accessibility (Universal Design)

L

language, plain, Headings
laptop computers, Desktop and Laptop Computers
aspect ratios, Aspect Ratio
browsers for, Browsers and Operating Systems
operating systems for, Browsers and Operating Systems
screen size for, Navigation Location
latency, The Bloated Web
layout, Thinking About Layout
prototypes for, Mobile First
sketches for, Thinking About Layout
wireframes for, Wireframes
left navigation, Keep It Simple
libraries, JavaScript, Using HTML/CSS instead of JavaScript
linear design, Linear Design
line-height property, CSS, Relationship Between Sizes
line length, Line Height
<link> element, Stylesheets, Media Query Structure
liquid layout, Fixed-Width Design, Responsive Design Tools
literacy, Headings
LiveReload tool, Minification
logos, Branding

M

Marcotte, Ethan, Preface, Responsive Web Design, Maximum Width
margin property, CSS, Height and Width
margins, Height and Width, Testing Line Length, Margins and Padding
max-height property, CSS, Toggle Push Navigation
maximum-scale attribute, viewport, User-Scalable
max-width property, CSS, Setting a Maximum Width, Media Queries, Summary
McGrane, Karen (author)
Content Strategy for Mobile, Content Strategy
m-dot websites, Mobile Web Browsing, Responsive Web Design, Getting the Right Design on Every Device
measurements, Organizing Your Stylesheet
for borders, Margins and Padding
for box-sizing, Borders
for margins and padding, Height and Width
for positioning elements, Fixed
for text, Why 100%?
units of measurement for, Organizing Your Stylesheet
media attribute, <style> element, Using Media Queries in Stylesheet Links
media features, querying, Other Ways to Use Media Queries
@media rule, What’s a Media Query?
media queries, More Devices, Media Queries
for aspect ratio, Aspect Ratio
breakpoints for, Testing Media Query Answers, Design for Small Screens First, Using a Grid, How to Choose Breakpoints
browser support for, Other Media Features
changing typefaces using, Changing Typeface for Screen Size
for color characteristics of screen, Other Media Features
design ranges for, Breakpoints
for images, Flexible Image Dimensions
in <link> element, Media Query Structure
for navigation layout, Styling Your List
for orientation of screen, Viewport Width and Height
for resolution of screen, Aspect Ratio
for screen dimensions, Viewport Width and Height
structure of, What’s a Media Query?
in <style> element, Using Media Queries in Stylesheet Links
in stylesheet import, Other Ways to Use Media Queries
in stylesheets, What’s a Media Query?
testing, Conditional Comments for Internet Explorer
uses for, What’s a Media Query?, Other Ways to Use Media Queries
for viewport dimensions, Other Ways to Use Media Queries, Breakpoints
Media Types (W3C), Media Query Structure
metadata, Adaptive Content
<meta> element
charset attribute, The Page Title
viewport attribute, Charset
initial-scale attribute, Width
maximum-scale attribute, User-Scalable
user-scalable attribute, Width
width attribute, Media Queries, Viewport
Meyer, Eric (developer)
reset stylesheet by, Reset
minification of code, Use Straightforward Code
Minify tool, Minimizing HTTP Requests
min- properties, CSS (see specific properties)
min-width property, CSS, Media Queries, srcset
Mixture tool, Minification
mm, unit of measurement, Measurements
mobile content strategy, Content Strategy
(see also content: strategy for)
Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More (Neil), Navigation Patterns
mobile devices, Fixed-Width Design
(see also specific devices)
browsers for, Fixed-Width Design, Browsers and Operating Systems
content parity for, Plain Language
emulators and simulators for, Browsers and Operating Systems
ereaders, Tablets
feature phones, Types of Devices
game consoles, Tablets
media queries for, More Devices
operating systems for, Browsers and Operating Systems
screen size of, Navigation Location
separate website for, Just the Basics, Mobile Web Browsing
smartphones, Types of Devices, Navigation Location, Browsers and Operating Systems
tablets, Mobile Phones
testing on, Why Use Real Devices for Testing
touch screens for (see touch screens)
which to support, Cognitive Disabilities
mobile first design, Focusing on Mobile First
mobile-only users, The Myth of the Mobile User
mobile-primary users, Mobile-Only Users
Mobitest tool, Measuring Performance
Modernizr tool, IE Support, RESS
monochrome media feature, Other Media Features
Moore, Jordan, Navigation Icon
MQtest.io website, Conditional Comments for Internet Explorer, Two-Column Layout, Testing Line Length
multi-device usage, Mobile-Only Users
multi-touch screen, Touch
MyFonts web fonts, Well-Designed Fonts

N

National Center for Education Statistics (NCES), Headings
<nav> element, Screen Readers, Creating a Page, Unstyled Page, Start Small, Navigation Patterns
navigation
abandoned, Abandoned Navigation
consistency across screen widths, Goal-Based Navigation
goal-based, Goal-Based Navigation
incorporating in header, Sticky Menus for Wider Screens
links in, choosing, Navigation Links
patterns for, Increasing touch target size, Keep It Simple
bottom navigation, Flyout Navigation
flyout navigation, Select Menu Navigation
footer navigation, Top Navigation
horizontal navigation, Styling Your List
left navigation, Keep It Simple
priority navigation, Priority Navigation
select menu navigation, Priority Navigation
sticky menus, Abandoned Navigation
toggle overlay navigation, Toggle Push Navigation
toggle push navigation, Footer Navigation
top navigation, Keep It Simple, Navigation Patterns
responsive features of, Navigation and Header Layout
simplicity of, Goal-Based Navigation, Keep It Consistent
subnavigation, not using, Bottom Navigation
navigation icon, Complicated Header
NCES (National Center for Education Statistics), Headings
Neil, Theresa (author)
Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More, Navigation Patterns
Nielsen, Jakob, Plain Language
Normalize.css reset stylesheet, Reset
not operator (in media query), Media Query Structure

O

onclick events, Hover, How JavaScript Works
onload events, Rendering the <body>
only operator (in media query), Media Query Structure
opacity of images, Background Images
OpenDeviceLab website, Why Use Real Devices for Testing
Opera browser, File Compression
(see also browsers)
color media feature, Other Media Features
Presto rendering engine for, Browser Prefixes
operating systems
testing, Browsers and Operating Systems
which to support, Cognitive Disabilities
Ordering Disorder: Grid Principles for Web Design (Vinh), Designing with Grids
orientation media feature, Viewport Width and Height
or operator (in media query), Media Query Structure
outline, content, Content outline
overflow-wrap property, Hyphenation

P

padding, Height and Width, Margins and Padding
for images, The <img> element
to increase touch target size, Touch Target Size
padding property, CSS, Height and Width
page header (see header, for web page)
PageSpeed Insights tool, Browser Caching, How JavaScript Works
PageSpeed Tools, Performance
pancake icon (see navigation icon)
Paper app, Thinking About Layout
parallel loading, External resources
parentheses (( )), enclosing media query expressions, Media Query Structure
patterns, navigation, Increasing touch target size, Keep It Simple
bottom navigation, Flyout Navigation
flyout navigation, Select Menu Navigation
footer navigation, Top Navigation
left navigation, Keep It Simple
priority navigation, Priority Navigation
select menu navigation, Priority Navigation
sticky menus, Abandoned Navigation
toggle overlay navigation, Toggle Push Navigation
toggle push navigation, Footer Navigation
top navigation, Keep It Simple, Navigation Patterns
percent (%), unit of measurement, Measurements
performance
blocking CSS, reducing, CSS
blocking JavaScript, reducing, How JavaScript Works
browser caching, enabling, File Compression
CDN affecting, CSS Frameworks
CMS affecting, Content Delivery Networks (CDN)
code files
compressing, Avoid Redirects
concatenating, Minimizing HTTP Requests
minifying, Use Straightforward Code
simplifying, Measuring Performance
content, conditionally loading, Conditionally Loading Content
CSS frameworks, reducing, CSS
as design element, Performance as Design
hosting service affecting, CSS Frameworks
HTTP redirects, avoiding, Avoid Redirects
HTTP requests, reducing, Minification
images, optimizing, SVG, Third-Party Code
importance of, Why Performance Matters
JavaScript libraries, reducing, Using HTML/CSS instead of JavaScript
measuring, Rendering the <body>
page weight affecting, Connections
reflows and repaints affecting, Conditionally Loading Content
rendering tasks affecting, The Bloated Web
RESS affecting, Reflows and Repaints
third-party code, avoiding, Third-Party Code
Photoshop, Responsive Design Tools
<picture> element, srcset
Picturefill polyfill, <picture>
pinch-to-zoom gesture, Gestures
Pingdom Website Speed Test tool, Measuring Performance
pixels, Measurements
as absolute measurement, Screen Distance
for images, SVG
for text, Creating the Font Stack, Nested ems
plain language, Headings
PNG files, GIF
point (pt), unit of measurement, Measurements
polyfills
for box-sizing, Box-Sizing
for HTML5, IE Support
for media queries, Conditional Comments for Internet Explorer
for responsive images, <picture>
position property, CSS, Positioning
presentation, separating from content, Separating Content and Presentation
(see also CSS (Cascading Style Sheets))
Presto rendering engine, Browser Prefixes
print value in media attribute, Media Query Structure
priority navigation, Priority Navigation
progressive enhancement, Design Ranges
properties, CSS (see specific properties)
prototypes, Mobile First
compared to wireframes, Mobile First
contents of, What’s In a Prototype?
frameworks for, How Many Page Layouts to Create
number of layouts in, Start With the Basics
responsive, Wireframes
tools for, Frameworks
pseudo-classes, Inline Styles
pseudo-elements, Inline Styles
pt (point), unit of measurement, Measurements
px (pixel), unit of measurement (see pixels)

Q

QuickConcat tool, Minimizing HTTP Requests

R

Rach, Melissa, Content Strategy
Content Strategy for the Web, Second Edition, Content Strategy
reading level, Headings
reading methods, Content Audit/Inventory
redirects, DNS Request, Avoid Redirects
reference pixels, Pixels and Resolution
reflows of content, Conditionally Loading Content
Reichenstein, Oliver, Third-Party Code
relative positioning, CSS, Positioning, Fixed
relative units of measurement, Measurements
rem, unit of measurement, Measurements, Screen Distance, Nested ems, Deciding between ems and rems, Margins and Padding
rendering engines, Browser Prefixes
repaints of content, Conditionally Loading Content
reset stylesheet, Using the Cascade
resolution
of images, SVG
of screen, Aspect Ratio
resolution media feature, Aspect Ratio
resources (see books and publications)
Respond.js polyfill, Conditional Comments for Internet Explorer
responsive design + server-side components (RESS), Reflows and Repaints
Responsive Design Workflow (Hay), Thinking About Layout
responsive images, Alignment
Responsive Images Community Group (W3C), Proposed Client-Side Solutions
Responsive.io service, HiSRC
responsive navigation, Navigation and Header Layout
Responsive Patterns website (Frost), Navigation Patterns, Toggle Push Navigation
responsive prototypes, Wireframes
responsive web design (RWD), Preface, What Is Responsive Design?
benefits of, Responsive Web Design, The Browser
coding (see CSS; HTML; JavaScript)
cost of, Responsive Design Is Not Always the Best Option
design elements
columns, Using columns, Two-Column Layout
content components, Content outline
(see also content)
grids, Progressive Enhancement, Using Floats
images (see images)
maximum page width, Adding a Media Query
navigation (see navigation)
performance as, Performance as Design
typography (see fonts; text)
design process, Design Ranges
content hierarchy, Linear Design
device-agnostic design, Multi-Device Usage
layout, Thinking About Layout
linear design, Linear Design
mobile first, Start Small, Focusing on Mobile First
progressive enhancement, Design Ranges
prototypes, Mobile First
sketches, Thinking About Layout
small screen first, Design for Small Screens First, Start Small
style guide for, Style Tiles
tools for, Responsive Design Tools
visual design, Frameworks
wireframes, Wireframes
flexible content (see flexible units of measurement)
history of, Preface, Responsive Web Design
media queries (see media queries)
partial responsiveness, Focusing on Mobile First
search engine optimization, Optimized for Search, Why Performance Matters
user experience (see user experience)
when not to use, Responsive Design Is Not Always the Best Option
ReSRC service, HiSRC
RESS (responsive design + server-side components), Reflows and Repaints
retina display (see high-density screen)
role attribute
<aside> element, <footer>
<footer> element, <footer>
<header> element, Screen Readers
<nav> element, Screen Readers, Navigation Patterns
Rose, Dan, Responsive Design Tools
rotation of screen, Rotate
RSS reader, Adaptive Content
rules (see style rules, CSS)
Rutter, Richard, Typefaces
RWD (see responsive web design (RWD))

S

Safari browser, File Compression
(see also browsers)
Resize extension, Validators
resolution media feature, Aspect Ratio
WebKit rendering engine for, Browser Prefixes
Salminen, Viljami (developer)
MQtest.io website, Conditional Comments for Internet Explorer
Santa Maria, Jason, Typefaces
Scala, Giovanni (developer)
Check My Colors tool, Color contrast
scaling (see zooming)
scan media feature, Other Media Features
Schmitt, Christopher (author)
Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive Projects, Compressing Images
HiSRC plug-in, Adaptive Images
screen, Media Queries
(see also viewport)
aspect ratio of, Aspect Ratio
color characteristics of, Other Media Features
dimensions of, Viewport Width and Height
high-density, Pixels and Resolution
orientation of, Viewport Width and Height
resolution of, Aspect Ratio, SVG
rotation of, allowing for, Rotate
size of, Navigation Location
touch screen (see touch screens)
screen value in media attribute, What’s a Media Query?
screen readers, Structural Elements, Accessibility (Universal Design), Emulators and Simulators
<script> element, JavaScript
async attribute, Defer execution
defer attribute, Load above-the-fold code first
search engine optimization, Optimized for Search, Why Performance Matters
<section> element, Unstyled Page
select menu navigation, Priority Navigation
SelectNav.js plug-in, Select Menu Navigation
selectors, CSS, How CSS Works
self-hosted fonts, Well-Designed Fonts
semantic markup, Structural Elements
semicolon (;), separating CSS declarations, How CSS Works
Sencha.io SRC service, HiSRC
shiv, HTML5, IE Support, Adding Content, Separating Content and Presentation
Shorr, Brad, Content Strategy
simulators, for mobile devices, Browsers and Operating Systems
single-threaded execution, External resources
sizing text, Creating the Font Stack
sketches, for layout, Thinking About Layout
slash, asterisk (/* */), enclosing CSS comments, Keeping It Simple
small-screen first, Design for Small Screens First, Start Small
smartphones, Types of Devices
(see also mobile devices)
browsers for, Browsers and Operating Systems
operating systems for, Browsers and Operating Systems
screen size for, Navigation Location
Smush.it tool, Compressing Images
SocialCount tool, Third-Party Code
social media widgets, Third-Party Code
<span> element, Unstyled Page
specificity, CSS, How It Works, Inherited Rules
speech recognition software, Keyboard only
Spencer, Donna, Content Audit/Inventory
sprites, image, Content Images, Third-Party Code
src attribute, <img> element, Content Images, The <img> element
srcset attribute, <img> element, Proposed Client-Side Solutions
standards, HTML, Versions of HTML
static positioning, CSS, Positioning
sticky menus, Abandoned Navigation
style attribute, HTML, Stylesheets
<style> element, Stylesheets, Using Media Queries in Stylesheet Links
Style Guide Boilerplate (Jankord), Style Guide
style guide, for website, Style Tiles
style rules, CSS, How CSS Works
embedded, Browser Prefixes
guidelines for, Everything Else
!important rule, How It Works
inherited, Inline Styles, Reset
inline, Stylesheets, Inline Styles
resetting, Using the Cascade
stylesheets, CSS, Stylesheets
(see also CSS)
importing, Other Ways to Use Media Queries
optimizing, How CSS Works
organizing, Keeping It Simple
style tiles, Visual Design
Sublime Text code editor, The Browser
subnavigation, skipping, Bottom Navigation
Sullivan, Nicole, Reflows and Repaints
SVG files, GIF
SVG Swap plug-in, SVG

T

tablets, Mobile Phones
(see also mobile devices)
browsers for, Browsers and Operating Systems
operating systems for, Browsers and Operating Systems
screen size, Navigation Location
Tapworthy: Designing Great iPhone Apps (Clark), Touch
testing
assistive technology, Emulators and Simulators
browsers, Browsers and Operating Systems
operating systems, Browsers and Operating Systems
on real devices, Why Use Real Devices for Testing
resizing browser window for, Validators
validators for, Device Labs
without images, Emulators and Simulators
text
CSS styles for, CSS Alternatives
fonts for (see fonts)
HTML styles for, Start with HTML
hyphenation for, Adjusting Margins and Font Size
line height for, Relationship Between Sizes
line length for, Line Height
margins for, Testing Line Length, Margins and Padding
overflow wrap for, Hyphenation
size of, Screen readers, Creating the Font Stack
absolute measurements for, Screen Distance
accessibility issues regarding, Screen readers
defaults for, Absolute Versus Relative, Using fallback values
increasing, keystroke for, Why 100%?
pixels for, Creating the Font Stack
ratios between levels, Deciding between ems and rems
relative measurements for, Screen Distance
screen distance affecting, Forget About Pixels
units of measurement for, Screen Distance, Why 100%?
typefaces for, Start with HTML
whitespace around, Hyphenation
third-party code, minimizing, Third-Party Code
“three-click” rule, Goal-Based Navigation
Thumbr.io service, HiSRC
title attribute, <img> element, Writing Good Alt Text
<title> element, Document Structure
toggle overlay navigation, Toggle Push Navigation
toggle push navigation, Footer Navigation
top navigation, Keep It Simple, Navigation Patterns
touch events, Gestures
Touch.js plug-in, Hover
touch screens, Desktop and Laptop Computers
capacitive touch, Touch
delay on, Hover
gestures used with, Gestures
JavaScript events for, Gestures
multi-touch, Touch
navigation location for, Increasing touch target size
touch target size for, Touch Target Size
TouchSwipe plug-in, Gestures
touch target size, Touch Target Size
transcriptions, Color blindness
transitions, CSS, Toggle Push Navigation
Trident rendering engine, Browser Prefixes
Typecast service, Font Services
typefaces, Start with HTML
(see also text)
fonts for, Choose Your Typeface First
changing based on screen size, Margins and Padding
choosing, Choose Your Typeface First
font services, Font Services
linking to, Font Services
self-hosted, Well-Designed Fonts
setting for HTML elements, Linking to Font Files
testing, Font Services
Typekit service, Font Services
typography, What’s a Media Query?
typography, Typography
(see also fonts; text; typefaces)

U

<ul> element, Adding Content
United States Federal Plain Language Guidelines, Plain Language
units of measurement, Organizing Your Stylesheet
(see also measurements)
absolute, Organizing Your Stylesheet
flexible, Media Queries
relative, Measurements
for text, Screen Distance, Why 100%?
universal design (see accessibility (universal design))
URL (or HTTP) redirect, DNS Request, Avoid Redirects
user experience, Mobile and Beyond
accessibility (universal design), Accessibility (Universal Design)
complete content on all devices, Users Come First
consistency across devices, Users Come First, Mobile-Only Users
content priority based on device, The Myth of the Mobile User
mobile-only users, The Myth of the Mobile User
mobile-primary users, Mobile-Only Users
reading level, Headings
reading methods, Content Audit/Inventory
user research, Strategy and Planning
user-scalable attribute, viewport, Width

V

validators, Device Labs
video captions, Color blindness
viewport, Media Queries
viewport, Charset
(see also screen)
aspect ratio of, media queery for, Aspect Ratio
dimensions of
HTML settings for, Charset
media queries for, What’s a Media Query?, Other Ways to Use Media Queries
height media feature, Other Ways to Use Media Queries
width media feature, Other Ways to Use Media Queries, Breakpoints
viewport attribute, <meta> element, Charset
initial-scale attribute, Width
maximum-scale attribute, User-Scalable
user-scalable attribute, Width
width attribute, Media Queries, Viewport
Vinh, Khoi (author)
Ordering Disorder: Grid Principles for Web Design, Designing with Grids
visual accessibility issues
color blindness, Color contrast
color contrast, Screen readers
screen readers, Structural Elements, Accessibility (Universal Design), Emulators and Simulators
text size, Screen readers
visual design, Frameworks
style guide for, Style Tiles
style tiles for, Visual Design
tools for, Responsive Design Tools
Voiceover for OS X, Emulators and Simulators

W

W3C (World Wide Web Consortium), Versions of HTML
CSS Validation Service, Validators
Markup Validation Service, Validators
Responsive Images Community Group, Proposed Client-Side Solutions
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), Structural Elements
(see also role attribute)
Warren, Samantha (designer)
Style Tiles, Visual Design
Way, Jeffrey, Reset
WCAG (Web Content Accessibility Guidelines), Color contrast
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA), Structural Elements
(see also role attribute)
Web Content Accessibility Guidelines (WCAG), Color contrast
Web Ink service, Font Services
WebKit rendering engine, Browser Prefixes
WebPagetest tool, Measuring Performance
websites
content of (see content)
design of
fixed-width design, Fixed-Width Design
history of, Just the Basics
responsive (see responsive web design (RWD))
separate mobile website, Just the Basics, Mobile Web Browsing
goals of, Responsive Workflow
page weight of, Connections
rendering process for, The Bloated Web
user research for, Strategy and Planning
Webtype service, Font Services
What & Why of Usability, User Research
whitespace, Hyphenation
width attribute, viewport, Media Queries, Viewport
width media feature, Other Ways to Use Media Queries, Breakpoints
width property, CSS, Ems, Adding a Media Query, Flexible Image Dimensions
Wilson, Drew, Icon Fonts
wireframes, Wireframes
word-wrap property, CSS, Hyphenation
workflow
content, structuring, User Research
goals of website, Responsive Workflow
prototypes, Mobile First
sketches, Thinking About Layout
small screen first, Start Small
tools for, Responsive Design Tools
user research, Strategy and Planning
visual design, Frameworks
World Wide Web Consortium (see W3C (World Wide Web Consortium))
Wroblewski, Luke, Navigation Location, Bottom Navigation, RESS

Y

YSlow tool, Measuring Performance
YUI Compressor tool, Minification

Z

zooming, Width
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset