- Page 1 and 2: CAMERON ADAMS ~ MARK BOULTON ~ ANDY
- Page 3: Web Standards Creativity: Innovatio
- Page 7 and 8: vi Chapter 3: New York Magazine: My
- Page 9 and 10: viii What about the CSS? . . . . .
- Page 11 and 12: 27d0a0f23f58db367d7de33f07c424c3
- Page 13 and 14: xii To all of my friends at World O
- Page 15 and 16: xiv However, it was Dave Shea’s Z
- Page 17 and 18: xvi The basics of CSS are relativel
- Page 19 and 20: 2 1 Semantic Structure, Dirty Prett
- Page 22 and 23: The brief Building a website compli
- Page 24: Semantic structure We’re flying t
- Page 27 and 28: 10 Background, masthead, and menu W
- Page 29 and 30: 12 Masthead The next task is to tak
- Page 31 and 32: 14 Navigation menu The next stage i
- Page 33 and 34: 16 With the unordered lists where w
- Page 35 and 36: 18 Content highlights With the back
- Page 37 and 38: 20 This results in the basic table
- Page 39 and 40: 22 While I feel this pairing is a s
- Page 41 and 42: 24 2 Taming a Wild CMS with CSS, Fl
- Page 43 and 44: 26 Setting the scene Your client as
- Page 45 and 46: 28 A crash course on CMS In general
- Page 47 and 48: 30 Design on a dime My primary goal
- Page 49 and 50: 32 The markup is but a shell Since
- Page 51 and 52: 34 Lifehouse wallpaper - 800x600 &
- Page 53 and 54: 36 Positioning elements While we're
- Page 55 and 56:
38 #sidebar .module { color:#A07029
- Page 57 and 58:
40 So, let’s say that for most mo
- Page 59 and 60:
42 sIFR me timbers When you’re de
- Page 61 and 62:
44 Spit and polish There are a few
- Page 63 and 64:
46 Issues with the design One of th
- Page 65 and 66:
48 Taking care of Internet Explorer
- Page 67 and 68:
50 3 New York Magazine: My, What a
- Page 69 and 70:
52 Mo’ metro, mo’ style The New
- Page 71 and 72:
54 To create a fluid-width content
- Page 73 and 74:
56 As with our IE5/Mac-specific CSS
- Page 75 and 76:
58 Furthermore, we apply min-width
- Page 77 and 78:
60 For more information about hasLa
- Page 79 and 80:
62 As you can see in Figure 3-8, th
- Page 81 and 82:
64 As you’ve likely noticed, the
- Page 83 and 84:
66 What’s the benefit to this app
- Page 85 and 86:
68 Intelligent modules So with our
- Page 87 and 88:
70 There are a few items to note he
- Page 89 and 90:
72 Tying in JavaScript We can invok
- Page 91 and 92:
74 Inspired by a venerable JavaScri
- Page 93:
76 Summary This chapter is by no me
- 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