Head First Web Design

How to Use This Book: Intro

In this section we answer the burning question: “So why DID they put that in a Web Design book?”

Who is this book for?

If you can answer “yes” to all of these:

1. Are you comfortable with XHTML & CSS but don’t have any experience with web design?

2. Do you consider yourself a web developer (working in a fun environment like PHP, Ruby on Rails, .NET) and want to become a better web designer?

3. Do you need to understand web design for a course, your line of work, or you simply want to impress people at parties with your vast knowledge of The Golden Ratio and the Web Content Accessibility Guidelines?

this book is for you.

Who should probably back away from this book?

If you can answer “yes” to any of these:

1. Are you someone who doesn’t have any experience with HTML/XHTML & CSS?

   Note

   If this is the case, don’t worry. Go pick up Head First HTML with CSS & XHTML by Elisabeth Freeman and Eric Freeman, and then come back to this book.

2. Are you an accomplished web or graphic designer looking for a reference book?

3. Are you someone who likes to build webpages with tools like Frontpage and Dreamweaver, so you don’t ever have to look at code?

this book is not for you.

[Note from marketing: this book is for anyone with a credit card.]

We know what you’re thinking

“How can this be a serious Web Design book?”

“What’s with all the graphics?”

“Can I actually learn it this way?”

We know what your brain is thinking

Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive.

So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain’s real job—recording things that matter. It doesn’t bother saving the boring things; they never make it past the “this is obviously not important” filter.

How does your brain know what’s important? Suppose you’re out for a day hike and a tiger jumps in front of you, what happens inside your head and body?

Neurons fire. Emotions crank up. Chemicals surge.

And that’s how your brain knows...

This must be important! Don’t forget it!

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. You’re studying. Getting ready for an exam. Or trying to learn some tough technical topic your boss thinks will take a week, ten days at the most.

Just one problem. Your brain’s trying to do you a big favor. It’s trying to make sure that this obviously non-important content doesn’t clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like the old school NES cheat code for Contra (↑↑↓↓↔ ↔BA). And there’s no simple way to tell your brain, “Hey brain, thank you very much, but no matter how dull this book is, and how little I’m registering on the emotional Richter scale right now, I really do want you to keep this stuff around.”

We think of a “Head First” reader as a learner

So what does it take to learn something? First, you have to get it, then make sure you don’t forget it. It’s not about pushing facts into your head. Based on the latest research in cognitive science, neurobiology, and educational psychology, learning takes a lot more than text on a page. We know what turns your brain on.

Some of the Head First learning principles:

Make it visual. Images are far more memorable than words alone, and make learning much more effective (up to 89% improvement in recall and transfer studies). It also makes things more understandable. Put the words within or near the graphics they relate to, rather than on the bottom or on another page, and learners will be up to twice as likely to solve problems related to the content.

Use a conversational and personalized style. In recent studies, students performed up to 40% better on post-learning tests if the content spoke directly to the reader, using a first-person, conversational style rather than taking a formal tone. Tell stories instead of lecturing. Use casual language. Don’t take yourself too seriously. Which would you pay more attention to: a stimulating dinner party companion, or a lecture?

Get the learner to think more deeply. In other words, unless you actively flex your neurons, nothing much happens in your head. A reader has to be motivated, engaged, curious, and inspired to solve problems, draw conclusions, and generate new knowledge. And for that, you need challenges, exercises, and thought-provoking questions, and activities that involve both sides of the brain and multiple senses.

Get—and keep—the reader’s attention. We’ve all had the “I really want to learn this but I can’t stay awake past page one” experience. Your brain pays attention to things that are out of the ordinary, interesting, strange, eye-catching, unexpected. Learning a new, tough, technical topic doesn’t have to be boring. Your brain will learn much more quickly if it’s not.

Touch their emotions. We now know that your ability to remember something is largely dependent on its emotional content. You remember what you care about. You remember when you feel something. No, we’re not talking heart-wrenching stories about a boy and his dog. We’re talking emotions like surprise, curiosity, fun, “what the...?”, and the feeling of “I Rule!” that comes when you solve a puzzle, learn something everybody else thinks is hard, or realize you know something that “I’m more technical than thou” Bob from engineering doesn’t.

Metacognition: thinking about thinking

If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you learn.

Most of us did not take courses on metacognition or learning theory when we were growing up. We were expected to learn, but rarely taught to learn.

But we assume that if you’re holding this book, you really want to learn how to design user-friendly websites. And you probably don’t want to spend a lot of time. If you want to use what you read in this book, you need to remember what you read. And for that, you’ve got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content.

The trick is to get your brain to see the new material you’re learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you’re in for a constant battle, with your brain doing its best to keep the new content from sticking.

So just how DO you get your brain to treat Web Design like it was a hungry tiger?

There’s the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics if you keep pounding the same thing into your brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be.”

The faster way is to do anything that increases brain activity, especially different types of brain activity. The things on the previous page are a big part of the solution, and they’re all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to makes sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording.

A conversational style helps because people tend to pay more attention when they perceive that they’re in a conversation, since they’re expected to follow along and hold up their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake.

But pictures and conversational style are just the beginning...

Here’s what WE did

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s concerned, a picture really is worth a thousand words. And when text and pictures work together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere.

We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain.

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to feel something is more likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or interest.

We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you’re in a conversation than if it thinks you’re passively listening to a presentation. Your brain does this even when you’re reading.

We included more than 80 activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-do-able, because that’s what most people prefer.

We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, and someone else just wants to see an example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways.

We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time.

And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments.

We included challenges, with exercises, and by asking questions that don’t always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it—you can’t get your body in shape just by watching people at the gym. But we did our best to make sure that when you’re working hard, it’s on the right things. That you’re not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text.

We used people. In stories, examples, pictures, etc., because, well, because you’re a person. And your brain pays more attention to people than it does to things.

Here’s what YOU can do to bend your brain into submission

So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.

Cut this out and stick it on your refrigerator.

1. Slow down. The more you understand, the less you have to memorize.

   Don’t just read. Stop and think. When the book asks you a question, don’t just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.

2. Do the exercises. Write your own notes.

   We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don’t just look at the exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning.

3. Read the “There are No Dumb Questions”

   That means all of them. They’re not optional sidebars, they’re part of the core content! Don’t skip them.

4. Make this the last thing you read before bed. Or at least the last challenging thing.

   Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing time, some of what you just learned will be lost.

5. Talk about it. Out loud.

   Speaking activates a different part of the brain. If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.

6. Drink water. Lots of it.

   Your brain works best in a nice bath of fluid. Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.

7. Listen to your brain.

   Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.

8. Feel something.

   Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.

9. Design and Build Websites

   There’s only one way to become an experienced web designer: design and build websites. Now, this might mean building layouts on paper, doing card sorts to develop your information architecture, or writing lots of CSS. The point is that you will never become a great web designer if you just read about it—you need to do it. We’re going to give you a lot of practice: every chapter has exercises that pose problems for you to solve or asks questions that you need to think about. Don’t just skip over them—a lot of the learning happens when you work on the exercises. We included a solution to each exercise, so don’t be afraid to peek at the solution if you get stuck, but try to solve the problem before you look at the solution. And definitely get it working before you move on to the next part of the book.

Read Me

This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning because the book makes assumptions about what you’ve already seen and learned.

We start off by teaching one of the most important concepts in web design—the design process—and then we move on to more specific design topics.

The design process is the foundation for developing a great-looking website. Each step gets you closer to better pages, and along the way, you create everything from a visual metaphor to a map of the site’s content. Once you understand the overall design process, you can then dive into the details and begin building beautiful websites.

We advocate standards compliant XHTML & CSS.

All of the code that you write during the course of going through this book is standards compliant. This is really important to us, and we would (adamantly) argue that understanding how to think in and write standards compliant XHTML (XHTML 1.0 Strict) & CSS (CSS 2.1) is one of the hallmarks of a talented web designer. There will be no tables for layout, no style information in your markup, and all those <p> tags will be properly closed.

All of the code in this book is available on the Head First site.

Most of the projects in this book will require you to download the code for that particular chapter. Actually, you should just download all the code from the beginning so that you have it ready when the time comes. Sometimes we will ask you to make changes to code that already exists and will provide and “before” and “after” version of the markup and stylesheets.

Every bit of code is not fully explained

We assume that you have a working knowledge of XHTML and CSS and, therefore, don’t make it a point to explain every nuance of the code. The important stuff is covered, and the downloadable examples are well documented. Remember, we’re trying to make you a better designer not teach you the ins and outs of XHTML and CSS.

The terms “comps” and “storyboards” are used interchangeably.

We introduce storyboarding in this book as method for quickly mocking up design ideas without committing tons of time to code. Sometimes these are referred to as “storyboads,” but other times we use the term “comp” (or composition) in reference to the same thing.

We assume that you are using modern browsers.

While we’ve taken every measure to make sure that our code is cross-browser compatible, you should use a modern browser (IE7+, Safari, Firefox) when putting together the sites in this book. While older browsers (notably IE6 and below) will work, you results may vary, as those browsers are buggy and incredibly finicky.

The activities are NOT optional.

The exercises and activities are not add-ons; they’re part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you’ve learned. Don’t skip the exercises.

The redundancy is intentional and important.

One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you’ve learned. Most reference books don’t have retention and recall as a goal, but this book is about learning, so you’ll see some of the same concepts come up more than once.

Our markup and CSS examples are as lean as possible.

Our readers tell us that it’s frustrating to wade through 200 lines of markup or CSS looking for the two lines they need to understand. Most examples in this book are shown within the smallest possible context so that the part you’re trying to learn is clear and simple. Don’t expect all of the examples to be robust—or even complete. They are written specifically for learning and aren’t always fully-functional.

We’ve placed files (markup, CSS, images, complete pages) on the Web so you can copy and paste them into your text/markup/code editor. You’ll find them at http://www.headfirstlabs.com/books/hfwd

The technical review team

Sarah Collings

Johannes de Jong

Matt DiGangi

Ashley Doughty

Corey McGlone

Pauline McNamara

Jonathan Moore

Technical Reviewers:

Sarah Collings has worked in web design and development for over 7 years and is currently developing usable web applications as a User Experience Software Engineer at Digital River, Inc. She has a Bachelor of Fine Arts in Graphic Design and is working toward a Master’s in Software Engineering. In her spare time, Sarah enjoys running and spending time outdoors with her fiancÉ.

Johannes de Jong is an old dinosaur mainframer that loves to go over to the wild side—building websites, from time to time. His latest experiment is a Google Maps site built with Apex from Oracle, and yes, he will use this book to redesign it.

Matt DiGangi is the creator, designer, and editor of the website Thieves Jargon (www.thievesjargon.com). He lives in Boston.

Ashley Doughty is a Senior Web Developer from Maine, living and working in the Greater Boston area. She is a hard core Christian, wife, daughter, reader and GEEK. She loves coding so much that she even does it in her free time.

Corey McGlone has been involved in web development for ten years and has spent the last seven years working primarily in web application development for Schnieder Logistics, Relion Corporation, and Mayo Clinic. He’s an avid music lover, is married, and has one little boy at home.

Pauline McNamara has worked with university e-Learning projects in Switzerland for the past 6 years, most recently at the Swiss Federal Institute of Technology in Zurich. Her current learning passion involves raising an adorable puppy with her partner (who’s also adorable).

Jonathan Moore is the owner of Forerunner Design, web design and development (www.forerunnerdesign.com).

Acknowledgments

Our editor:

A crazy big thanks to our editor, Brett McLaughlin. Even though he was overloaded with a ton of other books, he always had great feedback and suggestions for how to make our book sharper, smoother, and a far more effective learning tool.

A huge thanks must go out to Lou Barr, who took chapters that we thought looked awesome to begin with, and made them look incredibly polished (and even awesomer)—and we are really grateful for this.

The O’Reilly team:

To Sanders Kleinfeld, Caitrin McCullough, Karen Shaner, who all kept various aspects of the production process running smoothly.

To Brittany Smith, the book’s Production Editor, who made sure that when the book went to production, everything ran smoothly and efficiently.

Finally, to Laurie Petrycki, who had faith in our abilities and our vision enough to let us write this book in the first place.

Ethan’s friends, family, and colleagues:

First off, to my wife Jenn, who damn near deserves sainthood for putting up with the sheer number of hours I’ve put into this book (and away from her) and the grumpy mood that I was almost constantly in as a result. To my son Sam, who one day (somewhere in the middle of me writing the book) asked, “Daddy, are you ever going to stop working so you can play with me?” The book is done, Sam. Let’s do something fun! To my daughter Taylor, who, while she most likely won’t admit it, probably thinks it’s cool to see her name (and picture) in the book. To my colleagues at MATRIX (especially Mark Kornbluh and Dean Rehberger) for their support (particularly, when I was in the thick of finishing the book off). To my grad students Joe, Pete, and Steen, who made it their morning ritual (especially near the end) to stick their heads in my office to see how the book was doing. And to my big moose of a chocolate lab Oscar—just because.

Jeffs’s friends, family, and colleagues:

To Allie, for putting up with months of me working until two in the morning. Also, your InDesign tips were essential to the production of this book; without them, all the images would be stretched and pixelated. To my mom Jill, dad Jeff, and brother Jason. You guys have been an inspiration to me, and I love you all very much. To Rich, Brian and Rabbott (Ryan) and everyone else in the Communication Arts and Sciences Dean’s Office at MSU. You guys gave me an opportunity to work in one of the best IT offices in Michigan and allowed me the freedom to develop the skills I needed to write this book. I am forever grateful for the path you guys have lead me down, and this book wouldn’t have been possible without your support.

Safari® Books Online

When you see a Safari® icon on the cover of your favorite technology book that means the book is available online through the O’Reilly Network Safari Bookshelf.

Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily search thousands of top tech books, cut and paste code samples, download chapters, and find quick answers when you need the most accurate, current information. Try it for free at http://safari.oreilly.com.