O'Reilly logo

Learning Web Design, 4th Edition by Jennifer Robbins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Preface

Hello and welcome to the fourth edition of Learning Web Design.

So much has happened since the previous edition! Just when it looked like things were beginning to settle down with the adoption of web standards by the browser creators and the development community, along comes the “Mobile Web” to shake things up again. With the introduction of smartphones and tablets, the Web is finding its way onto small screens and on-the-go contexts where it never appeared before. This has introduced some rigorous challenges for web designers and programmers as we scramble to find ways to make the experience of using our sites pleasing, regardless of how they might be accessed.

The Companion Website

Be sure to visit the companion website for this book at learningwebdesign.com. It features materials for the exercises, downloadable articles, lists of links from the book, book references, and other good stuff.

As I write, many of these challenges, such as how to deliver the right image to the right device, are still being debated. It’s an incredibly lively time for web design, full of experimentation and collaboration. In ways, it reminds me of the Wild West days of the Web back in 1993 when I started my web design career. So much to figure out! So many possibilities! And to be honest, it’s also a tricky time to nail these moving-target technologies and techniques down in a book. To that end, I’ve done my best to point out the topics that are in flux and provide pointers to online resources to bring you up to date.

There are also two new standards—HTML5 (the fifth major revision of Hypertext Markup Language) and CSS3 (Cascading Style Sheets, Level 3)—available to us now that were only rumors the last time I wrote this book. The HTML section of the book now reflects the current HTML5 standard. I cover the parts of the developing CSS3 standard that are ready for prime time, including a new chapter on adding motion and interactivity with Transitions and Transforms. Our tools allow us to do so much more and in a more efficient way than even a few years ago.

Finally, because JavaScript has become such a significant part of web development, this new edition includes two chapters introducing JavaScript syntax and a few of its uses. I’m no JavaScript expert, but I was very lucky to find someone who is. The JavaScript chapters were written by Mat “Wilto” Marquis, who is a designer and developer at Filament Group, a member of the jQuery Mobile team, and the Technical Editor at A List Apart.

As in the first three editions, this book addresses the specific needs and concerns of beginners of all backgrounds, including seasoned graphic designers, programmers looking for a more creative outlet, office assistants, recent college graduates, work-at-home moms, and anyone else wanting to learn how to design websites. I’ve done my best to put the experience of sitting in my beginner web design class into a book, with exercises and tests along the way, so you get hands-on experience and can check your progress.

Whether you are reading this book on your own or using it as a companion to a web design course, I hope it gives you a good head start and that you have fun in the process.

How This Book Is Organized

Learning Web Design, Fourth Edition, is divided into five parts, each dealing with an important aspect of web development.

Part I

Part I lays a foundation for everything that follows in the book. I start off with some important general information about the web design environment, including the various roles you might play, the technologies you might learn, and tools that are available to you. You’ll get your feet wet right away with HTML and CSS and learn how the Web and web pages generally work. I’ll also introduce you to some Big Concepts that get you thinking the way modern web designers think about their craft.

Part II

The chapters in Part II cover the nitty-gritty of every element and attribute available to give content semantic structure, including the new elements introduced in HTML5. We’ll cover the markup for text, links, images, tables, and forms. Part II closes out with an in-depth discussion of HTML5 and how it differs from previous standards.

Part III

In the course of Part III, you’ll go from learning the basics of using Cascading Style Sheets for changing the presentation of text to creating multicolumn layouts and even adding time-based animation and interactivity to the page. It also addresses common CSS techniques, including how to create a page using Responsive Web Design.

Part IV

Mat Marquis starts Part IV out with a rundown of JavaScript syntax so you can tell a variable from a function. You’ll also get to know some ways that JavaScript is used, including DOM Scripting, and existing JavaScript tools, such as polyfills and libraries, that let you put JavaScript to use quickly even if you aren’t quite ready to write your own code from scratch.

Part V

Part V introduces the various file formats that are appropriate for the Web and describes how to optimize them to make their file size as small as possible.

Acknowledgments

I want to thank my editor, Simon St. Laurent, with whom I’ve had a good run of collaborative projects and I look forward to more. Thanks also go to my contributor, Mat Marquis (matmarquis.com), for making JavaScript entertaining and for maintaining good spirits while collaborating with a control freak.

Many smart and lovely people had my back on this edition. I want to thank my primary technical reviewers, Aaron Gustafson (easy-designs.net), Joel Marsh (thehipperelement.com), and Matt Menzer, for taking so much time out of their schedules to make sure the details in the chapters were spot on. Thanks also go to the following folks for their “surgical strike” reviews: Anthony Calzadilla, Danny Chapman, Matt Haughey, Gerald Lewis, Jason Pamental, and Stephanie Rieger.

I feel fortunate to know so many of the leaders in this field whose books, articles, presentations, slide decks, and personal contact were the fuel that kept me going. I couldn’t have done it without the help of these geniuses (in alphabetical order): Dan Cederholm, Josh Clark, Andy Clarke, Chris Coyier, Brad Frost, Lyza Gardner, Jason Grigsby, Stephen Hay, Scott Jehl, Scott Jenson, Tim Kadlec, Jeremy Keith, Sanders Kleinfeld, Peter-Paul Koch, Bruce Lawson, Ethan Marcotte, Eric Meyer, Karen McGrane, Shelley Powers, Bryan Rieger, Stephanie Rieger, Remy Sharp, Luke Wroblewski, and Jeffrey Zeldman.

It takes a village to make a book, and I’d like to extend my appreciation to the contributions of Melanie Yarbrough (production editor and proofreader), Genevieve d’Entremont (copy editor), Rebecca Demarest (figure production), Newgen (page layout), Ellen Troutman Zaig (index), Randy Comer (book cover design), and Ron Bilodeau (book interior design).

Finally, I’d like to thank Edie Freedman (best boss ever) for her patience while this book sucked me into a vortex. And to my dearest darlings, Jeff and Arlo, I’m happy to finally say, “I’m back.”

About the Author

Jennifer Robbins began designing for the Web in 1993 as the graphic designer for Global Network Navigator, the first commercial website. In addition to this book, she is the author of Web Design in a Nutshell and HTML5 Pocket Reference (which is also available as an iOS app), both published by O’Reilly. In the past, Jennifer has spoken at many conferences, including Seybold and South by Southwest, and has taught beginning web design at Johnson and Wales University in Providence, Rhode Island. She is currently a digital product designer for O’Reilly Media, where she is interested in information architecture, interaction design, and making websites, apps, and ebooks pleasant to use. When not on the clock, Jennifer enjoys making things, indie rock, cooking, and being a Mom.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: Learning Web Design, Fourth Edition, by Jennifer Niederst Robbins. Copyright 2012 Littlechair, Inc., 978-1-449-31927-4.

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

We’d Like to Hear from You

Please address comments and questions concerning this book to the publisher:

  • O’Reilly Media, Inc.

  • 1005 Gravenstein Highway North

  • Sebastopol, CA 95472

  • (800) 998-9938 (in the United States or Canada)

  • (707) 829-0515 (international or local)

  • (707) 829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

To comment or ask technical questions about this book, send email to:

For more information about our books, conferences, Resource Centers, and the O’Reilly Network, see our website at:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required