I recently finished reading Web Design For Developers: A Programmer's Guide to Design Tools and Techniques and while I would like to have seen a few more specific details in a few places, the book overall does a great job of breaking down the mystic art of web design in a manner that allows almost any left-brained analytical developer to grasp the concepts and produce work of sufficient quality. If you are a software developer that is interested in web design, this is the book for you. It is full of great parallels between the two worlds and will help you understand how to create a design that works, while conforming to standards and be accessible to all types of browsers and devices.The book starts out by describing a fairly common set of scenarios where a customer is involved in some discussion about what their current website looks like and does, vs what they want it to do. It's an accurate portrayal of what really goes on in these types of meetings, leaving the reader with a sense of "ugh. not another nebulous, undefined set of `requirements'."After that brief introduction into the world of dealing with customers, the book jumps into the basics of design and talks about some of the key elements of laying out a site, including the need to do pencil sketches as wire frames. One mild issue that I have with this section of the book is that the author uses a lot of standard notations for various elements in the sketches but fails to define those notations or provide any links to information on what those notations are. While most of it is rather obvious, I was able to understand the intent of some of the sketches only because I have experience with wire framing tools that use the same notations.There is a large section devoted to dealing with color, choosing color schemes and understanding the basics of how color blind people will see your site. This was one of my favorite sections of the book - both toward the front and later on when discussing accessibility. The author does a great job of explaining how to select color schemes and themes, even with a complete absence of creativity and eye for design. He points to some great tools on the web and other resources that will help almost anyone pick a set of colors that work well together. He also talks about the difference between light that reflects off surfaces like in the real world, vs. light that is projected from a monitor. This is a subject that I have wondered about for more than 15 years - why is a monitor RGB and real world light RYB? - and I have never found such a clear and concise description of the difference.The next few sections of the book dive into creating graphics for the site, including the use of typography in those graphics. In these sections, the author introduces the notion of using a grid to layout your designs in the graphics editors and also in the actual website. In my 15+ years of working on the web, I have never heard of this before and I have to say that it was an eye opening experience to see how effective this technique is. You can take a site from "blech" with difficulty getting things lined up and spaced out correctly, to "wow" pretty quickly if you stick with the grid system that he outlines.Most of the book is then devoted to constructing the homepage of the site... that's right - one page and one page only. The in-depth analysis of every step in the process is quite amazing, though. I never once felt like the author was repeating any information or providing dull, dreary content that could have been better summarized (though I will admit that I skimmed over most of the html content. Since I was not actively building a website while reading this, I wanted to catch the high points of what he was saying without getting mired down in the angle bracket and attribute mechanics).Toward the end of the book, the author does spend what I felt like was an in inordinate amount of time discussing accessibility for disabled persons. He does do a good job of explaining why, though - he is a somewhat disabled person and uses assistive technologies to access websites on a daily basis. Having done accessibility work on the web in recent years, I can assure you that every point he makes is correct. If you need to create a site that conforms to "section 509" for example, this part of the book is a great place to start. Beyond the in-depth look at accessibility for disabled persons, though, the author does a great job of explaining how accessibility is more than just that. He discusses making website accessible by anyone, anywhere, on any device - not just a PC with a full web browser, but a mobile phone and other devices that provide limited web capabilities.Pro's For The Book:Approaches web development as developer not as a designer and makes the web feel comfortable for a back end software developer. In depth look at HTML and other web standards for getting a site done, not just for the sake of talking about web standards. Great discussion on CSS and how to effectively use it. Excellent information on color theory, graphics layout, and other seemingly "mystical" design areas. Provides a ton of information on great tools and how to use them to make your job easier.Con's For The Book:Covers HTML 4, with only a few minor notes about HTML 5. Uses Photoshop and Illustrator throughout the book - very expensive tools - though he does offer alternate suggestions but says that you'll have to figure them out yourself. Lacks a few resources for things like standard wireframe notation ("what does that big X in the middle of the sketch mean, anyways?!" ... well, it's an image place holder... but he never explained that).Final Score:In the end, I felt that this book was a great read and provided a lot of valuable information. Even with my extensive background in web design and development, I found multiple gems of knowledge that will have a direct impact on how I approach web design. I give the book a 4 out of 5. There were a few things I would have liked to see, but the book is an all around great resource for developers doing web design. On a technical note: if you buy the e-book version, make sure you get a color copy as a PDF or another format. You will lose out on all of the benefit of the images and differences that the author illustrates if you don't have a color copy. For me, I read the book on my kindle which is black & white. This made it hard for me to see what he was talking about - especially in the color theory section. However, I do have a print copy of the book as well, which made up for this.
Author(s): Brian P. Hogan
Series: The Pragmatic Programmers
Edition: 1
Publisher: Pragmatic Bookshelf
Year: 2009
Language: English
Pages: 327
Contents......Page 7
Building the Site......Page 0
Before We Get Started.........Page 13
The Design Process in Action......Page 14
YourFoodbox.com......Page 16
Acknowledgments......Page 17
The Basics of Design......Page 19
The Existing Site......Page 20
Gathering Requirements......Page 23
Know Your Purpose......Page 24
Where to Go from Here......Page 26
Sketching Your Ideas......Page 27
Summary......Page 31
The Basics of Color......Page 33
Color Context......Page 36
Evoking Emotion with Color......Page 37
Color Schemes......Page 41
The Web-Safe Color Palette......Page 46
Building Color Schemes......Page 47
Choosing Your Scheme......Page 58
Summary......Page 61
Font Anatomy......Page 62
Font Types......Page 63
Dealing with Font Limitations......Page 65
Selecting Our Fonts......Page 69
Using the Baseline Grid......Page 71
Summary......Page 76
Setting Up a Working Folder......Page 78
The Foodbox Logo......Page 79
What If We Need to Create Our Own Logo?......Page 84
Summary......Page 85
A Bit About Layers......Page 86
The Basic Structure......Page 87
Placing the Logo......Page 93
Adding a Reflection to Our Logo......Page 94
Wrapping Up......Page 96
Creating the Search Box......Page 97
The Browse Recipes Tag Cloud......Page 99
Mocking Up a Tasty Masthead......Page 100
Main Content......Page 103
Simulating the Browser......Page 104
Summary......Page 106
Creating the Search Icon......Page 107
Creating the Sign-up and Login Buttons......Page 112
You've Got Content!......Page 115
Summary......Page 117
Building the Home Page with HTML......Page 119
Working with Web Standards......Page 120
The Home-Page Structure......Page 121
Semantic Markup......Page 122
The Home-Page Skeleton......Page 124
The Header......Page 134
The Sidebar......Page 135
The Main Content......Page 141
The Footer......Page 145
Validating Your Markup......Page 149
HTML 5......Page 151
Summary......Page 154
Graphics Optimization......Page 155
Dealing with Different Graphics Formats......Page 157
Creating Slices......Page 161
Extracting the Banner as a Transparent PNG......Page 164
Exporting the Rest of the Elements......Page 166
Summary......Page 167
Browsers Are Awful......Page 168
The Basics of CSS......Page 169
How Browsers Use CSS......Page 175
Creating and Linking a New CSS Style Sheet......Page 178
Defining the Basic Structure, Header, and Footer......Page 179
Turning One Column into Two......Page 184
Applying Margins to Content......Page 189
Main Content......Page 190
Summary......Page 193
Preparing the HTML to Be Replaced......Page 194
Replacing the Other Headings......Page 195
Replacing Links......Page 197
Summary......Page 198
Setting Up the Colors and Fonts......Page 199
The Tag Clouds......Page 202
The Search Form......Page 203
Cleaning Up Some Loose Ends......Page 204
Summary......Page 206
Preparing for Print......Page 207
Removing Unnecessary Elements......Page 208
Setting Margins, Widths, and Fonts......Page 209
Fixing Links......Page 210
Dealing with Surprised Users......Page 212
Summary......Page 213
Preparing for Launch......Page 214
Deciding What to Support......Page 215
Internet Explorer: The Evil You Can't Ignore......Page 217
Internet Explorer 7......Page 219
Internet Explorer 6......Page 220
Internet Explorer 8......Page 226
Other Browsers......Page 227
Summary......Page 228
What Does Accessibility Mean to You?......Page 229
Basic Accessibility Issues......Page 230
Being All-Inclusive!......Page 239
Critical Business Issues......Page 242
Improving Our Site's Accessibility......Page 243
Tabbing......Page 247
Accessibility Testing Checklist......Page 249
Summary......Page 251
Creating the Favicon......Page 252
Summary......Page 254
Content Is King......Page 255
Choosing Keywords......Page 257
Reconciling Our Content......Page 259
Links and You......Page 260
Summary......Page 261
Mobile Users......Page 262
Thinking About the (Very) Small Screen......Page 264
Serving Mobile Content......Page 265
Deciding What to Support......Page 266
Summary......Page 273
Strategies for Improving Performance......Page 274
Determining Performance Issues......Page 275
Addressing Performance......Page 277
Image Optimization......Page 284
Summary......Page 286
Additional Pages and Templates......Page 287
Advanced Templating......Page 290
Grid Systems and CSS Frameworks......Page 291
CSS Alternatives......Page 296
Visual Effects......Page 298
Experiment and Practice!......Page 304
Books on Fonts and Typography......Page 305
Web sites......Page 306
Bibliography......Page 308
B......Page 310
C......Page 311
F......Page 313
H......Page 315
I......Page 316
L......Page 317
P......Page 318
S......Page 320
W......Page 321
Z......Page 322