Foreword |
|
xiii | |
About the Authors |
|
xiv | |
About the Technical Reviewer |
|
xv | |
Acknowledgments |
|
xvi | |
|
|
1 | (6) |
|
|
3 | (4) |
|
A Live Site with Working Code Examples |
|
|
3 | (1) |
|
|
4 | (1) |
|
Defining High Performance |
|
|
5 | (1) |
|
|
5 | (1) |
|
|
5 | (1) |
|
|
5 | (1) |
|
|
6 | (1) |
|
Responsive/Adaptive Design |
|
|
6 | (1) |
|
|
6 | (1) |
|
A Deeper Understanding of CSS |
|
|
6 | (1) |
|
Part 2 Performance Basics |
|
|
7 | (58) |
|
Chapter 2 Development Principles |
|
|
9 | (12) |
|
Code for Modern Browser Performance |
|
|
9 | (2) |
|
Reduce the Number of Elements in the HTML |
|
|
10 | (1) |
|
|
10 | (1) |
|
Use CSS to Manage Boundaries |
|
|
11 | (3) |
|
Embrace Progressive Enhancement |
|
|
14 | (2) |
|
Using Feature Detection to Drive Progressive Enhancement |
|
|
15 | (1) |
|
Embrace Separation of Concerns |
|
|
16 | (4) |
|
|
17 | (1) |
|
|
18 | (1) |
|
|
18 | (2) |
|
|
20 | (1) |
|
Chapter 3 Performance Guidelines |
|
|
21 | (16) |
|
Why Page Load Time Matters |
|
|
21 | (1) |
|
|
22 | (13) |
|
|
22 | (5) |
|
Use a Content Delivery Network (CDN) |
|
|
27 | (1) |
|
Avoid Empty src or href Attributes |
|
|
28 | (1) |
|
|
29 | (1) |
|
Compress Components with GZIP |
|
|
29 | (1) |
|
|
30 | (1) |
|
Put JavaScript at the Bottom |
|
|
30 | (1) |
|
|
31 | (1) |
|
|
31 | (1) |
|
Minify JavaScript and CSS |
|
|
32 | (1) |
|
|
33 | (1) |
|
Specify Dimensions for Images |
|
|
34 | (1) |
|
Use Tables Only for Tabular Content |
|
|
34 | (1) |
|
|
34 | (1) |
|
|
34 | (1) |
|
|
35 | (1) |
|
|
35 | (2) |
|
Chapter 4 Responsive Web Design |
|
|
37 | (14) |
|
|
37 | (12) |
|
|
38 | (7) |
|
|
45 | (2) |
|
|
47 | (2) |
|
|
49 | (2) |
|
Chapter 5 Understanding the Web Reuse Pattern |
|
|
51 | (14) |
|
Some Final Observations on Web Reuse |
|
|
62 | (1) |
|
|
62 | (1) |
|
|
62 | (1) |
|
|
62 | (3) |
|
Part 3 Building a Web Site |
|
|
65 | (210) |
|
|
67 | (14) |
|
Setting the Boilerplate Options |
|
|
68 | (7) |
|
Conditional Statements Around the HTML Element |
|
|
69 | (3) |
|
Setting the Character set |
|
|
72 | (1) |
|
Controlling IE's Compatibility Mode |
|
|
72 | (2) |
|
Prompting for Installation of Google Chrome Frame |
|
|
74 | (1) |
|
Controlling the Viewport on IPhones |
|
|
74 | (1) |
|
|
74 | (1) |
|
|
75 | (1) |
|
|
75 | (1) |
|
Setting up the Site's Grid |
|
|
75 | (4) |
|
|
79 | (2) |
|
|
81 | (26) |
|
|
82 | (5) |
|
|
87 | (19) |
|
|
89 | (1) |
|
|
90 | (1) |
|
|
90 | (4) |
|
:before and :after Pseudo-classes |
|
|
94 | (1) |
|
|
95 | (7) |
|
|
102 | (3) |
|
|
105 | (1) |
|
|
106 | (1) |
|
|
107 | (8) |
|
Building a Better Country Selector |
|
|
107 | (1) |
|
|
108 | (5) |
|
|
110 | (1) |
|
|
111 | (2) |
|
|
113 | (2) |
|
|
115 | (16) |
|
|
116 | (14) |
|
|
120 | (5) |
|
|
125 | (4) |
|
|
129 | (1) |
|
|
130 | (1) |
|
Chapter 10 Fractal Design Patterns |
|
|
131 | (10) |
|
|
132 | (2) |
|
|
133 | (1) |
|
|
133 | (1) |
|
|
133 | (1) |
|
|
134 | (1) |
|
Going Fractal: A Case Study |
|
|
134 | (6) |
|
Faster Page Development Time |
|
|
136 | (1) |
|
|
136 | (1) |
|
|
136 | (1) |
|
Segregating CSS and JavaScript |
|
|
137 | (2) |
|
Combining CSS and JavaScript |
|
|
139 | (1) |
|
|
140 | (1) |
|
|
141 | (14) |
|
|
141 | (4) |
|
|
145 | (7) |
|
Using JavaScript When CSS Fails Us |
|
|
152 | (1) |
|
|
153 | (2) |
|
Chapter 12 Sidebox Control |
|
|
155 | (10) |
|
|
155 | (1) |
|
|
156 | (4) |
|
|
160 | (3) |
|
|
163 | (2) |
|
Chapter 13 Button Control |
|
|
165 | (16) |
|
|
166 | (2) |
|
|
166 | (1) |
|
|
166 | (1) |
|
|
166 | (1) |
|
|
167 | (1) |
|
|
167 | (1) |
|
|
167 | (1) |
|
|
167 | (1) |
|
Coding the Button Control |
|
|
168 | (2) |
|
|
170 | (9) |
|
|
179 | (2) |
|
|
181 | (12) |
|
|
181 | (6) |
|
|
181 | (1) |
|
|
182 | (3) |
|
|
185 | (2) |
|
|
187 | (3) |
|
|
187 | (1) |
|
|
187 | (2) |
|
|
189 | (1) |
|
|
190 | (1) |
|
|
190 | (3) |
|
Chapter 15 Product Control |
|
|
193 | (12) |
|
|
195 | (1) |
|
The HTML Produced by the Control |
|
|
196 | (2) |
|
|
198 | (3) |
|
The Data for the Product Control |
|
|
201 | (1) |
|
|
202 | (2) |
|
|
204 | (1) |
|
|
205 | (18) |
|
|
208 | (1) |
|
|
209 | (1) |
|
|
210 | (1) |
|
|
211 | (11) |
|
Styles for All Treatments |
|
|
211 | (1) |
|
Styles for the Wide Treatment |
|
|
212 | (5) |
|
Styles for the Narrow Treatment |
|
|
217 | (2) |
|
|
219 | (3) |
|
|
222 | (1) |
|
|
223 | (24) |
|
|
224 | (2) |
|
|
226 | (1) |
|
|
227 | (2) |
|
|
229 | (1) |
|
|
229 | (4) |
|
|
233 | (13) |
|
Styles for All Treatments |
|
|
233 | (3) |
|
Styles for the Horizontal Treatment |
|
|
236 | (5) |
|
Styles for the Vertical Treatment |
|
|
241 | (5) |
|
|
246 | (1) |
|
|
247 | (28) |
|
|
249 | (2) |
|
|
251 | (2) |
|
|
253 | (4) |
|
|
257 | (4) |
|
|
261 | (1) |
|
|
261 | (11) |
|
|
272 | (1) |
|
|
273 | (2) |
Index |
|
275 | |