- Page 1 and 2:
CAMERON ADAMS ~ MARK BOULTON ~ ANDY
- Page 3 and 4:
Web Standards Creativity: Innovatio
- Page 6 and 7:
Contents About the Technical Review
- Page 8 and 9:
PART 2: EFFECTIVE PRINT TECHNIQUES
- Page 10 and 11:
About the Technical Reviewer Molly
- Page 12 and 13:
Mark Boulton I’d like to thank Kh
- Page 14 and 15:
Getting Creative with Web Standards
- Page 16 and 17:
Figure 5. The Zen Garden is still g
- Page 18 and 19:
Layout Magic Welcome to Part 1 of o
- Page 20:
Before starting Erskine Design in 2
- Page 23 and 24:
6 Figure 1-2. The completed Dirty P
- Page 26 and 27:
Dirty pretty presentation When buil
- Page 28 and 29:
Background Next, we apply the main
- Page 30 and 31:
Finally, the main content selector
- Page 32 and 33:
The markup is as follows. Note that
- Page 34 and 35:
Unless you study the end result clo
- Page 36 and 37:
Tables Descendant selectors are ess
- Page 38 and 39:
These very simple rules, and the fa
- Page 40 and 41:
Conclusion Of course, building the
- Page 42 and 43:
Dan Rubin spends his days blending
- Page 44 and 45: Figure 2-1. On the left, the origin
- Page 46 and 47: The CMS challenge It doesn’t take
- Page 48 and 49: The next step was spending some tim
- Page 50 and 51: Videos Photos Extras Links Forum St
- Page 52 and 53: Ever find yourself getting lost in
- Page 54 and 55: z-index:100; left:29px; top:39px; m
- Page 56 and 57: By looking at the markup generated
- Page 58 and 59: Creating the illusion of vertical t
- Page 60 and 61: The first argument defines the CSS
- Page 62 and 63: Figure 2-9. Before (right) and afte
- Page 64 and 65: Such a #teaser After styling the #t
- Page 66 and 67: When time is of the essence, hacks
- Page 68 and 69: Ethan Marcotte has been designing a
- Page 70 and 71: Getting started The article templat
- Page 72 and 73: Structuring the CSS Looking above t
- Page 74 and 75: Adding a layer of style OK, enough
- Page 76 and 77: A quick preview of our code at this
- Page 78 and 79: For our narrow, 190-pixel-wide righ
- Page 80 and 81: Strictly speaking, these class name
- Page 82 and 83: Our column’s “background” wil
- Page 84 and 85: Figure 3-14. The exact same templat
- Page 86 and 87: Figure 3-17. The anatomy of our nar
- Page 88 and 89: So there we have it: a single class
- Page 90 and 91: Figure 3-21. The text size can be i
- Page 92 and 93: anchor.setAttribute("href", "javasc
- Page 96 and 97: Based in the UK, Andy Clarke (Malar
- Page 98 and 99: Figure 4-1. WorrySome.net homepage
- Page 100 and 101: In the absence of a more appropriat
- Page 102 and 103: Figure 4-2. Previewing the page in
- Page 104 and 105: Worries Introduction text Name and
- Page 106 and 107: I’m in the mood for style Despite
- Page 108 and 109: If the selector in the example is u
- Page 110 and 111: Making columns I think it was Steve
- Page 112 and 113: Next, you will add the individual s
- Page 114 and 115: Your columns are taking shape. Last
- Page 116 and 117: First, start by styling the short p
- Page 118 and 119: Styling the main navigation Underst
- Page 120 and 121: Styling the branding I hope that de
- Page 122 and 123: The accessibility list comes at the
- Page 124 and 125: If design for the Web is to progres
- Page 126 and 127: Jeff Croft is a web and graphic des
- Page 128 and 129: Some great uses for the humble PNG
- Page 130 and 131: If I had chosen to use GIF instead,
- Page 132 and 133: } Sweet. Smart. Beautiful. Le
- Page 134 and 135: Wilson Miner actually used the same
- Page 136 and 137: Figure 5-12. Photo detail page on w
- Page 138 and 139: The mask Another handy use for the
- Page 140 and 141: The color-changing icon By using th
- Page 142 and 143: OMG Sports Icons! a:link img, a
- Page 144 and 145:
A real-world use of AlphaImageLoade
- Page 146 and 147:
Effective Print Techniques Applied
- Page 148 and 149:
Mark Boulton is a typographic desig
- Page 150 and 151:
Figure 6-1. Magazine layouts, even
- Page 152 and 153:
However, as some people have noted,
- Page 154 and 155:
Macro elements Macro elements are t
- Page 156 and 157:
Adding gutters, margins, and paddin
- Page 158 and 159:
Building the XHTML Once I had an id
- Page 160 and 161:
WRC Log out International Ba
- Page 162 and 163:
Setting the width of the container
- Page 164 and 165:
The columns should now line up exac
- Page 166 and 167:
Styling the branding The branding o
- Page 168 and 169:
And now to the typography. At this
- Page 170 and 171:
Figure 6-18. The OCC in its previou
- Page 173 and 174:
156 7 Bridging the Type Divide: Cla
- Page 175 and 176:
158 A brief history of type Like al
- Page 177 and 178:
160 A page for Poe In order to demo
- Page 179 and 180:
162 reasonable increments and preve
- Page 181 and 182:
164 The almighty em An elastic layo
- Page 183 and 184:
166 Figure 7-10 demonstrates the re
- Page 185 and 186:
168 Adjacent selectors in an imperf
- Page 187 and 188:
170 Drop caps Drop caps are one for
- Page 189 and 190:
172 Span to the rescue Another smal
- Page 191 and 192:
174 My float and margins are intact
- Page 193 and 194:
176 Text figures vs. titling figure
- Page 195 and 196:
178 When faced with the following s
- Page 197 and 198:
180 Conclusion Make no mistake: the
- Page 199 and 200:
182 8 Print Magic: Using the DOM an
- Page 201 and 202:
184 A printing technique is born Sa
- Page 203 and 204:
186 Section 3 This is the final se
- Page 205 and 206:
188 3. Bring up the Print dialog bo
- Page 207 and 208:
190 Figure 8-3. The alert placehold
- Page 209 and 210:
192 // create a container for the l
- Page 211 and 212:
194 Now that we have the id we’re
- Page 213 and 214:
196 } { elm['on' + evType] = fn; }
- Page 215 and 216:
198 The styles are limited to the p
- Page 217 and 218:
200 The amended proof-of-concept pa
- Page 219 and 220:
202 600,500);return false;">apply i
- Page 221 and 222:
204 To get it looking like the prop
- Page 223:
206 The eagle-eyed among you will n
- Page 226 and 227:
Cameron Adams has one degree in law
- Page 228 and 229:
The trouble is that if you’re try
- Page 230 and 231:
Figure 9-2. The UX Magazine website
- Page 232 and 233:
Figure 9-4. The White Pages website
- Page 234 and 235:
Figure 9-5 shows our basic design,
- Page 236 and 237:
You’ve probably guessed that we
- Page 238 and 239:
Most browsers won’t have to go th
- Page 240 and 241:
Now, once the browser width has bee
- Page 242 and 243:
Figure 9-8 shows a modified view of
- Page 244 and 245:
The JavaScript When expand_collapse
- Page 246 and 247:
if (target.className.match(pattern)
- Page 248 and 249:
Reorganizing modules Expanding/coll
- Page 250 and 251:
ghost.appendChild(dragTarget.cloneN
- Page 252 and 253:
Now we’re fully prepared for user
- Page 254 and 255:
Then we can concern ourselves with
- Page 256 and 257:
➤ ➤ c. d. chapter 9 Creating Dy
- Page 258 and 259:
{ modules1Modules[modules1Modules.l
- Page 260 and 261:
Engaging, surprising, and inspiring
- Page 262 and 263:
Accessibility basics Web accessibil
- Page 264 and 265:
Navigation About Content Recent Pos
- Page 266 and 267:
The navigation will consist of a si
- Page 268 and 269:
We could incorporate the JavaScript
- Page 270 and 271:
* reset function used to set all na
- Page 272 and 273:
Low vision The CSS is constructed s
- Page 274 and 275:
If the person using the site then o
- Page 276 and 277:
Screen readers Testing this solutio
- Page 278 and 279:
Numbers 66-character line, 161 1024
- Page 280 and 281:
H hardware, 210 hasClass() method,
- Page 282 and 283:
S Safari caps and, 178 PNG transpar