Chapter One: Before You Begin
Like many who have been developing for the web for a decade or more, I came to it by accident—in my case, in 1994. At the time, I was a software developer; now I’m a software developer, web developer, conference organizer, and author. A background in programming isn’t as common among people who build websites as you might think. Many web developers—or web designers, front-end engineers, or whatever else you want to call us—came to the web from print and graphic design. As a consequence, web design and development has been heavily influenced by the tools and techniques of these design disciplines, in many ways more even than it’s been shaped by the principles of software engineering.
Some influences from print and graphic design have been good for the web; others less so. Many of the techniques developed for web page layout and typography were created in an attempt to mimic the printed page, despite the fact that the web is a screen-based medium, and screens are very different from paper. Websites can adapt to serve users with varying needs (those with better and worse eyesight, for instance), or to the wide range of screen sizes and resolutions—from tiny mobile phone screens to super high resolution 30” monitors—that are now used to access the web. As we’ll discuss further in Chapter 2, the changeability at the core of the web is not a bug—it’s a feature.
Since the birth of the web, many designers have written and spoken passionately about the web’s unique qualities and challenges, and one of those designers is Jeffrey Zeldman. There’s no better place to begin a study of web design and development than with Zeldman’s Designing with Web Standards, to which this book is intended to serve as a companion. In the book you’re holding now, I have attempted to complement Designing with Web Standards by diving deeply into the development side of building for the web.
Whether you’ve never looked at the markup for a single web page or have been developing websites for years, I hope you’ll find new and useful information and ideas in the pages that follow. To this end, I have both attempted to catalogue in considerable detail the web’s core technologies—HTML, CSS, and the DOM—and to explore current best practices in all of these areas, including ways in which we can build websites that are accessible, usable, search-engine friendly, and easy to maintain.
Above all, I hope to convey a sense of the best approaches to solving our industry’s genuinely complex problem—how to develop media-rich, interactive websites that are:
• accessible to as many people as possible, including those with disabilities,
• functional—and even attractive—on a broad range of web-enabled devices and in all modern browsers,
• a pleasure to use, and
• easy to maintain over long periods of time and despite changes in technology.
In fifteen years of web development experience, even someone as blockheaded as me acquires a collection of tips, techniques, and “gotchas,” as well as far more information about the intricacies of browser bugs than is entirely healthy. I’ve put as much of this know-how into this book as I could, in the hope that more of you can spend more of your time actually building great websites. More importantly, I’ve also included as much of the combined knowledge of the web’s innovative and generous designers and developers as I could possibly squeeze between these covers. The body of web development knowledge that has been built in the last fifteen years comes almost entirely from my fellow web developers, who have openly shared their lessons, skills, and expertise in a way that is both inspiring and, outside our industry, quite rare. We’ll meet some of these designers and developers by name in this book, but hundreds or thousands of other contributors to the web’s current state will go sadly unnamed.
Who Is This Book For?
The book is for anyone who wants to learn to build websites. It’s also for experienced developers who seek a deeper understanding of the industry’s core technologies and practices. Most web developers, myself included, are self-taught. Most new developers still find their way to the profession by teaching themselves, and as a profession, we teach each other: via blogs, books, articles, wikis, workshops, conferences, screencasts, and more.
One characteristic of the self-taught is that our knowledge is often “a mile wide and an inch deep.” There are good reasons for this: developing for the web is a highly practical endeavor, and knowledge “a mile deep and an inch wide” is of little use in our field. But it does mean that we often lack an inside-out understanding of even our core technologies: the DOM element object, for example, or CSS attribute selectors. And all too often, once we’ve figured out one way to accomplish a particular task, we tend to use that method over and over again instead of seeking out possibly better alternatives (after all, we’ve all got deadlines, and if we can solve the problem at all, that’s usually good enough).
So this book is also for practicing web developers who want to deepen their understanding of their practice, and of the technologies they use, to go beyond the methods and models they already know.
Finally, this book is for an emerging audience: the generation of web developers, who formally study web development in colleges and universities around the world. If you’re one of this new breed of developers, it’s my hope that you’ll be able to enter the profession with a solid understanding of the web’s underlying architecture instead of picking it all up on the fly as first-generation web developers have done. There will, of course, be new technologies and better practices to learn (and entirely new browser bugs to deal with), but with the foundations you’ll gain from this book, I hope and trust you’ll find it much easier to adapt to developments as they occur.
So Who Isn’t This Book For?
This book is not about learning cool tips and tricks or building your first website in an hour. There’s a place for these books, but this book is different. It does include plenty of tips and tricks, but its central goal is to help you build a systematic understanding of the practice of web development.
What Will I Get from This Book?
Albert Einstein is quoted as having said “Never memorize what you can look up in books.” The quote is probably apocryphal, but the lesson is a useful one. Even if the notoriously absentminded Einstein forgot the exact speed of light, he understood its context so thoroughly that it didn’t matter—he could simply look it up if he needed the actual number.
Few web developers, no matter how knowledgeable or proficient they are, remember each aspect of every feature of the DOM, HTML, CSS, and so on. I certainly don’t. But if you understand the core technologies of web development—how they work and don’t work, why they work the way they do—you can always “look up the speed of light,” because you know what to look for. Can’t remember how to make a checkbox checked by default? Can’t remember whether a list item is a block or inline element? Can’t remember whether it’s text-align or text-alignment? That’s OK, because you’ll know what question to ask and where to go to get the answer. Really skilled developers know a great deal, but just as importantly, they know what they don’t know and where to find answers, because they have a systematic understanding of their craft.
• Part I—All the core technologies of front-end development—HTML and XHTML, CSS, and the DOM—as well as recommended practices for creating accessible websites
• Part II—“Real world” development: semantic markup, techniques for dealing with browser inconsistencies and bugs, CSS-based page layouts, and the field of CSS frameworks
• Part III—Emerging technologies: cutting-edge tools you can start using today, including HTML5, CSS3, web fonts, SVG, and the Canvas
What You Won’t Get from This Book
This book focuses squarely on front-end, or “client-side” development, so if you’re looking for information about what happens on the server, this is not the book for you. We do cover a handful of server-related issues with direct bearing on front-end work, but anything more than that is outside the scope of the book. There’s also little information that’s specifically about mobile web development, though there’s little throughout the book that isn’t relevant to mobile development, either. Similarly, performance-improving techniques get little space; I’d like to have covered them as well, but we had to draw a line somewhere.
Finally, although we cover the DOM in detail, there’s very little JavaScript in the chapters that follow—it’s a complex enough subject to deserve its own book, several of which I recommend in the Resources section in the back of this book.
Above all, please don’t expect that you can read the book and be instantly transformed, Cinderella-style, into a full-fledged development expert (and only partly because I resemble an ugly stepsister more than a fairy godmother). Web development requires a body of knowledge and skills acquired and improved over time and through practice and use. I hope the book will help you build (or shore up) the foundations of your body of knowledge, but it can’t replace rolling your sleeves up and diving into the messy realities of CSS, HTML, and the DOM.
How to Use This Book
The book isn’t written as a tutorial, so although there are plenty of examples, there aren’t any set exercises to follow as you go. It’s designed to be read sequentially; each chapter is largely self-contained, but each builds on what has come before. Experienced developers should have little trouble jumping into any section, but if you are new to web development, your best course of action is to read from start to finish. Rather than reading everything and then firing up your text editor, however, try practicing what you learn as you go. For example, during Chapter 3, try developing a simple page as you follow through the chapter, adding each component as I introduce it.
Joining the Community
The book has an accompanying website (www.devwws.com) that will include many more resources and links than we could fit into these pages, so make sure you check it out.
Next Up
In Chapter 2, we’ll look at some of the most important philosophies and principles of standards-based web development, before diving straight into HTML in Chapter 3.