Head first web design : [a learner's companion to accessible, usable, engaging websites ; learn how drawing pictures produces better websites ; give your users what they really want from your website ; prevent the pernicious Foo Bar from ripping off your

Want to know how to make your pages look beautiful, communicate your message effectively, guide visitors through your website with ease, and get everything approved by the accessibility and usability police at the same time? Head First Web Design is your ticket to mastering all of these complex topics, and understanding what's really going on in the world of web design. Whether you're building a personal blog or a corporate website, there's a lot more to web design than div's and CSS selectors, but what do you really need to know? With this book, you'll learn the secrets of designing effective, user-friendly sites, from customer requirements to hand-drawn storyboards all the way to finished HTML and CSS creations that offer an unforgettable online presence. The revised two-color edition of this book includes a free online version of the chapter on web color. You can easily access this chapter at Oreilly.com once you register your book. Your time is way too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First Web Design uses a visually rich format specifically designed to take advantage of the way your brain really works. Head First Web Design......Page 1 Advance Praise for Head First Web Design......Page 2 Authors of Head First Web Design......Page 7 Table of Contents ......Page 8 how to use this book: Intro ......Page 22 Who should probably back away from this book?......Page 23 This must be important! Don’t forget it!......Page 24 So just how DO you get your brain to treat WebDesign like it was a hungry tiger?......Page 26 Here’s what WE did:......Page 27 Here’s what YOU can do to bend your brain into submission......Page 28 Read Me......Page 29 The technical review team......Page 31 Acknowledgments......Page 32 Safari® Books Online......Page 33 1 building beautiful web pages: Beauty is in the eye of your user......Page 34 Your big chance with Red Lantern Design......Page 35 Where do you start?......Page 38 Draw up a blueprint FIRST......Page 40 Determine your Top Level Navigation......Page 46 Vertical tabs......Page 48 Show Jane some basic design sketches......Page 49 Sketches keep the focus on functionality......Page 50 Now it’s time to prototype the site in code......Page 57 Don’t ruin a good design with bad copy......Page 61 What makes text scannable?......Page 62 Web design is all about communication, and your USERS......Page 68 Your Web Design Toolbox......Page 69 2 pre-production: Paper covers rock......Page 70 Your first "international" gig.........Page 71 Start with a visual metaphor......Page 73 A clear visual metaphor helps reinforce your site’s theme......Page 74 A theme represents your site’s content......Page 75 Brainstorming: The path to a visual metaphor......Page 78 Develop a theme and visual metaphor for Mark......Page 79 Your page elements shape your visual metaphor......Page 82 Build a quick XHTML mock-up for Mark......Page 89 And the CSS.........Page 90 Use storyboards to develop ideas and save time without code......Page 94 Don’t design for yourself!......Page 95 Sketch out your design......Page 97 Add color and finalize your storyboard......Page 98 Your Web Design Toolbox......Page 100 3 organizing your site: "So you take a left at the green water tower..."......Page 102 Fit your content into your layout......Page 104 Organize your site’s information......Page 105 Keep your site organized with Information Architecture (IA)......Page 112 To run a successful card sort, you need:......Page 113 Sort your cards into related stacks......Page 119 Give your stacks names that are short and descriptive......Page 120 Which card sort is right?......Page 125 Arrange your cards into a site hierarchy......Page 126 IA Diagrams are just card sorts on paper......Page 128 IA Diagrams are NOT just links between pages......Page 129 Move from pre-production to production......Page 133 Build Mark’s site structure......Page 134 Create index.html first.........Page 135 ,,,and then screen.css for style......Page 136 screen.css, continued.........Page 137 Pre-production to production: The complete process......Page 139 Your Web Design Toolbox......Page 140 4 layout and design: Follow the Golden Rule......Page 142 Design is about audience......Page 143 Your newest gig: RPM Records......Page 146 Pinpoint RPM’s audience with personas......Page 147 Data about RPM Music’s users ......Page 148 Let the personas be your guide.........Page 153 Smaller displays limit screen real estate......Page 154 Resolution impacts design and layout......Page 155 Your users don’t care about screen realestate... they just want sites to "work. "......Page 157 Build an XHTML and CSS foundation optimized for 1024x768......Page 161 Humans like things lined up and well-organized......Page 165 How wide should my grid be? Use the Golden Ratio......Page 166 The rule of thirds: A shortcut to the Golden Ratio......Page 167 RPM and the Golden Ratio: An (anti) case study......Page 168 Remember your client?......Page 172 Set up RPM 2.0 with the Blueprint Framework......Page 174 Use Blueprint CSS rules to style RPM 2.0......Page 177 Time to get your RPM groove on......Page 178 Add some CSS to clean up the layout......Page 182 Finish off the content and navigation markup......Page 184 Add layout and typographic details with some more CSS......Page 187 5 designing with color: Moving Beyond Monochrome......Page 192 Help support your local music scene......Page 193 9Rules: The blog network gold standard......Page 194 Sometimes your choices are a bit... limited......Page 195 Color has an emotional impact......Page 196 The color wheel (where it all begins)......Page 200 First, choose your BASE color......Page 203 Use the triadic scheme to create usable color patterns......Page 204 Get started on the SampleRate markup......Page 206 Create the basic page layout with CSS......Page 207 We need a digital color wheel. ......Page 208 The opposite of heavy is... light......Page 213 Create a richer color palette with the tetradic color scheme......Page 215 Emphasis-o-matic......Page 218 Let’s update the SampleRate CSS......Page 219 Your Web Design Toolbox......Page 224 6 smart navigation: "In 2 seconds, click ‘Ho me’."......Page 226 School’s back in session......Page 227 The first step in good navigation is good IA......Page 230 What’s really in a name, anyway?......Page 231 Approach #1: Horizontally-tabbed navigation......Page 237 Approach #2: Vertical navigation......Page 239 Inconsistent navigation confuses users. ......Page 241 Block elements are your friends......Page 245 Let’s float the block navigation on the CNM site......Page 246 Icons don’t SAY anything... they just look pretty......Page 248 Add icons to your text, not the other way around......Page 250 Update the CNM XHTML to use textual links......Page 251 Now we can style our new block elements.........Page 252 Primary navigation shouldn’t change... ...but secondary navigation SHOULD......Page 254 Each sub-page gets its own secondary navigation......Page 255 Let’s style the navigation with our CSS......Page 256 Your Web Design Toolbox......Page 258 7 writing for the web: Yes, you scan!......Page 260 Build a better online newspaper......Page 266 The problem is TEXT......Page 267 Improve your content with the Inverted Pyramid......Page 274 Compress your copy......Page 280 Add lists to your XHTML......Page 290 Headings make your text even more scannable ......Page 292 Mix fonts to emphasize headings and other text......Page 301 The level, not the size, of a heading conveys importance......Page 302 Your Web Design Toolbox......Page 306 8 accessibility: Inaccessibility Kills ......Page 308 Audio-2-Go: inaccessible accessibility......Page 309 Accessibility means making your site work for EVERYONE......Page 310 How does your site READ?......Page 311 A site’s message should be clear...to EVERYONE......Page 313 Face it: computers are stupid!......Page 314 A computer will read your image’s ALT text......Page 315 EVERYONE’s time is valuable.......Page 318 Convert your long ALT text to a LONGDESC......Page 319 Your improvements are making a difference for SOME Audio-2-Go customers......Page 321 Accessibility is not just about screen readers......Page 322 Tabbing through a page should be ORDERLY......Page 324 Audio-2-Go is now a LOT more ACCESSIBLE......Page 327 Accessibility is the right thing ToDo......Page 329 WCAG Priority 1......Page 331 Color shouldn’t be your ONLY form of communication......Page 335 Life through color-blind eyes.........Page 336 Audio-2-Go, via color-blind eyes......Page 337 Those stars are a real problem......Page 339 Background images are still your friend......Page 340 There’s more to ordering than just tabindexes......Page 341 9 listen to your users: The Pathway to Harmonious Design ......Page 352 Problems over at RPM......Page 353 Let your audience speak to you through focus groups and surveys......Page 355 Surveys and focus groups aren’t free......Page 358 Ask the right questions in your surveys......Page 361 The final RPM Music user survey......Page 371 The results are in!......Page 373 Responses to the open-ended question:......Page 374 IE6 only supports :hover on link and anchor tags......Page 377 User Testing: Let your users tell you how they use your site......Page 380 The building blocks of budget usability testing......Page 384 Use a moderator script to organize the test......Page 385 Friends and family can be a problem......Page 392 The results of the usability test–what the users are telling you......Page 393 A simple problem.........Page 394 Site stats give your users (another) voice......Page 396 Google Analytics......Page 397 Your Web Design Toolbox......Page 400 10 evolutionary design: Keeping your site fresh......Page 402 Your portfolio so far.........Page 403 Red Lantern To-Do List.........Page 405 Web design is about evolution, not revolution......Page 408 Use CSS to evolve your site’s design......Page 409 You don’t need to be a crack programmer to addinteractivity with JavaScript. ......Page 420 Use JavaScript lightboxes to add interactivity to your site......Page 421 Add Facebox to the Red Lantern homepage......Page 422 Edit your index file......Page 423 Adding blog functionality with WordPress......Page 428 Add a WordPress blog to the Red Lantern site......Page 429 Change the look and feel of your blog with themes......Page 433 Your Web Design Toolbox......Page 435 11 the business of web design: Mind Your Own Business......Page 436 The newest potential client: the Foo Bar......Page 437 What Foo Bar wants in a bid:......Page 438 Let’s build a quick mockup for the Foo Bar......Page 439 Then, three months later.........Page 443 Welcome to the world of DESIGN PIRACY......Page 446 There’s more than one type of web designer.......Page 448 Choose your job—and your business—based on knowing who you are in the Web universe. ......Page 451 Client Requirements......Page 454 Hourly Rate = $60,000 / ((8 x 5 x 50) x .60)......Page 455 Figure out a total bid.........Page 458 Talking back is highly recommended. ......Page 463 Use a proposal letter to deliver a detailed quote to a client......Page 464 Use Creative Commons to license your work......Page 466 Creative Commons Licenses......Page 467 Your Web Design Toolbox......Page 471 appendix i: leftovers: The Top Ten Things (we didn't cover)......Page 472 Different languages have different lengths......Page 473 Is that really the flag you want to use?......Page 474 HTML 5 vs. XHTML 2......Page 475 When are they coming?......Page 476 #3: The future of CSS......Page 477 #4: Designing for mobile devices......Page 478 #5: Developing Web applications......Page 479 #6: Rhythm in your layout......Page 480 #7: Text contrast......Page 481 #8: Match link names with their destination page......Page 482 #9: Contrast is a fundamental layout device......Page 483 #10: More tools for design......Page 484 B......Page 486 C......Page 488 E......Page 489 H......Page 490 L......Page 491 N......Page 492 R......Page 493 S......Page 494 U......Page 495 Y......Page 496 Whether you are building a personal blog or a corporate website, there is a lot more to web design than div's and CSS selectors, but what do you really need to know? With this book, you'll learn the secrets of designing effective, user-friendly sites, from customer requirements to hand-drawn storyboards all the way to finished HTML and CSS creations that offer an unforgettable online presence.