A B C D E F G - H I J K - L M N O P Q - R S T U V W X- Y- Z
@import lines, placement in style sheets, 188
@import rule (CSS), 77
@media.info, media query tools, 295
<!doctype> tag (HTML5), 56, 69
<datalist> form tag (HTML5), 248, 253-254, 258
<input> form tag (HTML5), 245-248, 252-254, 258
<label> form tag (HTML5), 248
<meta charset> tag (HTML5), 56-57, 69
<meta name=viewport> tag (HTML5), 120-122
<title> tag (HTML5), 56-57, 69
<video> tag (HTML5), 58, 69, 215-216
!important keyword and cascade (CSS), 89
; (semicolon), CSS rules, 74
51Degrees, device detection scripts, 311
A List Apart magazine, 334
RWD, 11
Switchy McLayout, 8
position: relative property, 24
Adaptive Images website image tools, 296
adaptive websites, 8
Adobe Edge Inspect website, testing tools, 299
advertising, 110
RESS and, 329
AGPL v3 (Affero General Public License), WURFL licensing concerns, 313
all media type (CSS), 126
analytics (websites)
planning a responsive website, 107-108
and media query expression (CSS), 129
Andersson-Wise Architects website, 334
Android SDK emulator and website tests, 272
Apache Mobile Filter, device detection scripts, 311
Apple devices, portrait mode, 142
aspect-ratio media feature (CSS), 128-130
attribute selector (CSS), 75
attributes (HTML5)
autocomplete, 248
autofocus, 248
novalidate, 249
placeholder text, 248
required, 249
autocomplete form attribute (HTML5), 248
autofocus form attribute (HTML5), 248
Axure website, wireframe tools, 293
back to top links and navigation, 177
background images
changing, 205
table-based layouts, 20
background-color property (CSS), 80, 91
Balsamiq website, wireframe tools, 293
banners (clickable) and tablets, 42
BBC News website, 342
Berners-Lee, Sir Tim, 48
best practices
bullet points (numbered lists), 341
fonts, 339
layouts, 338
links, 341
minification, 339
numbered lists (bullet points), 341
video, 339
Blackberry emulator and website tests, 272
Bootstrap website, frameworks, 294
borders
columns, 159
table-based layouts, 19
boxes, sizing, 173
braille media type (CSS), 126
break-after property (CSS), 162-163
break-before property (CSS), 162-163
break-inside property (CSS), 162-163
breakpoints (CSS). See also media queries (CSS)
best practices, 136, 142, 336-338
media queries for larger screens, 141
styles for all devices, 137-139
styles for small screens, 139-140
fixed-width layouts, 151
limiting, 281
retina devices, 143
testing
resizing browser to test breakpoints, 266
widths of popular devices, 141-142
browsers
cell phones (basic), 38
CSS, browser prefixes, 50
detection scripts, 30
mobile detection scripts, 31
object detection scripts, 31-32
fonts, sizing for different browser widths, 188-189
graded browser support (Yahoo!), 48
Opera Mini browser, 38
tables, rearranging data according to browser, 229-231
testing websites
local tests, 264
resizing browser to test breakpoints, 266
setting up a regimen, 265
updating browsers, 264
using multiple browsers, 264
unsupported new features, 11
updating, 264
bullet points (numbered lists), best practices, 341
Bushell, David, 236
buttons (toggle), 177
cameras, 283
Can I Use website, testing tools, 299
Carnegie Mellon University and IoT, 118
cascade (CSS), 49
!important keyword, 89
media queries, fluid (liquid) layouts, 156
overwriting styles, 141
case-sensitivity, HTML5, 56
CDN (Content Delivery Network), 279
cell phones
basic cell phones
browsers, 38
features of, 37
handheld media type (CSS), 126
smartphones
form fields, 40
support for, 40
cells (tables)
layouts, 16
centering elements via CSS, 84
ch measurement unit (CSS), 195
Champeon, Steven, 10
child selector (CSS), 74
City of Snohomish, Washington website, 343
class attribute (HTML5), 62, 69
class selector (CSS), 74
clean coding
XHTML, 63
clear property (CSS), 26, 33, 85, 91
clickable banners and tablets, 42
client devices, building/testing to, 282
closing HTML5 tags, 58
Coca Cola and IoT, 118
coding
HTML5, clean code guidelines, 62-63, 98
XHTML, clean code guidelines, 63
CoffeeCup Responsive Layout Maker, editor tools, 302
CoffeeCup Web Form Builder, 298
Collison, Simon, 338
color
column-rule-color property (CSS), 161-163
CSS
background-color property, 80, 91
border colors, 85
color-index media feature, 128-130
columns
column-count property (CSS), 27, 33, 161-163
column-fill property (CSS), 162-163
column-gap property (CSS), 27, 33
column-min-width property (CSS), 27, 33
column-rule-color property (CSS), 27, 34, 161-163
column-rule property (CSS), 27, 33, 162-163
column-rule-style property (CSS), 27, 34, 161-163
column-rule-width property (CSS), 27, 34, 161-163
column-span property (CSS), 27, 34, 162-163
column-width-policy property (CSS), 27, 33
column-width property (CSS), 27, 33, 161-163
columns property (CSS), 161-163
layouts, 158
borders, 159
multicolumn layouts (CSS), 27-29
two-column layouts, creating in CSS, 86-88
comma-separated list media query expression (CSS), 129
comments, adding in CSS, 76
contact forms
online tools, 298
content, best practices, 340-342
converting
HTML 4.01 web pages to HTML5, 64-66
images to retina-ready images, 209
cookies and data storage, RESS, 328
costs
managing (best practices), 342-343
negative impact of RWD, 282
Crafty Responsive Tables, 236
CSS (Cascading Style Sheets), 73
@import lines, placement of, 188
!important keyword and cascade, 89
borders, color, 85
boxes, sizing, 173
breakpoints. See also CSS, media queries
best practices, 136, 142, 336-338
defining media queries for larger screens, 141
defining styles for every device, 137-139
defining styles for small screens, 139-140
fixed-width layouts, 151
limiting, 281
retina devices, 143
starting breakpoints, 144
widths of popular devices, 141-142
browser prefixes, 50
cascade, 49
!important keyword, 89
fluid (liquid) layouts, 156
media queries, 156
overwriting styles, 141
ch measurement unit and sizing fonts, 195
color
background-color property, 80, 91
borders, 85
comments, adding, 76
CSS 1, 7
CSS 2, 7
break-before property, 162-163
break-inside property, 162-163
browser prefixes and column properties, 27
column-count property, 27, 33, 161-163
column-gap property, 27, 33, 161-163
column-min-width property, 27, 33
column properties and browser prefixes, 27
column-rule property, 27, 33, 162-163
column-rule-color property, 27, 34, 161-163
column-rule-style property, 27, 34, 161-163
column-rule-width property, 27, 34, 161-163
column-span property, 27, 34, 162-163
column-width-policy property, 27, 33
column-width property, 27, 33, 161-163
fonts and CSS3 measurement units, 195
testing, 299
em measurement unit and sizing fonts, 188, 193
expressions (media queries)
and expression, 129
comma-separated list expression, 129
not expression, 130
only expression, 130
floats, columns in layouts, 158-161
fonts
font faces, 78
font stacks, 78
importing, 185
ch measurement unit, 195
CSS3 measurement units, 195
different browser widths, 188-189
line-height property, 189
margin-bottom property, 190
margin-top property, 190
relative font sizing, 188
rem measurement unit, 195
vh measurement unit, 195
vmax measurement unit, 195
vmin measurement unit, 195
vw measurement unit, 195
forms
images
background images, 205
icons, 210
layouts
break-before property, 162-163
break-inside property, 162-163
centering elements, 84
column-count property, 161-163
column-rule-color property, 161-163
column-rule-style property, 161-163
column-rule-width property, 161-163
column-width property, 161-163
fixed-width layouts, 151
fluid (liquid) layouts, 153
line-height property, 189
margin-bottom property, 190
margin-top property, 190
media features
media queries. See also breakpoints
adding, 127
cascade, 156
CSS Media Queries Test website, 295
defining, 125
defining styles for larger screens, 141
displaying video from different sources, 218
fixed-width layouts, 152
fluid (liquid) layouts, 155-156
online tools, 295
retina-ready images, 209
select menus, 173
server requests and speed, 128
testing, 295
media types
all media type, 126
braille media type, 126
embossed media type, 126
handheld media type, 126
projection media type, 126
screen media type, 126
speech media type, 126
tty media type, 126
tv media type, 126
navigation
repositioning navigation bar, 171-173
resizing navigation bar, 170-171
positioning layouts
column-min-width property, 27, 33
column-rule-color property, 27, 34
column-rule-style property, 27, 34
column-rule-width property, 27, 34
column-width-policy property, 27, 33
position: relative property, 24
precedence
determining, 90
progressive enhancement, 49-50
properties
background-color property, 80, 91
break-before property, 162-163
break-inside property, 162-163
column-count property, 161-163
column-rule-color property, 161-163
column-rule-style property, 161-163
column-rule-width property, 161-163
column-width property, 161-163
rem measurement unit and sizing fonts, 195
resets, 190
rules
@import rule, 77
semicolon (;), 74
specificity, 89
syntax, 74
writing, 73
selectors
attribute selector, 75
child selector, 74
class selector, 74
descendant selector, 74
element selector, 74
ID selector, 74
universal selector, 75
server requests and speed, 128
style sheets
importing, 77
linking to/from, 77
managing, 78
web page optimization, 279
styles
importance of styling everything, 141
tables
creating tables out of other tags, 239-240
layout tables and advertising, 237-238
rearranging data according to browser, 230-231
resizing, 228
scrolling tables, 235
unrecognized properties, 50
vh measurement unit and sizing fonts, 195
video
displaying from different sources, 218
vmax measurement unit and sizing fonts, 195
vmin measurement unit and sizing fonts, 195
vw measurement unit and sizing fonts, 195
web page optimization, 279
data storage and cookies, RESS and, 328
degradation (graceful), 9-10, 47-48
descendant selector (CSS), 74
design changes, limiting, 281
design patterns, navigation, 168-169, 294-295
alternative link locations to navigation menu, 178
back to top links, 177
fly-out menus, 177
navigation bar
toggle buttons, 177
design tools
sketch sheets, 292
Design Week Portland website, 335
designer workload, problems with RWD, 280-281
Detect Mobile Browsers website, mobile detection scripts, 31
detection scripts
browser detection scripts, 30
device detection scripts, 307, 310-311
online tools, 311
feature detection scripts, 307
polyfills, 310
mobile detection scripts, 31
object detection scripts, 31-32
Device Anywhere emulator and website tests, 272
device detection scripts, 307, 310
online tools, 311
WURFL
freeware/licensing concerns, 313
installing, 313
server-side device detection, 326-327
using, 315
website, 311
device-aspect-ratio media feature (CSS), 128-130
DeviceAtlas, device detection scripts, 311
device-height media feature (CSS), 128, 131
device-width media feature (CSS), 128-131, 142
DNS lookups, web page optimization, 280
DOM elements (unobtrusive JavaScript), adding behavior to, 96
downloading
images, performance, 207
slow downloads and RWD
impatient customers, 277
optimizing performance, 278-280
Dreamweaver as a web editor, 302
drop-down menus in forms, 252
editors
professional design editors, 302
elastic layouts, 157
element selector (CSS), 74
em measurement unit (CSS), relative font sizing, 188, 193
design patterns, 295
email types and login forms, 248
embedding
embossed media type (CSS), 126
emulators, website tests, 272-273
enhancement (progressive), 10, 47-48
content
content layer and HTML, 49
separating content from presentation and functionality, 48
styling content via CSS, 49-50
graded browser support (Yahoo!), 48
interactivity, 50
expenses, managing
negative impact of RWD, 282
experience (users), best practices, 334-335
expressions (CSS media queries)
and expression, 129
comma-separated list expression, 129
not expression, 130
only expression, 130
external style sheets (CSS), 77-78
eyes and retina devices, 42
breakpoints (CSS), 143
building retina-ready websites, 43
planning for a responsive website, 110
reasons for building retina-ready websites, 43
video, 218
fallback fonts, 185
Family Crafts website, 338
fault tolerance and graceful degradation, 9-10, 47-48
feature detection scripts, 307
Modernizr
development version of, 312
geolocation support script, 312-313
HTML5 and, 312
Internet Explorer 8 and, 312
polyfills, 310
Filament Group, 236
Firefox Responsive Design View, testing tools, 299-300
FitText font tool, 296
fixed-width layouts, 149, 154, 159
benefits of, 151
breakpoints, 151
CSS, 151
drawbacks of, 152
media queries, 152
flexible designs, best practices, 338-339
flexible-width images, 201-204
flow (normal) in HTML web pages, 25
fluid (liquid) layouts, 152, 159
benefits of, 153
cascade, 156
CSS, 153
drawbacks of, 154
fixed widths, 154
percentage widths, 153
fly-out menus, 177
fonts
best practices, 339
choosing, 183
CSS
adjusting fonts on web pages, 80-83
font faces, 78
font stacks, 78
CSS3 measurement units, 195
fallback fonts, 185
font stacks, 185
Google Fonts, 183
importing, 185
online tools, 296
ch measurement unit (CSS), 195
customer control of browser font size, 188
em measurement unit (CSS), 188, 193
guidelines, 190
line-height property (CSS), 189
margin-bottom property (CSS), 190
margin-top property (CSS), 190
relative font sizing, 188, 193-194
rem measurement unit (CSS), 195
sizes for different browser widths, 188-189
small devices, 190
vh measurement unit (CSS), 195
vmax measurement unit (CSS), 195
vmin measurement unit (CSS), 195
vw measurement unit (CSS), 195
testing, 296
Food Sense website, 339
FooTable table tool, 298
Foresight.js image tool, retina devices, 297
forms
allowing customer input, 252-254
combining form fields, 252
design guidelines for smaller devices
allowing customer input, 252-254
combining form fields, 252
drop-down menus, 252
removing extraneous page elements, 251
removing form fields, 252
simplicity, 251
drop-down menus, 252
form fields, 40
hiding passwords, 250
HTML5
<datalist> form tag, 248, 253-254, 258
<input> form tag, 245-248, 252-254, 258
<label> form tag, 248
autocomplete attribute, 248
autofocus attribute, 248
novalidate attribute, 249
placeholder text attribute, 248
required attribute, 249
validating forms without scripting, 249-250
online tools, 298
removing
extraneous page elements, 251
form fields, 252
responsive forms, creating, 254-258
simplicity, 251
validating without scripting, 249-250
Formstack Responsive Web Form Builder, 298
Foundation website, frameworks, 294
four-column layouts (CSS), 27-29
GIF, single-pixel GIF tricks, 6-7
Fonts, 183
graceful degradation, 9-10, 47-48
graded browser support (Yahoo!), 48
graphics, SVG and retina-ready image creation, 210
grid media feature (CSS), 128, 131
handheld media type (CSS), 126
hCalendar microformat (HTML5), 66, 69
hCard microformat (HTML5), 66, 69
height
height media feature (CSS), 128, 131
image settings, 201
hiding
images, 205
passwords in forms, 250
highlighting text in HTML5, 60-61
horizontal scrolling, mobile friendly navigation, 168
hover navigation, 167
hRecipe microformat (HTML5), 66, 69
hReview microformat (HTML5), 66, 69
htaccess, retina device tools, 297
HTML3 (HyperText Markup Language version 3)
fonts
importing, 185
sizing, 194
images, 199
flexible-width images, 201-204
links, mobile friendly navigation, 167
tables
rearranging data according to browser, 229-230
scrolling tables, 235
HTML 4.01 (HyperText Markup Language version 4.01), converting web pages to HTML5, 64-66
HTML5 (HyperText Markup Language version 5), 55, 336
absolute positioning layouts, 22-24
attributes
autocomplete, 248
autofocus, 248
novalidate, 249
placeholder text, 248
required, 249
case-sensitivity, 56
clean code guidelines, 62-63, 98
forms
<datalist> form tag, 248, 253-254, 258
<input> form tag, 245-248, 252-254, 258
<label> form tag, 248
autocomplete attribute, 248
autofocus attribute, 248
form fields, 40
novalidate attribute, 249
placeholder text attribute, 248
required attribute, 249
validating forms without scripting, 249-250
frameworks, HTML5 Boilerplate website, 294
HTML 4.01 web pages, converting, 64-66
images
image tools, 297
scaling images, 280
table-based layouts, 20
web page optimization, 280
JavaScript (unobtrusive), 96
Modernizr feature detection tools and, 312
normal flow in web pages, 25
progressive enhancement, 49
recommendation for, 49
borders, 19
defining cells, 16
images, 20
tags
<meta name=viewport> tag, 120-122
closing, 58
initial-scale attribute, 121-122
maximum-scale attribute, 121-122
minimum-scale attribute, 121-122
overused tags, 63
required tags, 56
user-scalable attribute, 121-122
templates
basic template, 56
testing
online tools, 299
type attribute, 98
validating, 67
video
web pages
normal flow, 25
optimization, 280
websites, testing, 265, 268-270
well-formed HTML, 49
wireframe tools, Moqups website, 293
HTTP requests, minimizing, 278
hybrid layouts, 157
IcoMoon website, font and image tools, 296
icons, creating from retina-ready images, 210
id attribute (HTML5), 61-62, 69
ID selector (CSS), 74
if statements (unobtrusive JavaScript), 99
images, 199
background images, changing, 205
best practices, 341
changing displayed images, 204-205
converting to retina-ready images, 209
displaying, RESS, 328
download speeds, 207
flexible designs, best practices, 339
flexible-width images, 201-204
height, setting, 201
hiding, 205
icons, creating from retina-ready images, 210
Internet Images website, 341
large images displaying on smaller screens, 205
optimizing
retina-ready images, 208
web pages, 280
resolution, 208
RESS and, 328
retina-ready images, 207
converting standard images to, 209
creating icons, 210
creating images via SVG, 210
CSS media queries, 209
defining, 208
guidelines, 208
JavaScript, 210
optimizing, 208
resolution, 208
scaling images, web page optimization, 280
small web pages, best practices, 339
table-based layouts, 20
updating on-the-fly, 208
importing
fonts, 185
style sheets, 77
initial-scale attribute (HTML5 tags), 121-122
installing
WURFL device detection scripts, 313
interactivity and unobtrusive JavaScript, 50
Internet Explorer 8 and Modernizr feature detection tools, 312
Internet Images website, 341
iOS SDK emulator and website tests, 272
IoT (Internet of Things), 118
iPad Peek, website tests, 272
iPhone
links, viewing, 167
tables, viewing, 225
Irish, Paul, 173
Is This Retina? website, 297
JavaScript
browser detection scripts, 30
mobile detection scripts, 31
feature detection tools, 310-313
images
image tools, 296
retina-ready images, 210
JavaScript Compressor tool, 299
Modernizr
development version of, 312
geolocation support script, 312-313
HTML5 and, 312
Internet Explorer 8 and, 312
website, 310
polyfills, 310
progressive enhancement, 50
RESS and, 329
retina device tools, 297
testing
online tools, 299
websites, 264
unobtrusive JavaScript, 50
adding behavior to DOM elements, 96
defining, 95
document.getElementById method, 100
if statements, 99
onclick events, 100
onmouseover events, 100
optimizing, 99
security, 100
separating structure from behavior, 95-96
usability, 97
web page optimization, 279
jQuery
font tools, 296
FooTable table tool, 298
forms
image tools, 297
navigation, 174
retina device tools, 297
select menus, 174
Stacktable.js table tool, 298
languages, Multi-Language Responsive Contact Form website, 298
layouts
borders, 159
columns
CSS layouts
break-before property, 162-163
break-inside property, 162-163
centering elements, 84
clear property, 26, 33, 85, 91
column-count property, 27, 33, 161-163
column-gap property, 27, 33, 161-163
column-min-width property, 27, 33
column-rule property, 27, 33, 162-163
column-rule-color property, 27, 34, 161-163
column-rule-style property, 27, 34, 161-163
column-rule-width property, 27, 34, 161-163
column-span property, 27, 34, 162-163
column-width property, 27, 33, 161-163
position: relative property, 24
editor tools, 302
elastic layouts, 157
fixed-width layouts, 159
benefits of, 151
breakpoints, 151
CSS, 151
drawbacks of, 152
media queries, 152
flexible designs, best practices, 338
fluid (liquid) layouts, 152, 159
benefits of, 153
cascade, 156
CSS, 153
drawbacks of, 154
fixed widths, 154
percentage widths, 153
hybrid layouts, 157
online tools, 302
table-based layouts, 15, 17-18, 158, 236
borders, 19
defining cells, 16
images, 20
two-column layouts, creating in CSS, 86-88
Lettering.js font tool, 296
line-height property (CSS), 189
linking
back to top links and navigation, 177
best practices, 341
navigation
alternative link locations to navigation menu, 178
mobile friendly navigation, 167
style sheets, 77
web pages, id attribute (HTML5), 62
liquid (fluid) layouts, 152, 159
benefits of, 153
cascade, 156
CSS, 153
drawbacks of, 154
fixed widths, 154
percentage widths, 153
lists, comma-separated list expression (CSS media queries), 129
lookups (DNS), web page optimization, 280
Macaw web editor website, 302
Marcotte, Ethan, 11
margin property (CSS), 83-84, 91
margin-bottom property (CSS), 190
margin-top property (CSS), 190
maximum-scale attribute (HTML5 tags), 121-122
media features (CSS)
media queries (CSS). See also breakpoints (CSS)
adding, 127
cascade and fluid (liquid) layouts, 156
defining, 125
fixed-width layouts, 152
fluid (liquid) layouts, 155-156
large screen devices, defining styles for, 141
Media Query Snippets website, 295
online tools, 295
retina-ready images, 209
select menus, 173
server requests and speed, 128
testing, 295
video, displaying different sources, 218
media types (CSS)
all media type, 126
braille media type, 126
embossed media type, 126
handheld media type, 126
projection media type, 126
screen media type, 126
speech media type, 126
tty media type, 126
tv media type, 126
menus
drop-down menus in forms, 252
fly-out menus, 177
Meyer, Chris, 190
minimum-scale attribute (HTML5 tags), 121-122
mobile detection scripts, 31
mobile devices
built-in hardware, 283
cameras, 283
cell phones
geolocation, 283
links and mobile friendly navigation, 167
Mobile Device Rentals website, 271
mobile first thinking, 115
experimenting with new technologies, 117
making a site mobile friendly, 118-121
mobile friendly websites, 118
user options, 119
mobile only design, 121
navigation (mobile friendly), 166
horizontal scrolling, 168
hover navigation, 167
links, 167
offline access, 283
Popular Pages on Mobile (Google Analytics), 111
retina devices, 42
building retina-ready websites, 43
reasons for building retina-ready websites, 43
tablets
clickable banners, 42
form fields, 40
resolution, 41
MobiReady website, testing tools, 299
Mockflow website, wireframe tools, 293
mockups, wireframe tools, 292-293
Modernizr
development version of, 312
geolocation support script, 312-313
HTML5 and, 312
Internet Explorer 8 and, 312
monochrome media feature (CSS), 128, 131
Moqups website, wireframe tools, 293
mouse
onclick events (unobtrusive JavaScript), 100
onmouseover events (unobtrusive JavaScript), 100
moving navigation bar, 171-173
multicolumn layouts (CSS), 27-29
Multi-Language Responsive Contact Form website, 298
navigation
back to top links, 177
alternative link locations to navigation menu, 178
back to top links, 177
fly-out menus, 177
repositioning navigation bar, 171-173
resizing navigation bar, 170-171
toggle buttons, 177
failures of RWD navigation, 165
fly-out menus, 177
horizontal scrolling, 168
hover navigation, 167
importance of RWD navigation, 165
links
alternative link locations to navigation menu, 178
mobile friendly design, 167
mobile friendly navigation, 166
horizontal scrolling, 168
hover navigation, 167
links, 167
navigation bar
toggle buttons, 177
negative reaction to RWD, 282-283
NetMarketShare.com website, Opera Mini browser, 38
normal flow in HTML web pages, 25
not media query expression (CSS), 130
novalidate form attribute (HTML5), 249
numbered lists (bullet points), best practices, 341
object detection scripts, 31-32
offline access of mobile devices, 283
onclick events (unobtrusive JavaScript), 100
online resources
design tools
sketch sheets, 292
detection scripts, 31
Detect Mobile Browsers website, mobile detection scripts, 31
device detection tools, 311
editors
professional design editors, 302
font tools, 296
form tools, 298
media query tools, 295
planning tools
sketch sheets, 292
RESS, 319
advertising and, 329
benefits of, 320
cookies and data storage, 328
CSS for basic RWD websites, 323-326
HTML for basic RWD websites, 321-323, 326
images and, 328
JavaScript and, 329
server-side device detection, 326-327
sketch sheets, 292
sourceforge.net website and WURFL, 31
table tools, 297
text tools, 296
type tools, 296
only media query expression (CSS), 130
onmouseover events (unobtrusive JavaScript), 100
Opera browser
document.getElementById method (unobtrusive JavaScript), 100
emulator and website tests, 272
Opera Mini browser, 38
optimizing
images, retina-ready images, 208
performance, 278
CDN, 279
CSS, 279
DNS lookups, 280
JavaScript, 279
minimizing HTTP requests, 278
scaling images in HTML, 280
scripts, 279
style sheets, 279
retina-ready images, 208
style sheets (CSS), 78
unobtrusive JavaScript, 99
options (user) and mobile friendly design, 119
orientation media feature (CSS), 128, 131
overused HTML5 tags, 63
padding property (CSS), 84, 91
Palford, Jeremy, 292
passwords, hiding in forms, 250
pattern form attribute (HTML5), 249-250
PDA (Personal Data Assistants), handheld media type (CSS), 126
percentage widths in fluid (liquid) layouts, 153
performance, optimizing
CDN, 279
CSS, 279
DNS lookups, 280
HTTP requests, minimizing, 278
images
downloading, 207
scaling in HTML, 280
JavaScript, 279
scripts, 279
style sheets, 279
Photoshop, sketch sheets and RWD planning, 292
PHP (Hypertext Preprocessor)
detection scripts
browser detection scripts, 30
mobile detection scripts, 31
image tools, 296
retina device tools, 297
testing websites, 264
Picturefill image tool, 297
Pixmobi Mobile Phone emulator and website tests, 272
placeholder text form attribute (HTML5), 248
plain text in login forms, 248
planning a responsive website
advertising, 110
content
flexible designs, best practices, 338-339
mobile devices, 115
experimenting with new technologies, 117
making a site mobile friendly, 118-121
mobile only design, 121
need for planning
planning tools
sketch sheets, 292
retina devices, 110
writing a plan, 112
polyfills, 310
Popular Pages on Mobile (Google Analytics), 111
portrait mode (Apple devices), 142
position property (CSS), 21, 33
position: relative property (CSS), 24
positioning
CSS layouts
column-min-width property, 27, 33
column-rule-color property, 27, 34
column-rule-style property, 27, 34
column-rule-width property, 27, 34
column-width-policy property, 27, 33
position: relative property, 24
precedence (CSS)
determining precedence, 90
printing
print media type (CSS), 126-127
prioritizing table data, 232
Prism emulator and website tests, 272
professional design editors, 302
progressive enhancement, 10
content
content layer and HTML, 49
separating content from presentation and functionality, 48
styling content via CSS, 49-50
graded browser support (Yahoo!), 48
interactivity, 50
Project Pencil website, wireframe tools, 293
projection media type (CSS), 126
properties (CSS)
background-color property, 80, 91
break-before property, 162-163
break-inside property, 162-163
column-count property, 161-163
column-rule-color property, 161-163
column-rule-style property, 161-163
column-rule-width property, 161-163
column-width property, 161-163
line-height property, 189
margin-bottom property, 190
margin-top property, 190
PXtoEM font tool, 296
rearranging table data according to brower, 229-231
relative font sizing, 188, 193-194
relative position property (CSS). See position: relative property (CSS)
rem measurement unit (CSS), 195
renting devices for website testing, 271
required form attribute (HTML5), 249
resets (CSS), 190
resizing
boxes, 173
resolution
resolution media feature (CSS), 128, 131
retina-ready images, 208
tablets, 41
resources (online)
design tools
sketch sheets, 292
detection scripts, 31
device detection, 311
editors
professional design editors, 302
font tools, 296
form tools, 298
media query tools, 295
planning tools
sketch sheets, 292
RESS, 319
advertising and, 329
benefits of, 320
cookies and data storage, 328
CSS for basic RWD websites, 323-326
HTML for basic RWD websites, 321-323, 326
images and, 328
JavaScript and, 329
server-side device detection, 326-327
sketch sheets, 292
sourceforge.net website and WURFL, 31
tables
responsive scripting, 236
table tools, 297
text tools, 296
type tools, 296
Responsive Design View (Firefox), testing tools, 299-300
Responsive Email Patterns website, design patterns, 295
Responsive Grid System website, frameworks, 294
Responsive Patterns website, design patterns, 295
Responsive Tables 2 website, 236
RESS (Responsive Wed Design + Server Side Components), 319
advertising and, 329
basic RWD websites
benefits of, 320
cookies and data storage, 328
images and, 328
JavaScript and, 329
server-side device detection, 326-327
retina devices, 42
breakpoints (CSS), 143
image tools, 297
planning for a responsive website, 110
retina-ready images, 207
converting standard images to, 209
creating icons, 210
creating images via SVG, 210
CSS media queries, 209
defining, 208
guidelines, 208
JavaScript, 210
Retina Images website, 297
retina-ready websites, 43
video, 218
rows (tables), table-based layouts, 19-20
rules (CSS)
@import rule, 77
semicolon (;), 74
specificity, 89
syntax, 74
writing, 73
RWD (Responsive Web Design)
best practices
bullet points (numbered lists), 341
fonts, 339
layouts, 338
links, 341
minification, 339
numbered lists (bullet points), 341
simplicity, 335
video, 339
client devices, building/testing to, 282
defining, 5
design tools
sketch sheets, 292
expertise, importance of, 281
adaptive websites, 8
progressive enhancement, 10
importance of, 44
mobile devices
mobile friendly websites, 118-121
mobile only design, 121
need for, 11
planning
advertising, 110
checking website analytics, 107-108
evaluating need for a responsive website, 106-107
examples for the need for planning, 105-106
retina devices, 110
writing a site plan, 112
planning tools
sketch sheets, 292
problems with
expense, 282
impatient customers, 277
mobile site expectations, 282-283
negative reaction to RWD, 282-283
optimizing performance, 278-280
RWD Table Patterns website, design patterns, 295
scaling images, web page optimization, 280
scan media feature (CSS), 128, 131
ScientiaMobile, WURFL licensing concerns, 313
screen media type (CSS), 126
scripts
detection scripts
browser detection scripts, 30
mobile detection scripts, 31
object detection scripts, 31-32
device detection scripts, 307, 310-311
online tools, 311
feature detection scripts, 307
polyfills, 310
geolocation support script and Modernizr, 312-313
polyfills, 310
tables, responsive scripting resources, 236
testing, online tools, 299
web page optimization, 279
scrolling
horizontal scrolling, mobile friendly navigation, 168
tables, 235
security
passwords, hiding in forms, 250
unobtrusive JavaScript, 100
selectors (CSS)
attribute selector, 75
child selector, 74
class selector, 74
descendant selector, 74
element selector, 74
ID selector, 74
universal selector, 75
semantic elements (HTML5), 49, 335
semicolon (;), CSS rules, 74
servers
CSS requests and speed, 128
server-side device detection and WURFL, 326-327
testing websites, 264
Sharp, Remy, 310
simplicity, user experience, 335
sizing
boxes, 173
ch measurement unit (CSS), 195
CSS3 measurement units, 195
customer control of browser font size, 188
different browser widths, 188-189
em measurement unit (CSS), 188, 193
guidelines, 190
line-height property (CSS), 189
margin-bottom property (CSS), 190
margin-top property (CSS), 190
relative font sizing, 188, 193-194
rem measurement unit (CSS), 195
small devices, 190
vh measurement unit (CSS), 195
vmax measurement unit (CSS), 195
vmin measurement unit (CSS), 195
vw measurement unit (CSS), 195
sketch sheets, RWD planning, 292
slow downloads and RWD
impatient customers, 277
optimizing performance, 278
CDN, 279
CSS, 279
DNS lookups, 280
JavaScript, 279
minimizing HTTP requests, 278
scaling images in HTML, 280
scripts, 279
style sheets, 279
small web pages, best practices, 338-339
smartphones
form fields, 40
handheld media type (CSS), 126
iPhone
viewing links, 167
viewing tables, 225
support for, 40
SmartPlanet website, mobile first design, 116
Snohomish Aquatic Center website, 337
sourceforge.net website and WURFL, 31
speech media type (CSS), 126
speeding up (optimizing) performance
CDN, 279
CSS, 279
DNS lookups, 280
JavaScript, 279
minimizing HTTP requests, 278
scaling images in HTML, 280
scripts, 279
style sheets, 279
spoofed user agent strings in Safari, 310
Squarespace online editor website, 302
Stacktable.js table tool, 298
StatCounter website, mobile first design, 115
storing data via cookies, RESS, 328
style sheets (CSS)
@import lines, placement of, 188
cascade, overwriting styles, 141
importing, 77
linking to/from, 77
managing, 78
web page optimization, 279
styles (CSS), inline styles, 76-77
SVG (Scalable Vector Graphics) and retina-ready image creation, 210
Switchy McLayout, 8
syntax, CSS rules, 74
tables and table-based layouts, 15, 17-18
borders, 19
cells
defining, 16
images, 20
online tools, 297
prioritizing data, 232
rearranging data according to browser, 229-231
responsive scripting resources, 236
responsiveness of, 226
scrolling tables, 235
smaller screens, 225
tablePress table tool, 298
tablets
clickable banners, 42
form fields, 40
resolution, 41
tags (HTML5)
<meta name=viewport> tag, 120-122
closing, 58
initial-scale attribute, 121-122
maximum-scale attribute, 121-122
minimum-scale attribute, 121-122
overused tags, 63
required tags, 56
user-scalable attribute, 121-122
Technology Review website, graceful degradation, 48
templates
HTML5 templates
basic template, 56
online tools, 303
testing
breakpoints
browser tests
local tests, 264
resizing browser to test breakpoints, 266
setting up a regimen, 265
updating browsers, 264
using multiple browsers, 264
client devices, 282
CSS3, online tools, 299
fonts, 296
HTML5
editors, 265
online tools, 299
limiting, 281
media queries, 295
PHP, 264
text, 296
type, 296
web pages, 281
websites, 263
customer assistance, 273
renting devices, 271
server tests, 264
testing without devices, 271-273
WYSIWYG editor tests, 264
text
best practices, 339
fonts
ch measurement unit (CSS), 195
choosing, 183
CSS3 measurement units, 195
customer control of browser font size, 188
em measurement unit (CSS), 188, 193
fallback fonts, 185
font stacks, 185
Google Fonts, 183
importing, 185
relative font sizing, 188, 193-194
rem measurement unit (CSS), 195
vh measurement unit (CSS), 195
vmax measurement unit (CSS), 195
vmin measurement unit (CSS), 195
vw measurement unit (CSS), 195
highlighting text, HTML5, 60-61
online tools, 296
plain text in login forms, 248
testing, 296
toggle buttons, 177
tools (online)
design tools
sketch sheets, 292
device detection tools, 311
editors
professional design editors, 302
font tools, 296
form tools, 298
media query tools, 295
planning tools
sketch sheets, 292
RESS, 319
advertising and, 329
benefits of, 320
cookies and data storage, 328
CSS for basic RWD websites, 323-326
HTML for basic RWD websites, 321-326
images and, 328
JavaScript and, 329
server-side device detection, 326-327
sketch sheets, 292
table tools, 297
text tools, 296
type tools, 296
tty media type (CSS), 126
tv media type (CSS), 126
two-column layouts, 86-88, 159, 162
type. See fonts
universal selector (CSS), 75
unobtrusive JavaScript, 50
defining, 95
document.getElementById method, 100
DOM elements, adding behavior to, 96
if statements, 99
onclick events, 100
onmouseover events, 100
optimizing, 99
security, 100
separating structure from behavior, 95-96
usability, 97
unrecognized properties in CSS, 50
unsupported new features in browsers, 11
updating
browsers, 264
images on-the-fly, 208
usability and unobtrusive JavaScript, 97
user agent strings and feature detection scripts, 308-309
user experience, best practices, 334-335
user options and mobile friendly design, 119
user-scalable attribute (HTML5 tags), 121-122
validating
email types in login forms, 248
forms without scripting, 249-250
HTML5, 67
vh measurement unit (CSS), 195
video
CSS and
displaying video from different sources, 218
different sources, displaying video from, 218
HTML5
retina devices, 218
small web pages, best practices, 339
viewport meta tag (HTML5), 268-270
vmax measurement unit (CSS), 195
vmin measurement unit (CSS), 195
vw measurement unit (CSS), 195
web editors
professional design editors, 302
web fonts. See fonts
web forms. See forms
web layouts. See layouts
web pages
best practices
clickable banners and tablets, 42
content, best practices, 340-342
design changes, limiting, 281
flexible designs, best practices, 338-339
linking
alternative link locations to navigation menu, 178
id attribute (HTML5), 62
navigation
alternative link locations to navigation menu, 178
back to top links, 177
failures of RWD navigation, 165
fly-out menus, 177
horizontal scrolling, 168
hover navigation, 167
importance of RWD navigation, 165
mobile friendly navigation, 166-168
repositioning navigation bar, 171-173
resizing navigation bar, 170-171
toggle buttons, 177
normal flow, 25
optimizing performance
CDN, 279
CSS, 279
DNS lookups, 280
JavaScript, 279
minimizing HTTP requests, 278
scaling images in HTML, 280
scripts, 279
style sheets, 279
small web pages, best practices, 338-339
testing
customer assistance, 273
limiting tests, 281
renting devices, 271
server tests, 264
testing without devices, 271-273
WYSIWYG editor tests, 264
WebOS emulator and website tests, 272
websites
adaptive websites, 8
Adobe Edge Inspect website, testing tools, 299
analytics
Google Analytics, 108
planning a responsive website, 107-108
Andersson-Wise Architects website, 334
Axure website, wireframe tools, 293
Balsamiq website, wireframe tools, 293
BBC News website, 342
Bootstrap website, frameworks, 294
Can I Use website, testing tools, 299
City of Snohomish, Washington website, 343
CSS Media Queries Test website, 295
design changes, limiting, 281
Design Week Portland website, 335
Detect Mobile Browsers website, mobile detection scripts, 31
Family Crafts website, 338
Food Sense website, 339
Foundation website, frameworks, 294
graceful degradation, 9-10, 47-48
HTML5
HTML5 Boilerplate website, 294
semantic HTML, 49
well-formed HTML, 49
IcoMoon website, font and image tools, 296
Internet Images website, 341
Is This Retina? website, 297
Macaw web editor website, 302
Media Query Snippets website, 295
Mobile Device Rentals website, 271
mobile devices
mobile friendly websites, 118-121
mobile only design, 121
MobiReady website, testing tools, 299
Mockflow website, wireframe tools, 293
Moqups website, wireframe tools, 293
Multi-Language Responsive Contact Form website, 298
NetMarketShare.com website, Opera Mini browser, 38
optimizing performance, 278
CDN, 279
CSS, 279
DNS lookups, 280
JavaScript, 279
minimizing HTTP requests, 278
scaling images in HTML, 280
scripts, 279
style sheets, 279
Pixmobi Mobile Phone emulator and website tests, 272
planning
advertising, 110
checking website analytics, 107-108
evaluating need for a responsive website, 106-107
examples for the need for planning, 105-106
retina devices, 110
writing a site plans, 112
Prism emulator and website tests, 272
progressive enhancement, 10
content layer and HTML, 49
content separation from presentation and functionality, 48
CSS and content stylization, 49-50
HTML and content layer, 49
interactivity, 50
styling content via CSS, 49-50
Project Pencil website, wireframe tools, 293
Responsive Email Patterns website, design patterns, 295
Responsive Grid System website, frameworks, 294
Responsive Patterns website, design patterns, 295
Responsive Tables 2 website, 236
retina-ready websites
building, 43
Retina Images website, 297
RWD Table Patterns website, design patterns, 295
SmartPlanet website, mobile first design, 116
Snohomish Aquatic Center website, 337
Squarespace online editor website, 302
StatCounter website, mobile first design, 115
Technology Review website, graceful degradation, 48
testing, 263
customer assistance, 273
HTML editors, 265
JavaScript, 264
PHP, 264
renting devices, 271
server tests, 264
WYSIWYG editor tests, 264
WebOS emulator and website tests, 272
Weebly online editor website, 303
Windows Phone Developer Tools emulator and website tests, 272
Wix online editor website, 303
WURFL website, 311
Yahoo! website, graded browser support, 48
Zurb Responsive Tables website, 297
Weebly online editor website, 303
well-formed codes
XHTML, 63
width
breakpoints (CSS), 141-142, 151
column-rule-width property (CSS), 161-163
column-width property (CSS), 161-163
fixed-width layouts, 159
benefits of, 151
breakpoints, 151
CSS, 151
drawbacks of, 152
media queries, 152
flexible-width images, 201-204
fluid (liquid) layouts, 152, 159
fixed widths, 154
percentage widths, 153
fonts, sizing for different browser widths, 188-189
percentage widths, fluid (liquid) layouts, 153
width attribute (HTML5 tags), 120-122
width media feature (CSS), 128-131
Windows Phone Developer Tools emulator and website tests, 272
wireframes (layouts), 147-148, 292-293
Wix online editor website, 303
WordPress, 298
workload (designers), problems with RWD, 280-281
Wroblewski, Luke, 319
WURFL (Wireless Universal Resource FiLe), 31
freeware/licensing concerns, 313
installing, 313
server-side device detection, 326-327
using, 315
website, 311
WYSIWYG (What You See Is What You Get) editors, testing websites, 264
XHTML (Extensible HyperText Markup Language), clean code guidelines, 63
Yahoo! website, graded browser support, 48
YSlow analyzer, speed (optimization) tool, 299
Zurb Responsive Tables website, 297