2008-Head First Web Design

Advance Praise for Head First Web Design “Building websites has definitely become more than just writing code. Head First Web Design shows you what yo...

28 downloads 373 Views 36MB Size

Advance Praise for Head First Web Design “Building websites has definitely become more than just writing code. Head First Web Design shows you what you need to know to give your users an appealing and satisfying experience. Another great Head First book!” — Sarah Collings, User Experience Software Engineer “Simplified, but far from dumbed-down. Practical and intuitive. I wish I had access to a book like this when I was getting started.” — Matt DiGangi, real life Web Designer “Head First Web Design really demystifies the web design process and makes it possible for any web programmer to give it a try. For a web developer who has not taken web design classes, Head First Web Design confirmed and clarified a lot of theory and best practices that seem to be just assumed in this industry.” — Ashley Doughty, Senior Web Developer “Finally a developer can fully understand the whole process of creating a GREAT website. Web Design 101, you finally got the book you needed/wanted.” — J ohannes de Jong, Web Programmer “The Head First series learning technique works well. You feel as though you are working through an actual design process instead of just reading a how-to manual. It’s a much more holistic approach to learning. The books work with your mind, rather than against it.” — Jonathan Moore, owner of Forerunner Design

Other related books from O’Reilly Learning Web Design Web 2.0: A Strategy Guide Ajax: The Definitive Guide Website Optimization

Other books in O’Reilly’s Head First series Head First JavaTM Head First Object-Oriented Analysis and Design (OOA&D) Head First HTML with CSS and XHTML Head First Design Patterns Head First Servlets and JSP Head First EJB Head First PMP Head First SQL Head First Software Development Head First JavaScript Head First Ajax Head First Physics Head First Statistics Head First Rails Head First PHP & MySQL Head First Algebra

Head First Web Design Wouldn’t it be dreamy if there was a web design book that went beyond code and really helped me make my websites work and look better? It’s probably just a fantasy...

Ethan Watrall Jeff Siarto

Beijing • Cambridge • Kln • Sebastopol • Taipei • Tokyo

Head First Web Design by Ethan Watrall and Jeff Siarto Copyright © 2009 O’Reilly Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]

Series Creators:

Kathy Sierra, Bert Bates

Series Editor:

Brett D. McLaughlin

Editors:

Brett D. McLaughlin, Louise Barr

Design Editor:

Louise Barr

Cover Designers:

Louise Barr, Steve Fehler

Production Editor:

Brittany Smith

Indexer:

Julie Hawks

Page Viewers:

Taylor and Sam



Jeff’s Parents

Printing History: December 2008: First Edition.

Ethan’s daughter Taylor

Ethan’s son Sam

The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations, Head First Web Design, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and the authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. No personas were harmed in the making of this book.

TM

This book uses RepKover™,  a durable and flexible lay-flat binding.

ISBN: 978-0-596-52030-4 [C]

[3/09]

Love and thanks to my family—Jenn, Taylor, Sam (and Oscar and Persia). — Ethan To my Mom—for helping me realize my dreams and inspiring me to follow them. This book would not have been possible without you. — Jeff

the authors

Authors of Head First Web Design Ethan Watrall

Jeff Siarto

Ethan Watrall is an Assistant Professor at Matrix: The Center for Humane Arts, Letters & Social Sciences Online, an Assistant Professor in the Department of Telecommunication, Information Studies, and Media, and an Adjunct Assistant Professor in the Department of History at Michigan State University. In addition, Ethan is a Principal Investigator in the Games for Entertainment & Learning Lab, and co- founder of both the undergraduate Specialization and Game Design Development and the MA in Serious Game Design at Michigan State University. Ethan teaches in a wide variety of areas including cultural heritage informatics, user centered & user experience design, game design, serious game design, game studies, and ancient Egyptian social history & archaeology. In addition to a wide variety of academic papers and conference presentations, Ethan has written a number of books on interactive design & web design. When he’s not being professorial, he’s a world class comic book nerd (Killowog is so his favorite Green Lantern), a sci-fi dork (he’ll argue to the grave that Tom Baker is the best Doctor ever), and an avid player of all sorts of games (digital, board, and tabletop). Ethan’s digital alterego can be found at www.captainprimate.com or www.twitter.com/captain_primate. vi

Jeff Siarto is a user experience and web designer

fresh out of grad school at Michigan State University. Jeff was a student of the standards-based web design movement—aspiring to the likes of Cederholm, Zeldman and Meyer—and worked as a web developer throughout his college years before signing on to co-author Head First Web Design in his second year of grad school. In addition to building websites, he also works to improve online courses and open education through simple, usable design. Jeff currently calls Chicago home and works as a freelance web developer and part time Iron Chef challenger. When he’s not working, he likes to cook and eat (mostly eat) and make endless design changes to his blog at www.siarto.com. You can see what Jeff is doing right now by checking out his Twitter feed at www.twitter.com/jsiarto or, if you’re really bored, you can send him an email at [email protected]

table of contents

Table of Contents (Summary) Intro

xxi

1



Beauty is in the Eye of Your User: Building Beautiful Web Pages

1

2

Paper Covers Rock: Pre-Production

37

3

“So you take a left at the green water tower...”: Organizing Your Site

69

4

Follow the Golden Rule: Layout and Design

109

5

Moving Beyond Monochrome: Designing With Color

159

6

“In 2 seconds, click ‘Home’.”: Smart Navigation

193

7

Yes, You Scan!: Writing For the Web

227

8

Inaccessibility Kills: Accessibility

275

9

The Pathway to Harmonious Design: Listen to Your Users

319

10

Keeping Your Site Fresh: Evolutionary Design

369

11

Mind Your Own Business: The Business of Web Design

403

i

Leftovers: The Top Ten Things (We Didn’t Cover)

439

Table of Contents (the real thing) Intro Your brain on Web Design.  Here

you are trying to learn something,

while here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s thinking, “Better leave room for more important things, like which wild animals to avoid and whether naked snowboarding is a bad idea.” So how do you trick your brain into thinking that your life depends on knowing web design?

Who is this book for? We know what you’re thinking Metacognition Bend your brain into submission Read me The technical review team Acknowledgments

xxii xxiii xxv xxvii xxviii xxx xxxi

vii

table of contents

1

building beautiful web pages Beauty is in the eye of your user It’s a great big (wide) world... but who’s really out there? So you’ve got your nice shiny XHTML and CSS diploma hanging on the wall, and the prospective clients are ringing your new business line off the hook. Cool, right? Yeah... until you get your first complaint about a bad layout, or a logo that’s just so 1998. So how do you create really beautiful websites and still make sure they satisfy your users? It all begins with good planning. Then you’ve got to write for the Web, know your audience, and, above all else, make sure you’re designing for your users, not yourself.

viii

Your big chance with Red Lantern Design

2

Where do you start?

5

Draw up a blueprint first

7

Determine your top level navigation

13

Put it all in context

15

Show Jane some basic design sketches

16

Sketches keep the focus on functionality

17

Don’t ruin a good design with bad copy

28

What makes text scannable?

29

Web design is all about communication, and your users

35

table of contents

2

pre-production Paper covers rock Tired of butting heads with a picky client? Yeah, you know the type... every time you show them their latest crazy design idea, they’ve already moved on to another look... another color scheme... another entire website. So how do you deal with fickle clients or those tricky hard-to-get-right websites? You start with paper, pencil, and a big fat pink eraser. In this chapter, you’ll learn how to work smart before you dig into your HTML editor. Coming up with a theme and visual metaphor for your site, mocking up sketches in pencil, and using storyboards will turn you into a nimble, flexible web designer. So get out your sketch pad, and let’s pre-produce! Your first “international” gig...

38

Think before you code

40

A clear visual metaphor helps reinforce your site’s theme

41

A theme represents your site’s content

42

Brainstorming: The path to a visual metaphor

45

Develop a theme and visual metaphor for Mark

46

Your page elements shape your visual metaphor

49

Build a quick XHTML mock-up for Mark

56

And the CSS...

57

Use storyboards to develop ideas and save time without code

61

Don’t design for yourself !

62

Let’s create a storyboard for Mark

64

ix

table of contents

organizing your site

3

“So you take a left at the green water tower...” A little shaky on your site navigation? When it comes to the Web, users are impatient. They don’t want to waste lots of time looking for the right button or wading through three levels of your JavaScript pull-down menus. That’s why you’ve got to spend a lot of time getting your site’s organization right... before you get into construction and design. Last chapter, you came up with a great theme and look for your site. In this chapter, you’ll really amp things up with a clear organization. By the time you’re done, you’ll have a site that tells your users where to go and keeps them from ever getting lost again.

Tokyo Mark visited the Tokyo Tower and got up early to go to the fish market. Hiroshima About the trip to the site of the A-Bomb. Cities

Landscape Photos

Media

Pictures of cities, mountainsVideo Clips and other places in Japan. Short clips of video Mark took with his digital camera. People Photos Pictures of people and friends that Mark met along the way.

Food Notes Restaurant Menus Notes about all the food and visited. A collection of menus Mark restaurants Mark picked up from various eateries around the country. Sushi

Food

Mark’s favorite food by-far was sushi. Note s and tips about eating sush i.

Fit your content into your layout

71

Organize your site’s information

72

Keep your site organized with information architecture (IA)

79

IA–The card sorting way

80

Card Sorts Exposed

81

Sort your cards into related stacks

86

Give your stacks names that are short and descriptive

87

Which card sort is right?

92

Arrange your cards into a site hierarchy

93

IA diagrams are just card sorts on paper

95

IA diagrams are NOT just links between pages

96

Move from pre-production to production

100

Build Mark’s site structure

101

Create index.html first...

102

...and then screen.css for style

103

Pre-production to production: the complete process

106

Mark in Japan

Blog

Travel Notes

Food

Media

About Japan

Travel Diary

Cities

Food Notes

Images

Culture

Tokyo

Restaurant Menus

ParkLandscape Hy att Tokyo Language Photos

Information , im thoughts fro ages and People m this ho about all the food tel. Sushi Notes Hiroshima Photos and restaurants on Flip Video my trip. Random clips Videos from my Flip Video camera.

Food Notes

x

Video Clips

table of contents

4

layout and design Follow the Golden Rule It pays to be a good listener... and to carry a pocket calculator. We’ve been talking about user-centered design for a few chapters, but here’s where you really put your listening skills to the test. In this chapter, you’ll take your users’ feedback and build a site that meets their needs. From browsers to screen real estate, it’s all about giving your users what they really want. Not only that, you’ll learn the secrets of the rule of thirds. Find out how a few easy presses of the calculator, a ruler, and some gridlines can turn your blase web page into a thing of beauty.

Name: Ann Age: 28 Internet Connectivity: DSL Avg. time online/week for leisure: 15 hours Browser of choice: Firefox Operating System: Windows XP Screen Resolution: 800x600 Occupation: Student Details: Ann considers herself very tech savvy. She actively participates in social networks and online communities. She also regularly shops online. Her laptop (which is a little old, but all she can really afford right now) is her primary computer–and where she does all of her web browsing.

Design is about audience

110

Your newest gig: RPM Records

113

Pinpoint RPM’s audience with personas

114

Let the personas be your guide...

120

Resolution impacts design and layout

122

Screen real estate determines how much of your site will display in your user’s browser

124

Build an XHTML and CSS foundation optimized for 1024x768

128

Humans like things lined up and well-organized

132

How wide should my grid be? Use the Golden Ratio

133

The rule of thirds: A shortcut to the Golden Ratio

134

RPM and the Golden Ratio: An (anti) case study

135

Remember your personas and client?

139

Set up RPM 2.0 with the Blueprint Framework

141

Use Blueprint CSS rules to style RPM 2.0

144

Time to get your RPM groove on

145

Add some CSS to clean up the layout

149

Finish off the content and navigation markup

151

Add layout and typographic details with some more CSS

154

xi

table of contents

5

designing with color Moving Beyond Monochrome Color is the unsung hero of web design. A good color palette can draw your audience into your site, give them a powerful feeling of immersion, and keep them coming back for more. And when it comes to color and web design, it’s not just about picking a good color palette, it’s also about how you apply those colors. You can have a great color palette, but if you don’t use those colors thoughtfully, people might avoid your site like the plague. By the end of this chapter, you’ll not only be intimately familiar with the impact that color has on the web user, but you’ll also be able to choose a great looking color palette that fits in—and even complements—your user-centered websites.

xii

Help support your local music scene

160

9Rules: The blog network gold standard

161

Sometimes your choices are a bit... limited

162

Color has an emotional impact

163

The color wheel (where it all begins)

167

Use the color wheel to choose colors that “go together”

170

First, choose your base color

170

Use the triadic scheme to create usable color patterns

171

Get started on the SampleRate markup

173

Create the basic page layout with CSS

174

The opposite of heavy is... light

180

Create a richer color palette with the tetradic color scheme

182

Let’s update the SampleRate CSS

186

table of contents

6

smart navigation “In 2 seconds, click ‘Home’.” What would the Web be without navigation? Navigation is what makes the Web such a powerful information medium. But here’s the thing: navigation is a lot more than just whipping up some cool-looking buttons and slapping them into your design. Building smart navigation starts with your information architecture and continues through your entire design process. But how does it work? How do you really make sure your users never get lost? In this chapter, we’ll look at different styles of navigation, how IA guides your page links, and why icons (alone) aren’t always iconic.

LI

LI

LI

LI

LI

LI

School’s back in session

194

The first step to good navigation is good IA

197

What’s really in a name, anyway?

198

Approach #1: Horizontally-tabbed navigation

204

Approach #2: Vertical navigation

206

Block elements are your friends

212

Let’s float the block navigation on the CNM site

213

Icons don’t SAY anything... they just look pretty

215

Add icons to your text, not the other way around

217

Update the CNM XHTML to use textual links

218

Now we can style our new block elements...

219

Primary navigation shouldn’t change... but secondary navigation should

221

Each sub-page gets its own secondary navigation

222

Let’s style the navigation with our CSS

223

LI

UL DIV

xiii

table of contents

7

writing for the web Yes, you scan! Writing for the Web is just like any other kind of writing, right? Actually, writing for the Web is completely different than writing for print. People don’t read text on the Web like they read text on a printed page. Instead of reading text from left to right, beginning to end, they scan it. All of the text on your site needs to be quickly scannable and easily digestible by the user. If not, users won’t waste their time on your site, and they’ll go somewhere else. In this chapter, you’ll learn a bevy of tips and tricks for writing scannable text from scratch and making existing text easy to scan. Build a better online newspaper

233

Hipster Intelligencer Online: project specs

234

The problem is TEXT

234

Improve your content with the Inverted Pyramid

241

Compress your copy

247

Add lists to your XHTML

257

Headings make your text even more scannable

259

Mix fonts to emphasize headings and other text

268

The level, not the size, of a heading conveys importance

269

Website copy In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don Kaye founded Tactical Studies Rules in order to publish the rules for Cavaliers and Roundheads, a miniature war game based in the English Civil War. While Cavaliers and Roundheads was the initial focus of Tactical Studies Rules, Gygax and Kaye also wished to publish the rules for Dungeons & Dragons, a fantasy miniature role playing game developed by Gygax whose rules were based on Chainmail, a medieval miniature game developed by Gygax and Jeff Perren in 1971. As Cavaliers and Roundheads began generating revenue for Tactical Studies Rules, the partnership was expanded to include Dave Arneson and Brian Blume. While Dave Arneson was brought into the partnership as a game designer, and left shortly thereafter, Brian Blume entered as a funder. Blume believed that Cavaliers and Roundheads was not generating enough revenue, and encouraged Gygax and Kaye to focus their efforts on releasing Dungeons & Dragons. There is considerable debate as to the contributions that Dave Arneson made to the initial development of Dungeons & Dragons. While Arneson has labeled himself “The Father of

Main Heading A little body text to give the user some context and a brief introduction to the page content. • Then maybe a few bullet points • that contain the highlights • of the page content.

Another heading Some more body text that gives the user more detail about the content of the page. And so on...

xiv

table of contents

8

accessibility Inaccessibility Kills Who’s missing out on experiencing your website right now? You may have a beautiful, well-laid out, easily navigable site... but that doesn’t mean everyone’s enjoying it. Whether it’s someone who’s visually-impaired or just a user who has trouble distinguishing blues from greens, your site must be accessible. Otherwise, you’re losing users and hurting your business. But don’t worry: accessibility isn’t difficult! By planning the order of your markup, using ALT attributes and LONGDESC tags, and thinking about color, you’ll widen your audience immediately. Along the way, you may even get WCAG certified. What’s that? Turn the page, and find out... Audio-2-Go: inaccessible accessibility

276

Accessibility means making your site work for everyone

277

How does your site read?

278

A site’s message should be clear...to everyone

280

Face it: computers are stupid!

281

A computer will read your image’s ALT text

282

Convert your long ALT text to a LONGDESC

286

Your improvements are making a difference for some Audio-2-Go customers

288

Accessibility is not just about screen readers

289

Tabbing through a page should be orderly

291

Audio-2-Go is now a lot more accessible

294

WCAG Priority 1

298

Color shouldn’t be your only form of communication

302

Life through web-safe eyes...

303

Life through color-blind eyes...

303

Audio-2-Go, via color-blind eyes

304

Those stars are a real problem

306

Background images are still your friend

307

There’s more to ordering than just tabindexes

308

xv

table of contents

9

listen to your users The Pathway to Harmonious Design Good design is all about really listening to your users. Your users can tell you what’s wrong with your site, what’s right with your site, how you can fix things (if necessary) and how you can improve your site. There are lots of ways you can listen to your users. You can listen to them in groups (using tools like surveys), listen to them individually (with tools such as usability tests), and listen to their collective actions on your site (with tools such as site metrics and statistics). Whatever method you use, its all about “hearing” what your users are saying. If you do, your site will meet the needs of your audience and be

Surveys

that much better for it.

322

PROS

CONS

Surveys and focus groups aren’t free

325

Require a lot of advanced planning

Surveys Exposed

327

Can be administered to a huge amount of people

Written surveys may present problems for lower level readers

Ask the right questions in your surveys

328

Can be administered in lots of ways (paper, online, by phone, in person)

Survey questions might be misinterpreted

The final RPM Music user survey

338

The results are in!

340

Responses to the open-ended question:

341

Require larger time commitment from participants

Collects information on a very specific topic from those who have a stake in the topic

Usually require compensation for the participants

Web browser usage

343

Benefits from a trained facilitator

Public environment may intimidate some participants

Fix RPM’s CSS bug by moving the hover property

344

Requires a trained facilitator

The building blocks of budget usability testing

351

Use a moderator script to organize the test

352

Friends and family can be a problem

359

Web Browser Usage

Opera 2%

Safari 3%

Mozilla 1%

(For the entire Internet)

Firefox 42%

Internet Explorer 5 1%

Allow participants to build on each other’s ideas

Internet Explorer 6 25%

Focus Groups

Internet Explorer 7 26%

320

Let your audience speak to you through focus groups and surveys Require a relatively short time commitment from survey participants

Participants can often complete the survey at their own leisure

xvi

Problems over at RPM

The results of the usability test–what the users are telling you

360

A simple problem...

361

Site stats give your users (another) voice

363

Website analytics tools

364

table of contents

10

evolutionary design Keeping your site fresh So you’ve built a bunch of awesome websites. Now it’s time to kick back, relax, and watch the visitor numbers grow, right? Whoa, not so fast. The Web never stops evolving—and your site needs to keep up. You can add new features, tweak the design, or even do a complete redesign. An ever-changing site reflects your growing skills—which means your site is always your best PR tool.

Flash

JQuery JavaScript library

Your portfolio so far...

370

Keeping your site and content fresh keeps your users coming back

372

Web design is about evolution, not revolution

375

Use CSS to evolve your site’s design

376

Use JavaScript lightboxes to add interactivity to your site

388

Add Facebox to the Red Lantern home page

389

Edit your index file

390

Adding blog functionality with WordPress

395

Add a WordPress blog to the Red Lantern site

396

Blog Exposed

398

Change the look and feel of your blog with themes

400

XHTML + CSS

xvii

table of contents

11

the business of web design Mind Your Own Business Business in a web design book? Are you kidding me? You’ve mastered pre-production, information architecture, navigation, color, and even accessibility. What’s left in your path to web design mastery? Well, you’re going to have to tackle the business issues of web design. You don’t need a Harvard MBA, but you better know more than just where you deposit your check... or those checks may stop coming. Let’s look at establishing good client relationships and understanding your intellectual property rights. The result? Increased profits and protection for your hard work. The newest potential client: the Foo Bar

404

What Foo Bar wants in a bid

405

Let’s build a quick mockup for the Foo Bar

406

Welcome to the world of design piracy

413

What kind of web worker are you?

416

Red Lantern’s got a new prospective client

421

What really goes into designing a website?

424

Figure out a total bid...

425

Use a proposal letter to deliver a detailed quote to a client

431

The Trilobite podcast: a(nother) new challenge

433

Use Creative Commons to license your work

433

Creative Commons Licenses

434

Pre-production Time:

Client Requirements A static website with a front page, an About page, a contact page, and three separate product pages.

Several different designs (paper is fine) to choose from, and an ability to provide design feedback that will get incorporated into the final site.

Standards-compliant code. Trilobite’s site has to work on all sorts of devices, too.

In-house Meetings: Information Architecture: Wireframes: Theme Concepts:

Hours

Rate

Total

x x

= =

x x

= =

x x

= =

x

=

x x

= =

x

=

x x

= =

x x

= =

x

=

Low-key usability testing to make sure there aren’t any problems before the site goes live.

Some type of screen effect for their product portfolio. Trilobite wants to appear cutting edge to represent their work on iPhone apps.

Drafts and Design Revisions: Client Meetings: Storyboards: Storyboard Revisions:

Red Lantern Project Estimation Worksheet (RLPEW)

Production Time: XHTML and CSS: Back-end Programming: Graphics and Artwork: Copywriting: Validation and Debugging:

Job Description: Client Name: Project Description:

Miscellaneous Expenses: Initial Input Time: Client Meetings: Background Research: Travel:

Hours

4

Rate x x x

$75/hr

Total = =

$300.00

Fonts and Graphics: Software: General Supplies

=

Totals

xviii

Total Project Hours

Total Cost

table of contents

i

leftovers The Top Ten Things (we didn’t cover) We’ve really covered a lot of ground in this book. The thing is, there are some important topics and tidbits that didn’t quite fit into any of the previous chapters. We feel pretty strongly about these and think that if we didn’t at least cover them in passing, we’d be doing you a disservice. That is where this chapter comes into the picture. Well, it’s not really a chapter; it’s more like an appendix (ok, it is an appendix). But it’s an awesome appendix of the top ten best bits that we couldn’t let you go without. #1: Cross-cultural & international design

440

#2: The future of web markup

442

#3: The future of CSS

444

#4: Designing for mobile devices

445

#5: Developing web applications

446

#6: Rhythm in your layout

447

#7: Text contrast

448

#8: Match link names with their destination page

449

#9: Contrast is a fundamental layout device

450

#10: More tools for design

451

However, the potential of the web to deliver full scale applications didn’t hit the mainstream till Google introduced Gmail, quickly followed by Google Maps, web based applications with rich user interfaces and PC-equivalent interactivity. The collection of technologies used by Google was The bursting of the dot-com bubble in the fall of christened AJAX, in a seminal essay by Jesse James 2001 marked a turning point for the web. Many Garrett of web design firm Adaptive Path. people concluded that the web was overhyped, when, in fact, bubbles and consequent shakeouts appear to be a common feature of all technological revolutions. Shakeouts typically mark the point at which anweb ascendant technology The first of those principles was “The as platform.” Yet is ready to take its at center stage. that was also a rallying cry of place Web 1.0 darling, Netscape, which went down in flames after a heated battle with Microsoft. What’s more, two of our initial Web 1.0 exemplars, DoubleClick and Akamai, were both pioneers in treating the web as a platform. People don’t often think of it as “web services,” but in fact, ad serving was the first widely deployed web service, and the first widely deployed “mashup” (to use another term that has gained currency of late).

xix

how to use this book

Intro I can’t believe they put that in a Web Design book.

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

xxi

how to use this 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?

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 boo for anyone with a credit card.] k is

xxii   intro

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.

the intro

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?”

Your bra THIS is imin thinks portant.

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 Your 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.”

ks brain thoinrth w THIS isn’t saving.

Great. Only 450 more dull, dry, boring pages.

you are here 4   xxiii

how to use this book

ader as a learner.

t” re We think of a “Head Firs

then make sure st, you have to get it, Fir ? ng thi me so rn e to lea sed on the latest So what does it tak ts into your head. Ba fac ing sh pu t ou ab t It’s no hology, learning you don’t forget it. d educational psyc an y, og iol ob ur ne , e science research in cognitiv ns your brain on. . We know what tur ge pa a on t tex n takes a lot more tha Main Heading ciples: First lear ning prin ad He e th of e m So

a the user some context and A little body text to give page content. brief introduction to the points • Then maybe a few bullet • that contain the highlights

ne, and morable than words alo Another heading ages are far more me all and rec in Make it visual. Im ent vem pro im 89% to more effective (up the words make learning much understandable. Put o makes things more als bottom or the on transfer studies). It n ate to, rather tha e gr aphics they rel blems related pro ve within or near th sol up to twice as likely to be l wil rs rne lea and on another page, to the content. dies, students d style. In recent stu l and personalize na tio sa er directly to the nv ke co a spo Use tests if the content tter on post-learning be 40% to l tone. Tell stories up ma ed for a rm perfo le rather than tak ing sty al ion sat ver con , erson sly. reader, using a first-p take yourself too seriou Activities casual language. Don’t Use . ing tur lec of d ty instea ulating dinner par stim a Notes about the daily thin to: ion ent att re gs mo Mark did in Japan. Which would you pay e? tur lec a or , ion pan com ly. In other words, think more deep Bars and Nightlife Get the learner to much happens your neurons, nothing flex ly ive A look at the bars and act you s unles o engaged, curious, d, ate tiv nightlife in and around Toky mo be to has r in your head. A reade and Kyoto. ate ner ge and ns, sio problems, draw conclu and inspired to solve llenges, exercises, and for that, you need cha of new knowledge. And that involve both sides estions, and activities qu ing vok pro htug tho senses. the brain and multiple nt to all had the “I really wa ’s attention. We’ve er ad re he ion —t ent ep Get—and ke Your brain pays att page one” experience. t pas ake aw y sta ’t ect -catching, unexp ed. learn this but I can interesting, strange, eye ry, ina ord the of t ou will to things that are be boring. Your brain l topic doesn’t have to ica hn tec , gh tou , Learning a new ly if it’s not. learn much more quick that your ability to ions. We now know Touch their emot on its emotional is largely dependent remember something You remember r what you care about. content. You remembe g heart‑wrenching ing. No, we’re not talkin when you feel someth emotions like surprise, his dog. We’re talking stories about a boy and “I Rule!” that comes ...?” , and the feeling of curiosity, fun, “what the rybody else thinks is e, learn something eve when you solve a puzzl more technical than w something that “I’m hard, or realize you kno ering doesn’t. thou” Bob from engine • of the page content.

Some more body text that gives the user more detail about the content of the page. And so on...

xxiv   intro

the intro

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.

I wonder how I can trick my brain into remembering this stuff...

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…

you are here 4   xxv

how to use this book

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.

xxvi   intro

Test Drive

the intro

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 sti on your refrigerator.ck it 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

7

8

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.

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.

Read the “There are No Dumb Questions”

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

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.

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

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.

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

6

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. you are here 4   xxvii

how to use this 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

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.

xxviii   intro

the intro

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

you are here 4   xxix

the review team

The technical review team Sarah Collings

Johannes de Jong

Matt DiGangi

Corey McGlone

Ashley Doughty

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).

xxx   intro

the intro

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.

Brett McLaughlin 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.

Lou Barr

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. you are here 4   xxxi

safari books online

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.

xxxii   intro

1 building beautiful web pages

Beauty is in the eye of your user I know he said you’re just another boring one-column waitress, Mom, but I think you’re the best... you’re always paying attention to your users. What else could anyone want?

It’s a great big (wide) world... but who’s really out there? So you’ve got your nice shiny XHTML and CSS diploma hanging on the wall, and the prospective clients are ringing your new business line off the hook. Cool, right? Yeah... until you get your first complaint about a bad layout, or a logo that’s just so 1998. So how do you create really beautiful websites and still make sure they satisfy your users? It all begins with good planning. Then you’ve got to write for the Web, know your audience, and, above all else, make sure you’re designing for your users, not yourself.

this is a new chapter   1

welcome to the big time

Your big chance with Red Lantern Design Jane’s just bought a small web design studio. Red Lantern Design’s been producing small sites for local businesses for several years, and now Jane wants to expand their client-base. But there’s a problem... The old Red Lantern webmaster used a WYSIWYG editor to create the company’s own site, and now no one can edit the files. Jane’s hired you to build a new site that will bring Red Lantern up to modern web standards and bag the company more lucrative clients.

I’ve bought a kiosk at an international business conference in a week. I don’t know a thing about web design, but I know you do. So you need to design a really impressive new website as quickly and efficiently as possible. Think you can do that?

Well, sure you can. Where do you think you should start?

Jane, Entrepreneur and new owner of Red Lantern Design.

2   Chapter 1

building beautiful web pages

Here’s the current Red Lantern site. Take a look at the screenshot and, using your web design expertise, annotate it. Note what you like. What do you dislike? Do you see any problems?

re. Jane loves Japanese cultu e th ht ug bo That’s why she me. na e th ed company. She lov

you are here 4   3

what did you think?

Here’s what we thought about the site. Your answers may be a little different, so don’t worry if you didn’t catch all of these.

There’s not much contrast between the menu and the background image, or the body text and the gray center column. Shouldn’t there be something to grab potential clients’ interest on the front page? Like news or a featured project...

esn’t The logo’s cool - but do out. feel connected to the lay

This isn’t a very inspiring pho to. gray temple A wit a gray mount h ain behind it... V ery Zen, but it doesn’t exac tly say “This co mpany is a young, dynamic, exc iting web design trailblazer.”

ace at There’s lots of wasted sp re we the top of the page befo ent. get to the menu and cont

One column? That’s it? Seems pretty bland for a web design studio’s site!

4   Chapter 1

building beautiful web pages

Where do you start? There’s not a lot that’s good about the existing Red Lantern site—the logo’s nice, but that’s a pretty damning comment on the rest of the design if that’s all there is to like. But if there’s so much wrong, how can we figure out what to work on next? Where would you start?

Uh, yeah, so uh, I know where I’d start. I, uh, know HTML. So I’d start with the code. Get to it right away. Then I’d work up some, uh, CSS and uh, that’s it! Okay?

Joe Blow thinks he’s a fancy schmancy web designer. What do you think?

Is Joe right? Is there anything else to do? Where would you start?

you are here 4   5

start before the part where you code

Are you kidding me? How am I supposed to know where to start? I’ve got a whole bunch of stuff I need to do, so you tell me. What should I do first?

“Where should I start?” and “Where should I go from there?” are really good questions. The fact you’re still asking yourself those questions without opening a text editor is a good sign. The answer to both is, always follow a design process. A design process structures your project so that you stay on task and don’t go off in every different direction all at once without accomplishing anything but stress, stress, and more stress. A process is really just a workflow that determines the order you do things on a web design project. Imagine you’re building a house for someone. It’s their dream home, they’ve got a ton of ideas on their wishlist, and you also need to include the usual things you’d expect to find in a house: walls, floors roof, kitchen, bedroom, bathroom, living areas... Now ask yourself where you’d start? Would you build the walls first? Would you pick out fabrics, or draw up a blueprint? Which one is going to pay off two weeks from now? Two months? Two years?

6   Chapter 1

building beautiful web pages

Draw up a blueprint FIRST So building a website is a lot like building a house. If you start with a blueprint, you’ll know exactly where you’re headed at every step: foundations, load-bearing walls, and so on. For a website, you use Information Architecture (or IA). IA is the process by which you break your website’s content into chunks and then organize those chunks hierarchically in relation to one another in a way that’s logical. Most of the time, each chunk of information is content (text, images, etc.) that lives on a single page. IA is also closely linked with building your site’s navigation. So, if you’ve got bad IA, chances are, you’ll have a bad navigation system as well. If your site doesn’t have solid IA, it will feel disorganized and confusing to users. And that will make users go someplace else to get what they’re looking for.

The blueprint for a typical website is Information Architecture.

In this typical “rever branching bush” IA dise the “Products” sectionagisram, under the “Home” section. Turn your book upside-down. The diagram looks like a bush. About Us

The “Print Books” section is under the “Products” section.

Art

Break down your content int logical chunks that are relateod to each other in an ordered hierar chy.

Home

Products

Print Books

Architecture for your house starts with a blueprint.

Contact Us

Links

eBooks

Craft

And finally the two categories of printed books are listed under the “Print Books” section.

What content do you have for the Red Lantern site? How will you order it? Will you need any more material?

you are here 4   7

information architecture

Start the Information Architecture process by asking Jane about the content she wants for the site. Here’s a memo from Jane telling you what sections she wants on the site. Write down a one or two word description for that “chunk” of content.

MEMO From: Jane ent Subject: Site cont

we put n of the site where Let’s have a sectio ntern. dates about Red La up d an s m ite s w ne here section of the site w a ed ne ly ite fin de We ork l of the awesome w we can show off al we’re going to do. e page. How would w t ac nt co a s ed ne The site ?! out a contact page ever get clients with n of od to have a sectio go be ld ou w it k in I th ... mpany—what we do the site about the co that kind of thing. re they know we do We need to make su design! consulting and web

8   Chapter 1

building beautiful web pages

Once you’ve worked out the sections of information for the Red Lantern Design site, you can start to build your Information Architecture diagram. Fill in the spaces provided with your individual sections from the facing page.

Home

ll Your IA diagram wiyo ur th always start wi ge at pa home or main erarchy. the top of the hi

Remember, each new row is a subsection of the section above. What “chunks” of content might live in these two sections?

you are here 4   9

what’s your architecture?

You started the Information Architecture process by asking Jane about the content she wants on the site. Jane let you know what she thought the sections should be. Here are some possible one or two word descriptions for each “chunk” of content.

MEMO From: Jane ent Subject: Site cont

we put n of the site where Let’s have a sectio ntern. dates about Red La up d an s m ite s w ne here section of the site w a ed ne ly ite fin de We ork l of the awesome w we can show off al we’re going to do. e page. How would w t ac nt co a s ed ne The site ?! out a contact page ever get clients with n of od to have a sectio go be ld ou w it k in I th ...that mpany--what we do the site about the co kind of thing. re they know we do We need to make su design! consulting and web

10   Chapter 1

News & Updates Portfolio Contact About Us Consulting, Design

building beautiful web pages

Given these “chunks” of information, how does your IA diagram look?

de a main In our IA diagram, we rmathe “Home” “Services” section undeat Red page to show users th nsulting and Lantern does both co web design.

Portfolio Under “Services,” we added our two chunks from Jane’s memo.

Home

& About Us

Services

Web Design

News & Updates

Consulting

Q: A:

Do IA diagrams always have to look like a reverse branching bush?

No, though the reverse branching bush is probably the most common way IA diagrams are done. Honestly, any kind of diagram that accurately and clearly represents the sections and subsections of content (and the hierarchical relationship between them) works just fine.

Q: A:

We added the “About the home page. This willUs” section to arriving there and give thorient users explanation of Red Lant em a quick the company does. Afte ern and what can explore the other sur that, users bsections.

Will the people I design sites for always be as clear as Jane about what sections they want?

Yes... and no. You’ll be amazed at the extra details about sections and design ideas that come from just talking to people. Just because they may not know the names that sections on a site are commonly called, doesn’t mean they don’t have a clear idea about what they want their site to contain. Then it’s up to you to organize the sections logically and hierarchically.

Contact

We shortened “News & Updat to just “News” since it means es” the same thing and will save space in the menu.

Q: A:

Couldn’t I just skip this part of the process? This IA diagram and the one on page 7 look pretty similar... No! Don’t skip IA, as it can often determine parts of the design when you come to lay out the site. Besides, although there are some similarities of structure, every site is different, and some sites will have a lot of subsections. The more content you have and the deeper your IA diagram, the more complex your navigation system will be. You’ll not only need top level navigation, but second tier navigation as well. But don’t worry, we’ll cover dealing with IA in a lot more detail in Chapter 3.

Q: A:

Is an IA diagram just like a sitemap? The “chunks” just look like links...

An IA diagram shows a hierarchical relationship between sections and subsections of content in a site. It isn’t meant to show links between sections, but you will use it when you put together the navigation for your site. In fact, let’s take a look at that next... you are here 4   11

what is good navigation?

C’mon, all we need for good navigation is some buttons that link to all the pages in our IA diagram, and we’re good to go...

Will that be enough to help your users find their way around the site? You need to think about navigation twice in the design process? First, you need to think about your navigational elements—yes, things like buttons and nav bars—while you work on the overall layout of the site. Navigation will show up again when you begin writing the code and building the layout elements that have to do with users finding their way around the site, as well as linking your pages together. But don’t jump the gun, you need to start by organizing your top level navigation. Information Architecture isn’t just important for organizing your site’s information; it’s a big deal for your navigation as well. So, when it comes to building your site’s navigation, keep your IA diagram close at hand.

12   Chapter 1

building beautiful web pages

Determine your top level navigation Top level navigation is usually the most prominent navigational element—the tabbed nav bar at the top of the page, the vertical nav menu in a secondary column, etc. More often that not, your top level Home navigation links to those sections one tier below the home page in your IA diagram. & About

Portfolio

Services

Web Design

Us

Because you moved the “About Us” sect ion to the home page of Red Lantern Des ign’ s site, it’s easy to circle the top level navigation elements in your IA dia But how will you style the menu? gram.

News & Updates

Contact

Consulting

Draw a few sketches of the kinds of menu you’re already familiar with and start thinking about which menu type would suit the Red Lantern site.

you are here 4   13

which style of navigation?

Which top level navigation design do you think will work best for the Red Lantern Design site? If you don’t know, how do you think you’ll work it out?

A menu bar

Tabs like a file folder

Horizontal menus for top level navigation

Plain text links

Buttons

Vertical menus for top level navigation

A vertical menu bar

14   Chapter 1

Buttons and plain text menus

building beautiful web pages

Put it all in context The point of the top level navigation is to show your users where they are within your site’s main structure. We’ll come back to navigation in a lot more detail in Chapter 6, but for now, you need to ask yourself how you’ll style the menu on the Red Lantern site. Time to start thinking about which menu type would suit the site and where it would fit on the page.

Horizontal tabs

Horizontal buttons

r top level navigation on fo ed us e ar bs ta l ta on Horiz ey save a lot of space. loads of sites because th

Horizontal buttons fo top level navigation r

In this case, the buttons become visible on mouse over, which is a nice, subtle touch.

Vertical menu

Vertical tabs

Vertical menu for top level navigation. Back when people first started adding menus to their sites, this was the most . popular type of menu

Vertical tabs for top level navigation styled with CSS and images add a real notebook feel to this site. Notice this site’s content is written in French. See appendix 1 for dealing with multi‑language sites.

you are here 4   15

pencil and paper?

Show Jane some basic design sketches So you’ve got the main content mapped out. What will you need to do next? At this stage, it’s a good idea to show Jane some basic design sketches...

Hold it right there! IA diagrams, sketching designs on paper... What’s with all the drawing? I thought this was a book on WEB design. I don’t see much of that happening so far...

Having a clear idea of where you want to put the building blocks on screen saves valuable development time. It’s much quicker to sketch a few designs on paper and get Jane’s reaction before you start than it is to waste time working up the code for a bunch of designs when she can only pick one…

16   Chapter 1

building beautiful web pages

Sketches keep the focus on functionality Your first sketches should be black and white and drawn on paper. That way, Jane will be completely focused on the basic layout of the design (instead of what color the background of the page is or how great her logo looks placed over that image or... you get the picture). Your designs should show Jane some basic layouts with the content she’s requested in various configurations on the page. The sketches should make Jane ask herself questions like: “Do I want a large image at the top of the page?”, “How many columns do I want?”, “Where should the menu go?”, and so on.

This design is too similar to the existing site design for Jane... time for you to go back to the drawing board.

Here’s the first sketch we showed Jane. She didn’t like it because it looks almost exactly like the existing design, but with the main content section broken into two columns. Now it’s up to you to come up with a basic design Jane does like. Draw at least three more concepts on your own sheets of paper.

Use horizontal lines instead of actual text. You don’t need too much detail at this stage. Use the sketches to get your ideas down on paper. You can work out the details later.

you are here 4   17

sketch out your navigation ideas

Basic black and white sketches keep the focus on the main layout. It’s time to show the basic layout concepts to Jane. Which will she choose?

Design #2 has horizontal tabs for the menu. Under the logo and menu, there’s space in the two-column design for a picture and the news section beneath that, while on the right are small thumbnail images of sites Red Lantern’s designed.

Design #3 has a plain textual menu in place of the tabs, and it’s switched the position of the portfolio and content sections.

18   Chapter 1

building beautiful web pages

Design #4 is a threecolumn design. It leads with the main picture top left and the logo to the right. Underneath are the menu, content, and portfolio sections.

Design #5 simply switched the order of the items from design #4, so the page starts with the logo and top of the menu at the left of the screen with the other sections following it.

I like the look of 3 best. But, uh, can you show me some more detail? We need the site to be ready for the conference.

Great, you’ve agreed on a basic design, what will you do next?

you are here 4   19

what’s next? So we’ve agreed on a basic layout with Jane, but what should our next step be? Firing up the ol’ text editor, grabbing some sample content from Jane, and working up an XHTML storm?

Frank: Nope. We’re going to stick to pen and paper for now. What do you think about adding some color to those sketches? Jim: Why would I do that? Can’t I just get going with the code and test different colors using CSS stylesheets? Frank: Well, this way, you get a chance to see how colors interact with one another, how interface and layout elements play off one another once they’re in color, how your navigation system looks in relation to the rest of the layout, and generally whether content’s represented in the best way possible. Joe: Wow. That sounds like a tall order for one little sketch. Couldn’t we just have shown Jane a few color versions instead of going with the black and white sketches? Frank: Clients can get distracted by color too early in the process. It’s best to show them something that gives them an idea of the functionality of the site—

Frank Jim

Joe

Joe:—before we start on the look and feel part of the design process. I get it. The sketches provide us with a painless way to catch any potential design problems before we start coding our design, and they become major obstacles. Frank: There you go. But we’re not just doing one sketch here, Joe. Joe: No? Frank:— Jim:—No. We’re going to do a ton, all in different colors, and show them all to Jane like we did with the first sketches, right? Frank: Kinda. What we’re actually doing is creating storyboards to test a few variations. We’ll show Jane the best one or two. Jim: Wait. What? Frank: Yeah, these are like the storyboards—you know, that sequence of little sketches that look like a comic strip—the film industry uses to test out shots before rolling the cameras. We’re doing the same thing. Here, let me show you a neat trick for creating good storyboards.

20   Chapter 1

Here’s a cool little trick to use you’re designing storyboards. Takewhen screenshot of a website—any wil a Open up your favorite image editil do. program, and erase the actual we ng bsite content. Now you have a browser template to draw your storyboards in.

Browser Template

Now that you know what kind of layout Jane wants for the Red Lantern Design site, it’s time to storyboard it. Take a sheet of paper and a pencil and go to work. Be as detailed as possible in what you come up with. If you’ve got some handy, use pencil crayons to add color to your storyboards.

building beautiful web pages

you are here 4   21

red lantern storyboards

A little bit of color in the storyboard helps to establish the personality of the site.

Rough sketch of a cityscape. We’ll need a good image here.

Finished Red Lantern storyboard. Yours might look a little different, but this is the level of detail you want to see in a final storyboard.

Moved the logo behind the main content section.

Put the portfolio on the homepage. Potential customers want to see what you can do!

Here’s the space for the top level navigation, and we’ve left a space underneath the main image for important announcements or news items.

No need to add headings or body text at this stage. Lines and blocks are fine as you’re looking at the overall design, not the detail, here.

22   Chapter 1

building beautiful web pages

Tonight’s talk: Pencil and Design Program discuss Storyboards

Pencil:

Design Program:

Yo, Design Program, can you clear something up for me? Sure. What’s up? Well, I’ve gotten a little confused over here. Some people have started calling me “wireframe,” but I thought that was a term that’s used to describe code mockups...

Yeah. It can be confusing, as people also use the term “wireframe” to refer to a code mockup that isn’t totally fleshed out yet. But now isn’t the time to get into code.

Code [eavesdropping]: Pencil:

Hey! I heard that.

Sorry, buddy, but Design Program’s right. You might think you’re saving time by diving right into HTML, but it could end up costing you in the long run. See, if your client (or you) doesn’t like the design you came up with and wants to go in a completely different direction, you’ve just invested tons of time in to HTML (and probably CSS) that you’re not going to use. It’s a lot easier to file a storyboard away and start with a fresh sheet of paper.

I’m not so sure. I prefer not to get all hung up on detail. The whole point of storyboards is that they’re a quick and flexible way to brainstorm ideas and get some designs down. Besides, why waste a ton of time slaving over every pixel’s placement in several designs when the client’s only going to pick one?

Design Program: —or a new file. I’d go the formal route right from the start. It saves a ton of time as you can copy details right out of the storyboards into the final design if they work.

I guess you might have kind of a point there, but are you really going to show your messy, smudged, coffee‑stained, self to the client, Pencil?

I guess if you’re preparing a pitch for a potential client, it might be a good idea to come up with something more polished and formal. But I still think detailed hand‑drawn storyboards should be your first stop when you start to design a new site. you are here 4   23

prototype after design

The storyboards look absolutely wonderful. The design and layout for the site look great. But the conference is in two days... Can I see it on screen?

Now it’s time to prototype the site in code Building a prototype in code has some great advantages. First, even though your design might look great on paper, it might not work (technically speaking) when you code it up. The prototype will give you an opportunity to quickly fix anything (code-wise) before you invest too much time in building a polished finished product. Also, if you’re working with clients, a code prototype gives you something to show them, and just like your storyboards, you can get useful feedback and make iterative changes.



What do you mean, iterative?

Iteration is a design methodology that lets you test, analyze, and refine prototypes of work in progress. At each stage, you go through each of the steps in the design process— it’s cyclical—until you get something you (and your client) are happy with.

24   Chapter 1

building beautiful web pages

Ready Bake Code

Go ahead and grab the files for the first code prototype from: www.headfirstlabs.com/books/hfwd/ch01 Then we’ll give it a quick test drive to see how everything’s looking.

gn */ ern redesi /* Red Lant body { margin if') /body_bg.g '../images padding: 0; l( ur 2 12 : #7a2 if; -ser sans background le>R ed Lantern Design lvetica, 33 color: #3
media="screen" /> ul, li { h1, h2, p, margin: 0; 0; g: in padd

Red Lantern logo

color: #333 ee;HTML for :u #e nd ed ne ou gr yo , er ck mb

Repeat yourself

}

Re . diagram every page in your IA
Once you've downloaded it, duplicate the code and namethem tokyo files accordingly. You'll link together in the end.<br />
<br />
buildings

you are here 4   25

test drive

Test Drive

Ju Qu st o in ic ne Th ... H k, g da pi is av et y to th ece sho e it the go de at w of uld ma con . c Ja sign e’ve ake be a iled tent . ne na go no ile t t w d he do wn ...

Time to check the site out in your browser. Once you’ve tested the site, show it to Jane to get some fast feedback on this iteration.

26   Chapter 1

building beautiful web pages

Here’s the text Jane just sent over. Grab a stopwatch and set it for 15 seconds. Hit the Start button, and begin reading this text. When your time’s up, write down what this text is about.

MEMO From: Jane Subject: Site content

atever the service or sign than ever before. Wh de of us cio ns co re mo xt surrounds all People are value, an intangible conte or on pti um ns co the r riences, product, whateve t they offer designed expe tha lize rea s se es sin bu l hance interactions. Successfu cessary resources to en ne the t es inv d an ct, du pro ngry for regardless of service or us of design, they are hu cio ns co re mo ly on t no aesthetic, both. People are fy them on many levels: tis sa t tha es nc rie pe ex images, themes and od” design. Design is . They are hungry for “go ral ltu cu al, gic olo ide c, thorough, deeply pragmati clients, we emphasize a r ou h wit ng rki Wo g. tin ening. At the about connec phasis on learning and list em an h wit ss ce pro rch for real considerate resea and contexts. We design es nc die au on ss ce pro le are looking same time, we center the understand that real peop We ts. ge tar ic ph gra mo de ns in creating people, not nts, processes and desig clie r ou ide gu d an re usable, for something mo signs and builds simple, de rn nte La d Re . all for greater tangible value ssible - all using web fast, readable, and acce are t tha s ite bs we e tiv and attrac standards. web interfaces and - designing and building n sig de e ac erf int in: ize looking to update We special site redesign - if you are b we s; ard nd sta b we markup and templates using s optimization - simplify cs d an p rku ma S; CS o ing your site or move it int ucturally sound; consult str re mo e sit ur yo ke ma d minars. css to improve speed an rkup suggestions, and se ma d an s cs , gy ate str n help with desig

you are here 4   27

bad copy is bad

Don’t ruin a good design with bad copy All the awesome design work, storyboarding, and prototyping in the world is not going to save your site if you don’t have any content (or if the way you present your content stinks). So how will you ensure your content’s interesting? Writing for the web is different than writing for regular print.

Come on, writing is writing. There’s no reason to re-write some text, especially for a website...

Instead of reading your content from left to right, beginning to end, like a book, users scan the text for keywords and concepts—to give them an idea about the contents of the page. When you combine this with the fact that users generally don’t spend that much time on individual pages, you know you are going to have to write differently. The word of the day is scannability!

28   Chapter 1

building beautiful web pages

What makes text scannable? There are several techniques you can use to make your text scannable. Short paragraphs, headings, bullet points, and clear meaning will all help users scan your content more easily.

A brief introductory section provides an overview of the text. That way, the reader knows what they are getting into right off the bat.

Emphasis (bold italic text) highand important termslights for the user.

Clearly written headers give the reader information about the whole article and its subsections.

Short paragraphs are easier to read than huge blocks of text (which are harder to read and comprehend on a computer screen). Bullet points are a super-fast way to give facts to your users. you are here 4   29

be the editor

Here’s the text Jane just sent over again. Rework the copy so that follows the scannability checklist.

MEMO From: Jane ent Subject: Site cont

e service or before. Whatever th er ev an th n sig de unds all nscious of ngible context surro ta in an People are more co e, lu va or n nces, the consumptio r designed experie fe of ey th at product, whatever th ize al ces to enhance sful businesses re e necessary resour interactions. Succes th st ve in d an t, uc or prod are hungry for regardless of service cious of design, they ns co e or m ly on t levels: aesthetic, both. People are no tisfy them on many sa at th es nc rie pe Design is d ex ry for “good” design. images, themes an ng hu e ar ey Th l. ra , deeply cal, cultu phasize a thorough em pragmatic, ideologi we , ts en cli r ou orking with ng and listening. At about connecting. W emphasis on learni an th wi s es oc pr ts. We design ch considerate resear diences and contex au on s es oc pr e th ople are center derstand that real pe un the same time, we e W s. et rg ta ic ns in demograph ocesses and desig pr , ts en for real people, not cli r ou e id ng more and gu d builds simple, looking for somethi Lantern designs an d Re l. al r fo e lu va ible ssible - all using readable, and acce creating greater tang , st fa e ar at th s ite ive webs usable, and attract terfaces and web standards. and building web in ng ni sig de n sig g to update terface de n - if you are lookin sig We specialize in: in de re e sit b we p and b standards; tion - simplify marku iza tim op s templates using we cs d an consulting into CSS; markup e structurally sound; your site or move it or m e sit ur yo e ak d and m and seminars. css to improve spee arkup suggestions, m d an s cs , gy te ra help with design st

30   Chapter 1

building beautiful web pages

You don’t have to use them all, just the ones that work for your content.

Scannability Check list Clearly written

headers

Small(ish) para

graphs

Use bold and ita lics to emphasize impo rtant words or phrase s. Use lists (order ed or unordered) fo r appropriate cont ent.

you are here 4   31

good copy is good

You edited Jane’s text, following the scannability checklist.

Scannability Check list Clearly written

headers

Small(ish) para

graphs

Use bold and ita lics to emphasize impo rtant words or phrase s.

MEMO From: Jane ent Subject: Site cont

Use lists (order ed or unordered) fo r appropriate cont ent.

e service or before. Whatever th er ev an th n sig de unds all nscious of ngible context surro ta in an People are more co e, lu va or n nces, the consumptio r designed experie fe of ey th at product, whatever th ize al ces to enhance sful businesses re e necessary resour interactions. Succes th st ve in d an t, uc or prod are hungry for regardless of service cious of design, they ns co e or m ly on t levels: aesthetic, both. People are no tisfy them on many sa at th es nc rie pe Design is d ex ry for “good” design. images, themes an ng hu e ar ey Th l. ra , deeply cal, cultu phasize a thorough em pragmatic, ideologi we , ts en cli r ou orking with ng and listening. At about connecting. W emphasis on learni an th wi s es oc pr ts. We design ch considerate resear diences and contex au on s es oc pr e th ople are center derstand that real pe un the same time, we e W s. et rg ta ic ns in demograph ocesses and desig pr , ts en for real people, not cli r ou e id ng more and gu d builds simple, looking for somethi Lantern designs an d Re l. al r fo e lu va ible ssible - all using readable, and acce creating greater tang , st fa e ar at th s ite ive webs usable, and attract terfaces and web standards. and building web in ng ni sig de n sig g to update terface de n - if you are lookin sig We specialize in: in de re e sit b we p and b standards; tion - simplify marku iza tim op s templates using we cs d an consulting into CSS; markup e structurally sound; your site or move it or m e sit ur yo e ak d and m and seminars. css to improve spee arkup suggestions, m d an s cs , gy te ra help with design st

32   Chapter 1

building beautiful web pages

Your text might look a little different, but as long as you’ve used the techniques to make the text more scannable, your users will thank you.

Welcome to the New Red Lantern Design Headings orient the Red Lantern is a small web design and consulting firm specializing in standards-based user within the text. web design and development. Our goal is to build simple, beautiful webpages that make Note, you won’t need your information easy to find and your users happy. one at the top of the page, as the logo will serve as a header If you or your company are interested in working with us, please check out our portfolio of design and branding work and contact us with your project details. We for the page.

look forward to hearing from you and making your presence on the web a little simpler and easier to find.

View our full portfolio Contact Red Lantern

These links will be a short let unordered list with the bul points removed by our CSS.

That’s a serious rework right there. Mine wasn’t anywhere near as, uh, comprehensive. Won’t Jane be mad at you for cutting out all her carefully crafted words?

Sure, she could be. But this version is short, to the point, and a lot more compelling. It tells users exactly what Red Lantern does, and what they can expect from working together. We edited out a ton of content—long words, sentences that you had to read three times to understand, and so on—that would have clouded this simple message. Besides, worst case, we can compromise with Jane and put back in some of her text... carefully edited, of course!

you are here 4   33

test drive

Test Drive Once you’ve edited your text so that it’s more scannable, all you need to do is update the text in the code markup that you’ve already developed for Red Lantern, test it in your browser, and if you’re happy with it, show it to Jane.

I love it! Yes, even the shorter text. You were right to cut most of mine. Your skills are going to help put Red Lantern on the map! I can’t wait to start some new projects.

34   Chapter 1

building beautiful web pages

Web design is all about communication, and your USERS So how do the two versions of Jane’s site compare? Every site’s ultimate aim is to communicate something to its users. If your website doesn’t communicate what you want it to, your audience will go to another site looking for the experience or content that you couldn’t give them. This is known as User-Centered Design. When you build a website, you’re building it for your users, not for you. You design for your user’s strengths and weaknesses. You want to use every technique possible to bring users to your site, help them find what they’re looking for, make sure they have a rewarding experience, and keep them coming back. The process you followed in this chapter— Pre-production using Information Architecture and storyboards to build a blueprint for your site so that you’re as efficient and focused as possible when you go digital. Navigation is based on your IA diagram. It’s more than just linking pages together. Navigation helps your users find information. Layout uses HTML and CSS to build the site’s interface (which you already came up with on paper back in the preproduction phase). Writing “fills” the design up with the scannable content that your visitors come to the site for.

The old design didn’t communicate much at all to users... The new site had users at the center of the design process from the get go. As a result, it grabs the user’s interest and tells them a compelling story.

—had just one aim: to produce a great-looking site that tells users all about Red Lantern Design.

you are here 4   35

web design toolbox

CHAPTER 1

Your Web Design Toolbox Wow... 36 pages in and you’ve already managed to totally rework a pretty crummy looking website. Next chapter: we dig deeper into pre-production.

ƒƒ When you design sites, you should practice user-centered design—creating sites that focus on meeting the needs of your users. ƒƒ A design process helps you structure a project so that you stay on task and get things done in an efficient manner. ƒƒ Most, if not all, web design projects have 4 components: pre-production, layout, navigation, and writing. ƒƒ Information Architecture is the process by which your website’s content is broken into chunks and then organized hierarchically in relation to one another. ƒƒ Developing your site’s IA is a two step process: organizing your site’s information, and building an IA diagram. ƒƒ An IA diagram visually represents the hierarchical organization of sections and subsections of information in your site.

36   Chapter 1

ƒƒ Top level navigation usually links to those sections in your information architecture one tier below your home/main page. ƒƒ The design of your top level navigation depends on the overall design and layout. ƒƒ There are a handful of great models for designing top level navigation: horizontal tabs, horizontal buttons, vertical menu, vertical tabs. ƒƒ Storyboards are used to visualize your design and test basic layout concepts before you jump into code. ƒƒ Storyboards are a great way to catch potential design problems before you spend time coding your site. ƒƒ Writing for the web is different than writing for print. ƒƒ Web users scan webpages instead of reading them from beginning to end. ƒƒ Web content needs to be written so that it’s scannable.

2 pre-production

Paper covers rock Wow, you really can erase things when you use a pencil instead of a text editor. Who would have thought?!

Tired of butting heads with a picky client? Yeah, you know the type... every time you show them their latest crazy design idea, they’ve already moved on to another look... another color scheme... another entire website. So how do you deal with fickle clients or those tricky hard-to-get-right websites? You start with paper, pencil, and a big fat pink eraser. In this chapter, you'll learn how to work smart before you dig into your HTML editor. Coming up with a theme and visual metaphor for your site, mocking up sketches in pencil, and using storyboards will turn you into a nimble, flexible web designer. So get out your sketch pad, and let's pre-produce!

this is a new chapter   37

mark travels to japan

Your first "international" gig... Mark loves to travel. After college, he took a year off to backpack around Japan and experience everything the island nation had to offer–from sushi to samurai. Now that he’s back, he wants to document his experience. It's up to you to build Mark a great, engaging website detailing his trip to Japan.

Tokyo metro map Mark

Menu

Japan

38   Chapter 2

pre-production

Travel pictures Flip camera videos

Origami

Mark’s got a ton of content, and all we know is he wants a great site. How in the world can we make sure we build Mark something he’ll love, without wasting a ton of time? How would you start building Mark's site?

you are here 4   39

visual metaphors

Think before you code Pre-production is all about getting things right before you dive into writing XHTML and CSS. Its all about getting your site’s design right on paper. That way, when you get to the point where you go to code, you know exactly what you are building. For Mark's site, we can get our ideas down, before we spend a ton of time fitting text and pictures into a layout scheme Mark might totally hate. Pre-production is also about letting your user approve what you're doing—on the front-end, when you can still make changes easily. There's nothing worse than investing days or even weeks into a design and then finding out the client hated it.

Start with a visual metaphor One sure way to get your site looking right is to figure out what the site is about. In other words, what is the site's theme, and how can you express that visually? A visual metaphor takes advantage of familiar visual elements (likes images, interface elements, icons, colors, or fonts) and reinforce the site’s theme. Suppose you're building a job posting site. The postings could be made to look like an actual bulletin board using a good visual metaphor:

Jobs on the Wall just needs to be a simple job posting site. One main column is all you need, maybe with some helper information in the sidebar.

40   Chapter 2

This site isn't just a virtual bulletin board... it actually looks like a bulletin board.

The finished site reinforces the “job posting board” metaphor complete with cork board texture and PostIt note navigation.

pre-production

A clear visual metaphor helps reinforce your site’s theme Suppose you’re creating a children’s online community site geared for kids ages 7 to 10. Visually, you’d want to use bright and bold primary colors with cartoony interface elements and fonts. These design elements reinforce the subject matter of the site: kid oriented, fun, etc. The look of the site actually tells you what the site’s about. A visual metaphor can range from subtle (using colors that give the user an abstract feeling that the designer wants to associate with the site’s theme) to direct (using graphics that tie right into the site’s name or identity–like using graphics of rocket ships for a site called Rocket Ship Designs).

Bright bold colors and an arctic theme help set the visual metaphor for this site.

Cartoon penguins and comic-book style typography are definitely geared toward a younger audience.

Visual metaphors, themes, what's the difference? And I thought you said I should be designing on paper, anyway?

you are here 4   41

site themes

A theme represents your site’s content The word theme is used to refer to all kinds of different things in the world of web design-–which can be kind of confusing. In this case, a theme is your site’s purpose and content. So, the theme of amazon.com is an online merchant that focuses mostly on books. The visual metaphor uses design elements (color, graphics, typography, etc.) that reinforce the site’s theme. Here are a few more good examples of theme and visual metaphor working well together:

IconBuffet creates and sells icons for use in web design and other interface development. Icons are featured throughout and a takeout container is used to reinforce the site’s name. IconBuffet’s visual metaphor is subtle–but the design reinforces the clean, simple icons they produce, and their logo is a great literal interpretation of the site’s name.

for Silverback is an application web sites. on performing user testing a typ e o als Because a Silverback is illa gor of animal, the jungle and theme is used throughout. Unlike IconBuffet, Silverback’s visual metaphor is more apparent. They make the page look like a gorilla’s surroundings, complete with jungle color scheme, leaves at the top of the page and an amazing logo/ icon of a gorilla with a clipboard. Hence, “Guerilla Usability Testing.” 42   Chapter 2

pre-production

Take a look at the screenshots below. Write down the site’s theme and circle (yes, draw in the book) some of the design elements that are used in the site’s visual metaphor. Remember, a site’s theme is its content/purpose, while the visual metaphors are the design elements that are used to reinforce the theme.

you are here 4   43

identifying themes and visual metaphors

Your job was to write down the site’s theme and circle some of the design elements that are used in the site’s visual metaphor. What did you think the theme of each site was? Here's what we wrote down.

Bite marks used throughout the page remind you that this is a site about food.

Serious Eats is a food website and blog. The logo and bite marks on the navigation tabs help reinforce the food theme throughout the page.

The colors are bright and “appetizing.” Green, orange, red, peach–colors you’d want to "eat."

The Morning News is a news-based web magazine. Its multi-column, newspaper-style layout and simple design reinforce the news theme.

A multi-column layout similar to that of a news paper. Also, the columns are staggered, with some spanning the width of two, others just one. 44   Chapter 2

Generous use of whitespace and a grid-based layout help reinforce the newspaper theme.

pre-production

Brainstorming: The path to a visual metaphor Let’s get back to Mark’s site... we need to figure out the theme, and come up with a good visual metaphor. Not only that, but we want to figure this out without thinking too much about how many columns his site will need, or what sort of navigation Mark might like. Developing a visual metaphor is really all about brainstorming–spending some time really thinking about your client’s content, audience, and what visual elements they want to see on the page. And remember one thing: don’t discredit any ideas or concepts you come up with. Just write them all down... you can refine things later..

Write down everything that comes to your mind. Don’t judge an idea until the end.

buddy, but Mark may be your ng his site, he's when you're designi e boss! your client... and th

The brainstorm list can include design ideas, considerations, site secoctntionent even color and imagery. s and

Map of Japan Food: Sushi, sa shimi, fish, Ja panese pancak Hiroshima es The Golden Pa lace Japanese flag Travel journa l/blog Photo slidesho w Food page Interactive m ap Language lesso ns Japanese anim ation Video games

Do a quick brainstorm for Mark’s site and write down any design, content or visual element ideas you come up with. Remember, write down everything–you can filter out bad ideas later.

you are here 4   45

from brainstorms to visual metaphors

Develop a theme and visual metaphor for Mark Coming up with a theme and a visual metaphor can be tricky. Once you know what content you have to work with and have a few brainstorming sessions under your belt, it's time to start thinking about the best way to convey and display that content to your client's users. Color, layout, and element placement are all important factors when deciding the best way to reinforce a site’s theme. So once you're clear on a theme, here's what you need to do: 1

Choose some color palettes Make layout decisions based on content. The more columns you have, the more space you have to fill. Also remember that whitespace is important. You don’t have to fill every available pixel. Pick colors that work well with the content and support the theme of the site. Use services like http://kuler.adobe.com to build palettes and see how different colors will work together. The use of imagery, iconography, and text can help reinforce the site’s theme by making the site “look like the content.”

3

 se visual elements to reinforce U the theme

2

Design layouts based on content

ing will This is where your brainstormof ideas to help the most. Use your list tha t help come up with display elements mes.. emphasize your site's main the

A visual metaphor uses common visual elements (colors, fonts, icons, etc) to help reinforce a site’s theme. 46   Chapter 2

pre-production

Write down two possible central themes for Mark’s site. Then come up with several design elements (remember, these can be fonts, colors, logos, icons, interface elements, etc.) that will contribute to a cool visual metaphor for Mark's site and reinforce his site’s theme.

Here's where tim e with a paper an pencil can pay of d f get ready to dig big-time when you into XHTML an d CSS.

1

Central Themes

2

Interface Elements

you are here 4   47

themes and site elements

Write down two possible central themes for Mark’s site. Then come up with several design elements (remember, these can be fonts, colors, logos, icons, interface elements, etc.) that will contribute to a cool visual metaphor for Mark's site and reinforce his site’s theme. Here's what we wrote down...

ing different. It’s ok if you came up with somineth the right Just make sure your ideas areese culture. pan Ja ballpark for a site on 1

Central Themes Japan travel diary

A traveler's guide to Japan Let's emphasize the trip Mark took, and what Japan was really like. This could also turn out to be a great resource for others planning a trip or traveling to Japan.

2

Interface Elements Header with large image Mark took great pictures. We need to show them off!

One main navigation Simplicity is key, and Mark doesn't have tons of trips to record... just the one.

48   Chapter 2

Map of Japan Japan’s geography is very unique. That's a place where we can use visuals a lot.

Single sidebar Again, simplicity. We really don’t have enough content to fill multiple sidebars.

pre-production

Your page elements shape your visual metaphor Once you have a general site theme and have started to think about what you want on your site, you need to consider where all your client's content is going to go. How you lay out your site affects your overall visual metaphor a lot... it dictates what can and can’t appear

on a given page. For example, if you only have a single column, it may be difficult to make your site “feel” like a newspaper or magazine. But add a few more columns and you can make that page mimic the gridlike, multi-column layouts of your typical daily paper.

Sub Navigation

Main Navigation Links to main sections of site.

Links to content within main sections.

Sidebar(s)

Used for links and ancillary content.

Whitespace

Used to separate elements and draw the eye to key parts of the page. Whitespace is often overlooked. It can both help and hurt a design.

Content

This is where the meat of the page goes and is what visitors come to find.

Footer

A great place for copyright info and links. Recently, footers have been used for content like images. Twitter feeds markup validation.

you are here 4   49

page elements

Navigation is essential for users to get around your site. Design, placement, and the content of this element will help convey your site’s theme in different ways.

Body content is where all the magic happens. This is where you put the stuff people are coming to see. Whether it’s images, a blog post, or a YouTube movie, all that stuff goes in the body.

Sub Navigation displays content that lies under a main navigational item. This is usually only needed for larger sites and more complex content.

Whitespace (which is also called negative space) is the area between all the different design elements on your page. Whitespace helps to break up blocks of content, gives the user’s eye a little rest, and focuses the user's eye towards content.

50   Chapter 2

pre-production

The footer portion of your layout can hold anything from copyright information to duplicate navigation links. Users will often look to this section for links or content that can’t be located anywhere else on the site.

Q: A:

Sidebars can hold everything from link lists to extra body content. They can also be useful for ancillary navigation and archive links for blogs.

Do I need to use all of these elements for every site?

Nope, these are just examples of the general page elements you might end up using. Remember, each website is different. In all cases, your client's content (and their theme) will determine what page elements you end up using in your final layout. In fact, if you try to use all of these page elements on every site, you're going to end up with a design that doesn’t make any sense to you (or to your users).

Q: A:

Does every site need a theme and visual metaphor?

Yes and no. Not every site needs a gorilla-themed metaphor or a snazzy newspaper layout to reinforce its content. But in most circumstances, your site is going to have some sort of theme, even if it is only expressed through the content and writing on the site. Remember, content is a design element and can be used just like whitespace and sidebars.

Q:

What if I don’t start with any content? Or I want to just start a blog or something really simple?

A:

Even if you don’t have any content (images, articles, videos, etc.) initially, you still need to make a conscious decision about the overall theme of the site. If you’re starting a blog, what kind of topics are you going to write about? If it’s more of a journal, well then there’s your theme. All websites have a theme, even if it’s just about you. you are here 4   51

finalizing a visual metaphor

To finalize the visual metaphor for Mark’s site, we need to look at some different color and layout combinations and see how they will work with our content. Check out the following layout and color mockups and write down your thoughts on how well each of them represent Mark’s content. Remember to think about the themes and visual elements you identified in the previous exercise.

Here are a few pictures and items Mark brought back from Japan.

Single-column layout bright pastel colors. with

52   Chapter 2

pre-production

Three-column site with simple, blue color scheme.

Traditional two-column site with earthy color scheme.

you are here 4   53

finalizing a visual metaphor

To finalize the visual metaphor for Mark’s site, we need to look at some different color and layout combinations and see how they will work with our content. Check out the following layout and color mockups and write down your thoughts on how well each of them represent Mark’s content. Remember to think about the themes and visual elements you identified in the previous exercise.

These colors don’t really seem to fit the theme of a Japanese travel site. The light pastels just don’t work.

Although single-column sites are simple, this isn’t enough space to highlight all the content that Mark has brought back from his trip.

The two-column layout should give us enough room, but this color pattern still isn’t working.

The earth tones are nice, but a little dark for the theme. Japan is an island, so shouldn’t we see some blue in there?

54   Chapter 2

pre-production

A large map of Japan would look really good in the header. When a visitor comes to the site, there would be no doubt as to the theme and content of the page.

The blue works well with the theme. The other colors are more neutral and will allow us to be creative when placing visual elements.

This layout/color combination gives us all the room we need to display Mark’s content. It uses a simple color palette that emphasizes blue; it's perfect since Japan is an island nation.

Three columns should work well for Mark. Not only is this an interesting look, it will allow him to present lots of information to his users.

you are here 4   55

xhtml and css mockups

Build a quick XHTML mock-up for Mark Just because you're focusing on pencil and paper doesn't mean you have to abandon XHTML altogether. Now that we've got some well-thought out ideas, let's build a very simple mockup of Mark's site in XHTML with some simple CSS to add color and formatting. Fire up your favorite text or HTML editor and create a new file:

XHTML Strict DOCTYPE

Mark in Japan Link to the CSS file (it
just needs to be in the same

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis nisl eget est viverra placerat. ...

Nulla facilisi. Cras ac tellus fringilla tortor iaculis

Dummy text (we'll fill in


56   Chapter 2

throw It's a good idea to to st ju in a list or two, erent ff get a look at di t. styles of conten

pre-production

And the CSS... We'll need screen.css, too, a simple CSS stylesheet for displaying Mark's site: /* screen.css */ body { margin: 0; background: #112b63; font-family: Georgia, serif; line-height: 1.2em; } h1, p, ul { All these elements margin: 0; share the same rules. padding: 10px; } ul { padding: 10px; list-style-type: none; } Remove the bullets from the ul li { unordered list. margin: 0 0 10px 0; padding: 0; } “margin: 0 auto” centers the whole site in the brow #wrap { ser. margin: 0 auto; padding: 10px 20px 20px 20px; width: 880px; background: #0b204c; border-top: 10px solid #091a3f; } #header { background: #ead9b8; height: 150px; } #content-left, #content-center { float: left; Both column
s and width: 280px; the sidebar use the “float: margin: 20px 20px 20px 0; left” declaration to create a background: #fff; thre e-column look. } #sidebar { float: left; width: 280px; margin: 20px 0 20px 0; background: #ccc; } #footer { clear: both; Make sure the footer displays background: #ead9b8; below the columns. } you are here 4   57

final browser mockup

The end result when you join the XHTML and CSS from the previous two pages. Still bare-bones and basic, but it will give Mark a good idea of where we are headed.

Hmmmmm... I don’t know if I like the whole three-column layout thing. I was hoping for something a little simpler. You know: header, footer, one sidebar, that sort of thing. I’d also like to see some detail. I really can’t tell what you guys are going for here...

58   Chapter 2

pre-production

What!? Are you kidding? I thought the whole point of all this pre-production stuff was to get the client something he'd like right away?

you are here 4   59

saving time with storyboards

Ok, it’s clear that Mark isn’t really happy with our design, and we have to come up with something different. So now we have to throw everything away and start over. This sucks...

Joe: Can't we reuse some of the work we've already done? Jim: What, built another XHTML page using our theme? Then we'll be right back where we started... and Mark still might not like what we come up with. Frank: But it's like you just said... we still have a theme that should work. And I don't even think our visual metaphor has to be totally scrapped, right? We just need to show Mark some different variations. Joe: What about Photoshop? We could build the sites there and show him PDF versions of the designs. If he likes them, we already have a leg up on the visuals and imagery needed for the final sites. Jim: By the time we finish a handful of comps in Photoshop, we could have done them in XHTML and CSS, too. That's still a ton of work. And what if Mark doesn't like those, either?

Jim

Frank

Joe

Frank: What if we just draw some ideas out on paper? We can sketch our site ideas, add a little color, and send them to Mark to get his approval. If he doesn’t like them, we can draw some more. That shouldn't take any time at all. Jim: Hmmm... and because they're on paper, Mark could draw on them too, giving us a better idea of what he’s looking for when he doesn't like something. Joe: You know, this could work. So we can reuse our theme, but deliver two or three different designs on paper and give Mark some nice choices. I like that... Jim: The drawings don’t have to be really detailed, either, right? They just have to give Mark an idea of what his finished site is going to look like.

60   Chapter 2

pre-production

Use storyboards to develop ideas and save time without code One of the most important things in pre-production is the storyboard (sometimes called concept art). Storyboards are used to visualize your design in its entirety. They give you a chance to see how colors interact with one another, how interface elements play off one another, how your navigational system looks, how your visual metaphor plays out, and whether content is represented in the best way possible... without getting into code. In fact, storyboards are like another level of brainstorming. You already did some brainstorming on the theme... now it’s time to brainstorm your visual metaphor and design element ideas.

into XHTML Well, maybe gettinchg a good idea so early wasn't suto get back out after all... time per. the pencil and pa

Don’t be afraid to write on your boards. Marking them up is one of the advantages of testing designs on paper.

A basic hand-drawn storyboard can turn into a pretty detailed website.

Try creating your storyboards in a photocopy of an empty browser window. This is a great way to give your client a "web" context for your ideas. you are here 4   61

you’re not designing for yourself

Okay, even if we used storyboards, Mark still wouldn't have liked our design. So how can we make sure he likes the next version we come up with?

Don’t design for yourself! Remember, when you're designing for a client, it isn’t about you—it's about the client's needs. And taking the client’s needs into account obviously starts as early as storyboarding. Getting your client (that's Mark, remember?) involved in your design process could be as simple as sitting down for a meeting, having them fill out a design survey, or sending them early storyboard designs throughout the pre-production process. Not only will this allow you to build designs that your clients really like, they will be appreciate being involved in the process. We came up with things that we liked about Mark's content, but maybe we should have asked Mark what he wanted out of his website...

62   Chapter 2

pre-production

Somewhere I’d like to see a map of Japan. The geography is so cool, and I think it needs to be on the site somewhere. I’d really like a simple, two-column layout, like a lot of these blogs that you see.

I want to see as much of my content as possible in the final design.

I have lots of images. I think one would look good as the main header image.

What did we do wrong? Based on Mark's thoughts above, how would you change the ideas we came up with on page 54? What would you keep the same?

you are here 4   63

creating a storyboard

Let's create a storyboard for Mark Let's build Mark a different version of his site, on paper. We know a lot more about what he wants, this time, too... a logo, two columns, and lots of space for content. So get out some paper. Here's what you need to do:

1

Find some paper and make a grid Grab a piece of paper (8.5 x 11 is perfectly fine) and sketch out or fold the paper to create a grid. You might even want to use a piece of graph paper, which has the grid built right in. A nice grid provides a way to line up elements when you are creating your storyboard. Grids also provide a foundation that allow you to lay out your site so that things line up, appear ordered and well-organized, and make sense to users' eyes.

We'll talk a lot more about grids in Chapter 4.

2

You can use a printed blank browser to see how the site would look with window chrome.

Sketch out your design Here’s where you get let out your inner design geek. Layout your site, and sketch logos, images, and anything else that comes to mind. All of the site’s text can be replaced by lines or a box with the words “text appears here.” The point of the storyboard is not to see the actual content–it's to play with and finalize the layout.

Focus on the major elements, not slogans or text links. Just give your client a basic idea of their site. 64   Chapter 2

pre-production

3

Add color and finalize your storyboard It's pretty important that you add color to your storyboards—color changes everything. So break out your pencil crayons and add color to your storyboard. Even though your favorite shade of crayola blue might not be web safe, your colors should be close enough to see how they play off of one another when your idea goes digital. When you are finished with the colors, fill in any missing details– and Voila! One supremely awesome storyboard!

Here is what the storyboard looks like with browser chrome. This is the point in the process where you need to show the client your work. Give them two, maybe three, opti tell them to give you as much feedback as possible ons and (even drawing on them if need be).

Sketch out two storyboards for Mark. Make sure that each meets his needs, but are different enough to give him a choice.

you are here 4   65

the final storyboard

This is great! I like the simple layout, and the map of Japan in the header is perfect. Can’t wait to see the finished design.

We put this storyboard in a browser, so Mark could get an idea of how the finished site would look on screen.

Here's another design we did, but Mark didn't like this one. Still, it only took about an hour to put together two full-color storyboards.

Q:

Can I use Photoshop or another image editing program to do my storyboards?

A:

You can create your storyboards any way you want. The whole idea is to mockup design ideas as quickly as possible, though. Photoshop will inevitably give you more control and detail, but might take you longer. However, having digital versions of your designs, whether you create them in a program or scan your sketches into the computer, will allow you to quickly email ideas to your client for review. In the end, do what you’re most comfortable and efficient with.

66   Chapter 2

Q:

Why can’t I add text to my storyboards?

A:

Text (content) really isn't that important during the storyboarding stage. Your main focus should be on large layout elements and possibly color schemes. Your text will come later, after you design your navigation and information architecture. For now, just put dummy text–sometimes called Lorem Ipsum text–or thick lines that represent text.

Q:

What is the best way to add color?

A:

If you're hand-drawing your boards, colored pencils work the best. They are cleaner and more detailed than markers and won’t bleed through your paper. If Photoshop is more your style, then the sky is the limit. Either way, the point is to keep things simple, and represent how the site will look when it's online. We'll talk a lot more about color in Chapter 5, so don't get too hung up on color right now. Just do your best, and see what your client responds to.

pre-production

Your Web Design Toolbox CHAPTER 2

You should have several storyboards in place and a nice array of design techniques: themes, visual metaphors, and storyboarding. Next up: going digital with an approved storyboard.

APPROVED

ƒƒ When you pre-produce a site, you are able to try out design ideas on paper–thereby avoiding potential mistakes in coding which could cost time, effort, and possibly money. ƒƒ A visual metaphor leverages visual elements (images, icons, colors, or fonts) in order to unconsciously reinforce the site’s subject matter.

ƒƒ When applying a visual metaphor to your site, be subtle and don’t overdo it. ƒƒ Storyboards are hand drawn concept art storyboards that are used to visualize your design as a complete entity.

you are here 4   67

3 organizing your site

“So you take a left at the green water tower...”

Ted, honey, you don’t have any idea how to get to Margie’s loft, do you?

Look, how hard can it be? There are signs everywhere, and I know exactly what I’m looking for... I think...

A little shaky on your site navigation? When it comes to the Web, users are impatient. They don’t want to waste lots of time looking for the right button or wading through three levels of your JavaScript pull-down menus. That’s why you’ve got to spend a lot of time getting your site’s organization right... before you get into construction and design. Last chapter, you came up with a great theme and look for your site. In this chapter, you’ll really amp things up with a clear organization. By the time you’re done, you’ll have a site that tells your users where to go and keeps them from ever getting lost again. this is a new chapter   69

looking closer at content

These sketches look great. I really like this two-column design. So, where do we go from here?

Mark really likes the simplicity of this storyboard we built for him in the last chapter.

70   Chapter 3

organizing your site

Fit your content into your layout On his voyages throughout Japan, Mark collected a lot of material. He took pictures, kept a daily journal, collected items (maps, travel booklets, trinkets, etc.), and even managed to take some video. The big question is, how should all of this content be organized into his new design?

How do these bitsthofe design content fit into r Mark? layout we did fo

you are here 4   71

organizing your site’s information

Organize your site’s information A website is all about communicating information. No matter how good your design is or how cutting edge your layout is, if your site doesn’t speak to your audience, it won’t be nearly as successful as a site that says something, and says that something clearly. A huge part of how well your website communicates its content has to do with how its information is organized. If a site’s content isn’t organized well, all sorts of bad things can happen–like confused users leaving your site for someone else’s. Organizing your site’s information well (and logically) is the difference between good and bad navigation– which means the difference between your users finding what they want quickly and easily and your users being really confused.

Let’s explore how the organization of a site’s information can impact navigation. Take the chunks of content below and place each of them under the top level navigation category that you think they are best associated with over on the right.

Photos

Travel Log Diary

Food Places to See Getting Around

Menus

72   Chapter 3

Video Clips

Postcards

Currency Collection

Take these content chunks and place them under the categories you think each belongs with.

Hotel Reviews

organizing your site

These are the categories that Mark thought of for his content. How well do these work?

Tips & Travels

My Notes

Memories

Media

Photos Here’s one to get you started. Photos seem to belong below Mark’s “Memories” category... don’t they?

you are here 4   73

ambiguous navigation

So you needed to take the chunks of content and associate them with the most appropriate top level navigation category. Here’s what we came up with... what does your solution look like?

Media is usually pictures and videos, but “Menus” and “Currency” wouldn’t be out of place here. Besides, they are all technically pictures.

This seems like a good pla for Mark’s thoughts abouce his travels. His food cont t should fit nicely here, to ent o.

Tips & Travels

My Notes

Memories

Media

Getting Around

Food

Photos

Menus

Hotel Reviews

Travel Log

Postcards

Video Clips

Places to See

Diary

This is more text content to help people out while they are traveling in Japan.

74   Chapter 3

“Memories” is slightly ambiguous but is still a good place for Mark’s post cards and some photos.

Currency Collection Hmmm... photos really could go under “Media,” too.

organizing your site

These categories suck. Why aren’t menus under Tips & Travels?

Ambiguous navigation confuses users Thinking about what to name your main navigation categories is important and should not be a last-minute decision or an afterthought. Confusing categories will make it difficult for your users to find the information they’re looking for and make your site look unorganized and haphazard. Let’s take a closer look at Mark’s top level categories:

“My Notes” doesn’t really tell me am going to find on this page. Whwhat I the notes about? Travel? Food? at are

Tips & Travels

My Notes

elated Mixing categories, especially unr . Just ing fus con n ones, makes navigatio d, goo nds sou because the category d it. tan ers und l wil doesn’t mean users

Memories

What can the user expect to find in “Memories”? Photos? Video? Shouldn’t those be under “Media”?

Media “Media” isn’t a bad choice for a category, but when you put your photos under “Memories,” “Media” suddenly gets sort of confusing.

Go back to your solution on the previous page, and write in better, clearer category titles. You may also need to move around the chunks of content to match your new categories.

you are here 4   75

better navigation headings

Better Solution

Having clear top navigation categories is the key to making information easier to find on your site. Let’s see how some new main categories makes our organization more logical.

To avoid confusion, make this one category.

Tips & Travels Travel Tips Getting Around Hotel Reviews Places to See

“Travel Tips” is still a little ambiguous, but it will work given the options we have with Mark’s content.

76   Chapter 3

My Notes Travel Diary

Food

“Memories” is a little vague. Let’s use “Souvenirs” instead. It’s concrete and understandable.

Memories Souvenirs

Media

Currency Collection

Photos

Postcards

Video Clips

Menus

Currency Collection

Photos

Menus

Travel Log

Diary

“Travel Diary” makes more sense given the types of content that will be found here.

“Photos” belongs under media now.

“Media” is a good category, but “Currency Collection” and “Menus” belong in Souvenirs.

organizing your site

Q: A:

How long is too long for a category name?

In a perfect world you’d be able to find one word that describes all the content a user would find under a specific category. Unfortunately, that’s not always the case. A good rule of thumb is to keep your category names short (one to two words), free of jargon, and as close to describing the content as possible.

Q:

But I know what the link means, isn’t that all that matters?

A:

Actually, that doesn’t matter at all. You aren’t building a site for yourself; you’re building a site for your users. Your number one goal is to make information on your site accessible and easy to find by your users. If visitors can’t find what they came for, it makes no difference if you can.

Navigation headings should always be short, concise and reflect (as closely as possible) the content that a visitor will find when they click the link.

Q: A:

How can I tell if a category is ambiguous?

Sometimes spotting category ambiguity is as easy as asking yourself if a user or visitor would understand what your categories mean without any background on the content or topic of your site. In some cases, it’s not that easy, and you really have to step back and think about your content as a whole. If you have information on your site that loosely fits the theme or might be slightly extraneous, your category names will reflect that and won’t immediately click with the user. This is why thinking hard about your content before you choose your categories is so critical.

Q:

What if I have content that fits in two different categories?

A:

Most likely, content fits into different categories because you haven’t done a good job defining those categories. Content should only appear in one place on your site. Come up with five or six good categories, each of which is different enough that there’s not a lot of overlap. If you’re still having trouble, you may want to try a card sort.

Q: A:

What’s a card sort?

Good question. Keep reading...

you are here 4   77

information architecture

You know, I’m not sure this new content organization works. It still feels disorganized to me.

Jim: I actually think the categories are ok. This is what Mark gave us. Shouldn’t we just go with it? Joe: The organization isn’t the best, but I think users will be able to find their way around. The headings are still a little confusing, but they’re an improvement over the originals, and I don’t think they’ll get any better. Plus, I want to start coding. We shouldn’t be spending so much time on something as trivial as categorization for a travel site. Frank: But this is the foundation of our navigation! Joe: What are you talking about? Frank: Our navigation... isn’t most site navigation just putting links and sub-pages to good categories? Jim: I hadn’t thought about it like that.

Jim

Frank

Joe

Take your time with organizing your site. Navigation is built on your organization... and nobody likes confusing navigation options. 78   Chapter 3

Joe: Well, what else can we do? We’ve already done one revision of the categories—or navigation, I guess—and like I said, it’s not going to get much better. Frank: I think we’re too far into things to really know what problems we might have. Jim: You mean, start from scratch? Joe: Oh brother. We’ll just end up right where we are now! Frank: What if we don’t just start over? What if we approach things in a completely different way? Jim: Like how? Frank: Let’s build up an information architecture, not just a bunch of categories. Joe: A what? Frank: Information architecture. Here, let me show you...

organizing your site

Keep your site organized with information architecture (IA) Information architecture is just a way to organize the content you already have into groups that are meaningful and logical both for you and for your users. Sometimes thinking about navigation, or categories, gets you too far into how a site is going to look. Information architecture is all about taking a step back and really looking at what sort of content you’ve got... how does it all fit together? Take a look at this partial IA for a popular paint manufacturer, Krylon:

Always give your IA a title so you know what site you are working with.

Home

Products

Krylon Project Ideas

Expert Advice

The first “layer” of information architecture represents the category headings that might (eventually) become your main navigation.

My Folder

Artist The content chunks that fit under the category headings could end up as sub-navigation or could be content within a page.

Craft Metallics Multi Outdoor Paper Pro you are here 4   79

card sorting

IA–The card sorting way How exactly do you organize your site’s information? Well, there are lots of ways. One of the best is something called card sorting. Card sorting is a cheap and easy way to impose a structure on your site’s information. It’s also a great way to see how other people (maybe even your potential users) organize your site’s information. Card sorting also takes a step back from XHTML or even the Web in general and lets you think about organization, not just navigation.

To run a successful card sort, you need: 1

A stack of 3x5 cards

2

A pen and a clear table surface (or the floor)

3

A solid idea of your site’s content

Give each card a short, descriptive title. This should reflect exactly what the chunk of content is about.

ything! Nothing is Write down eversc e for a card too trivial or ob ur ain, and we’ll sort. Empty your nibrzation later. worry about orga

ch Create a new card for(oreayour piece of content you site. client) wants on their

Park Hyatt

Food Notes

food and Notes about all the trip. restaurants on my

Tokyo

Information , images an d thoughts fr om this hot el.

Flip Video

Random clips from my Flip Video camera.

brief, one Below the title, writeofa the content. sentence description also help you This description will content chunk was remember what the ck to sort the about when you go ba cards later.

80   Chapter 3

We like to use yellow index cards; however, your basic white, lined card will work fine too. Use anything, actually-just make sure you can write on it.

organizing your site

Card Sorts Exposed This week’s interview:

Getting Organized with Card Sorts?

Head First: Thanks for being with us, Card Sort. Glad to have you. You talk a lot about helping people organize their information, why have you been so successful? Card Sort: Well, first of all, I think the main reason I help so much is that I just get people to write down all their ideas–good and bad. This way, nothing is left behind, and you don’t end up in a situation where you’re trying to squeeze content in at the last minute. Second, having the ability to physically move the cards around helps you visualize different scenarios for your content. Head First: Is moving things around really that important? Seems like it might be a little trivial. Card Sort: Not at all. It’s probably the most valuable attribute of a card sort. It takes no time at all to completely rethink your content and navigation. Plus, you can have other people do the sort, too, and compare their arrangement to yours. Head First: Wow, I never thought about that! Do you always have someone else do a sort? Card Sort: Most of the time. It really helps to have a second opinion on things. Usually, having someone else perform the card sort leads to a content layout that you never would have thought of on your own. Head First: Very cool. If I could, I’d like to go back to the cards. What exactly do people put on your index cards? Is it just random ideas, or is there some type of template you follow?

Card Sort: Well, I wouldn’t go as far as saying they’re just random ideas. You need to think of my index cards as content chunks–bits of information you want on your site. For example, if someone was building a personal site, their cards might include things like: “jobs,” “hobbies,” “family pictures,” and “vacation.” The cards can also be more detailed with terms like: “soccer,” “Disney World photos,” and “Grandparents.” Head First: So the cards can be specific or more general? Card Sort: Yeah, because some may end up as category headings and some may end up as individual content chunks. The main goal is to get every conceivable content idea out of your head and onto the cards. Head First: Ok, this is making more sense now. One last question about your cards. Are the descriptions really necessary? Card Sort: Not always, but they’re good to have– especially if you have lots of cards. You don’t want to run into a situation where you’re trying to remember what you meant when you wrote down a content chunk. More of the getting your ideas down on paper methodology. Head First: That’s great advice. Well, we’re just about out of time. Thanks for talking to us today, Card Sort. Card Sort: No problem, thanks for having me.

you are here 4   81

creating cards for the sort

Its now time to do a card sort based on Mark’s content. On each of the cards, write down a single chunk of information and a (very) brief description. Try to be as precise as possible. After you’ve filled out a card, set it aside–we’ll come back to these cards in a bit. Continue doing this until you’ve got all of the possible content from Mark’s site written down on the cards. You may need more cards than we provided, so use your own index cards if you need to.

panese culture and also Mark learned a lot about Jaice for others planning a trip compiled a list of travel adv to the country.

Mark bought a rail pass and traveled all over Japan. He visited Tokyo, Hiroshima, Hikone, Kyoto and Yokohama.

82   Chapter 3

Food was on Mark’s mind most of his trip. He brought back menus and took lots of notes about what he ate.

Mark took video with his flip camera and lots of pictures everywhere he went.

organizing your site

Content “chunk” title

a brief Don’t forget to give ow kn u yo description so t exactly what each conten t. “chunk” is abou

Don’t be afraid to make lots of cards. For now, just get all your content down on the cards. you are here 4   83

content cards

Mark had lots of content. Here’s what we came up with. Did you think of anything else?

This could become a blog or might be a good category heading. What trip is complete without lots of images?

Landscape Photos Pictures of cities, mountains and other places in Japan.

Travel Diary Mark’s notes ab out Japan while riding th e bullet train to and from day tr ips.

Restaurant Menus

Video Clips

A collection of menus Mark picked up from various eateries around the country.

Short clips of video Mark took with his digital camera.

Activities You might say Mark ate his way through Japan. Content about food is definitely important to Mark.

Notes about the daily thing s Mark did in Japan.

Tokyo Mark visited the Tokyo Tower and got up early to go to the fish market.

Sushi Mark’s favorite food by-far was sushi. Not es and tips about eating su shi.

This is a more specific card, but sushi was an important part of Mark’s trip.

84   Chapter 3

organizing your site

Since Mark really liked food, we came up with several food-related chunks. That lets us break things up a lot more.

Advice and insight about traveling to Japan.

Food Notes Notes about all the food and restaurants Mark visited.

Travel What it’s like to travel to an d around Japan. Trains, planes, cabs, etc...

Culture

between The difference Japanese American and culture.

Bars and Nightlife

Learning Japanese

A look at the bars and nightlife in and around Tokyo and Kyoto.

Quick Japanese language lessons for new travelers.

People Photos

Hiroshima About the trip to the site of the A-Bomb.

Mark visited some of Japan’s most famous cities. We could probably have a card for each major city.

Pictures of people and friends that Mark met along the way.

It’s okay if your answers are different. We’ll be using these cards in the rest of the chapter, but you’re welcome to use your own, too. you are here 4   85

organizing your cards

Sort your cards into related stacks Once you’ve finished filling out your cards, you need to sort them into groups. The cards in each group should obviously be related–and their grouping should make sense to you. Here’s a little hint: These groups will eventually become sections within Mark’s website.

Culture and language seem to go hand in hand. The two cards should definitely be in the same stack.

Culture een The difference betw nese American and Japa culture.

Learning Japanese Quick Japanese language lessons for new travelers.

These might go well under an “About Japan” category...

Group the cards you made on the previous page into logical groups. Don’t worry if you have leftover cards—we’ll deal with those in a bit.

86   Chapter 3

organizing your site

Give your stacks names that are short and descriptive After you’ve created your groups, it’s time to give each group a name. The name has to be short and descriptive. These descriptions may end up becoming part of your main navigation, so keep them focused on the content, but broad enough to contain the content they describe. Since you’ve already spent some time digging into Mark’s content, try and come up with category headings that are different (and better) that what you came up with earlier in the chapter, back on page 76.

Look at the stacks you made in the previous exercise and come up with short, descriptive titles for each stack. You can use an existing card or make a new one for the description. Write your new cateegory names in the spaces below.

Take a picture of how you organized your cards. You can reference the picture later and still move your cards around into different arrangements. you are here 4   87

choosing category headers

In this exercise, you needed to organize your cards into logical “stacks” and then give each a name that best represents that content. Here’s what we came up with:

Landscape Photos

We like using another color for the categories. You don’t have to do that, but it helps.

Pictures of cities, mountains and other places in Japan. Video Clips Short clips of video Mark took with his digital camera.

Media

People Photos Pictures of people and friends that Mark met along the way.

Food Notes Restaurant Menus A collection of menus Mark picked up from various eateries around the country.

Notes about all the food and restaurants Mark visited.

Food Food

Sushi Mark’s favorite food by-far was sushi. Not es and tips about eating su shi.

This card doesn’t seem to fit anywhere... we’ll come back to it a bit later. 88   Chapter 3

chunks These seem like obvious. Us ers for a media category both would expect to findre. photos and videos he

Seems like we have quite a bit of food-related chunks. This could make for an interesting section of the site.

Activities Notes about the daily thing s Mark did in Japan.

organizing your site

Tokyo Mark visited the Tokyo Tower and got up early to go to the fish market.

Hiroshima

About the trip to the site of the A-Bomb.

Language and culture are a nice fit. Is this enough to justify a whole section, though?

Cities

Culture

Travel What it’s like to travel to and around Japan. Trains, planes, Travel Diarycabs, etc... Mark’s notes ab out Japan while riding th e bullet train to and from day tr ips.

between The difference Japanese American and culture. Lea

rning Japanese

Quick Japanese language lessons for new travelers.

About Japan

Blog / Diary

This might be good for a blog or online diary.

Bars and Nightlife A look at the bars and nightlife in and around Tokyo and Kyoto.

Another orphaned card...

you are here 4   89

orphaned cards Hold on a second. I’ve got a bunch of cards that don’t fit into my groups. What am I supposed to do with these?

Orphaned cards force you to ask yourself: “Is this content really necessary?” In some cases, you’ll find that cards don’t fit anywhere–these are called orphaned cards. You might be wondering whether you’ve done something wrong, but don’t worry. These cards are usually a sign that you are doing something right! Orphaned cards come in two flavors. You can have orphaned cards that didn’t fit into another pile; however, you think that the content is important enough to your site that you create a new group with your single orphaned card. Then there are cards that don’t fit into another pile but are so different from the other cards that you couldn’t come up with a group if you tried (let’s call these the really orphaned cards). Including orphaned content that doesn’t fit into your site’s information architecture always results in confusion for your user. What if, for example, the produce section at your local grocery store had a pile of toasters, a large display of beef jerky, and an entire wall of deodorant? Shoppers would get amazingly confused. We interact with the world around us based on the predictability of things. There is no reason whatsoever for deodorant (or toasters and beef jerky) to go in the produce section. The same holds true for the organization of a website’s information. If random content appears in a section of the site where we never assumed it would be, we’ll be confused–and our experience with the site will be negatively impacted. So, what do you do with orphaned cards? You’ve got two choices. First, you could change the content in such a way that it fits into another one of your groups. However, more often than not, that strategy just isn’t going to work. The other alternative is simply to recognize the fact that the content doesn’t fit into your website and toss it out.

nk about What do you thicards? these orphanedot right Important? N e? Too for Mark’s sit ific? vague? Too spec

90   Chapter 3

Activities

Bars and Nightlife

A look at the bars and Notes about the daily thing s nightlife in and around Tokyo Mark did in Japan. and Kyoto.

organizing your site

Hey, why are we doing the sorting anyway? I thought that the whole point of UserCentered Design is that you don’t design for yourself, you design for your user.

Friends don’t let friends sort alone Up until now, you’ve done the card sort all by your lonesome. But doing a card sort by yourself is not the (only) way to do things. Why? Well there’s one really good reason: You aren’t designing for yourself, you’re designing for your audience! And if you aren’t designing for yourself, why would you do a card sort by yourself ? Ideally, you want to run the exact same card sort with the exact same cards–but have someone else sort the cards. Try to choose someone from your target audience. If for some reason you can’t find someone from your target audience, enlist someone else to help. At the very least, they will give you a second opinion on your site’s information structure.

Ask a friend to sort the cards you created. Give them a very basic introduction to Mark’s site (careful, don’t try to influence them to choose one particular information structure), and let them organize your cards. Did they do the sort the same way you did? What different decisions did they make? Ask why! The ultimate goal is to come up with an information architecture for Mark’s site that will not only meet the needs of the site (and Mark), but those of the user as well. Write at least three things you learned from your friend’s card sort below.

Get your camera out again! Now you should have two pictures of two totally different organizations of Mark’s content. you are here 4   91

arranging your cards

Let’s see how our friend sorted the cards for Marks site:

The “Media” stack was the same.

Media

Menus

People Photos

Food Notes

Landscape Video Clips Photos

Culture

About Japan

Our friend added “Bars and Nightlife” to the Food stack.

Tokyo Travel Places “Travel” was lumped with the two cities. This makes sense and might make for a better overall category.

Activities

Which card sort is right? Getting a second opinion on your sorts is important and often results in organization that you may not have initially thought of. But how do you know which one is better or which one deserves more weight? Well, it depends. If five of your friends do the sort and all come up with similar results, you can bet that’s probably the best way to organize things. However, you’re the web designer. Sometimes having two or three options and just tweaking your original sort is all you need. Make sure that when you’re done, though, you feel good about the organization you’ve come up with. You (and Mark!) are going to have to live with it for a long time.

92   Chapter 3

Sushi Bars & Nightlife

Hiroshima

Language Our friend agrees that “Culture” and “Language” seem like a good fit together.

Food

Diary “Diary” and “Activities” were orphaned.

organizing your site

Arrange your cards into a site hierarchy Once you’re happy with your card stacks and titles, you need to put some structure in place. Lay your cards out like a site map. Just take a bunch of your leftover 3x5 cards and write the group names that you came up with. Spread those out on the table that you’ve been using. Then, line up each “content” card below the appropriate “section” card.

ur These cards are yo es). tl ti stack names (or

Create a new card that can act as an overall title.

Keep Mark’s storyboard around for reference. It should help you focus on the site’s overall theme.

Now just arrang the cards in youre stack underneath the title card.

Once you’ve gone through a few iterations of your sort and had a friend or two try it out, arrange your cards as an IA diagram and take another picture.

you are here 4   93

card sort organization

After considering the sorts our friends did and rethinking our original card sort, we came up with a final sort layout like this:

We removed the descriptions so everything could fit on the page...

A potential title for Mark’s site

Mark in Japan

Media

Food

Travel Notes

Blog

About Japan

Landscape Photos

Food Notes

Tokyo

Travel Diary

Culture

People Photos

Restaurant Menus

Hiroshima

Video Clips

Sushi

The photos and videos definitely belong under “Media.”

94   Chapter 3

Bars & Nightlife We added “Bars and Nightlife” to the food category because it kept coming up when our friends did the sort.

Mark’s travel diary will work perfectly as a blog.

We kept the cities in their own column but changed the heading to “Travel Notes” to better represent the results of our card sort.

Language

All of our friends pu and language in the satmeculture category. These are good chunks for a section ab general information abouout Japan. This is also a placet where Mark can add content if he wants toex.tra

organizing your site

IA diagrams are just card sorts on paper An IA diagram is a lot like the “on the table” site map you created (and photographed) in the last exercise, but it’s also a lot more. An IA diagram not only shows the organization of your site’s content, but it shows the hierarchical relationship between sections and subsections of that content. The good news is, because you already took the time and did a few card sorts, most of your work is done!

Mark in Japan

Food

Media

Photos

Video

Landscape Photos

Video Clips

People Photos

Travel Notes

Tokyo

We split the media into two sections and placed the appropriate content under each. Cool. So all the lines are just links, right? Like a site map?

ark’s Here’s a portion of Mou e IA. It looks a lot lik arre card sort, but there a few differences.

The rest of Mark’s content would be over here...

Think of an IA diagram as the final draft of your card sort. Categories are broken down more, and headings are organized by importance.

When you make your final IA diagram, make sure you order your main headings by importance. The most prominent items should appear higher up in your IA. you are here 4   95

IA diagrams are not sitemaps

IA diagrams are NOT just links between pages IA diagrams are not about links—they’re all about the hierarchical relationship between sections and subsections of content. If you were to try to create a diagram that showed links between sections, you would end up with a useless, spaghetti-looking mess that wouldn’t give you any kind of information whatsoever about this vital hierarchical relationship between the site’s content. Think about it like this... most sites have links all over the place, cutting across categories and site sections. That would make for a pretty messy IA!

If IA were about links...

Mark in Japan

The index page would link to every main page on the site.

Media

Food

Travel Notes

Blog

Video Clips

Menus

Tokyo

Travel Diary

People Photos

Sushi

Hiroshima

Landscape Photos Photos and video might be linked from all over Mark’s site.

The blog may have links to travel notes and media.

Food pages may link to specific cities in which Mark visited the particular restaurant.

Geek Bits

There are lots of flowcharting programs out there that can help you create a slick and professional looking IA diagram. On the Windows side of things, Visio is a good choice (though on the expensive side). On the Mac side of things, OmniGraffle is a great choice.

96   Chapter 3

organizing your site

Don’t forget to add a title to your IA diagram.

Culture

Add content chunks from your card sort–but be more detailed. Don’t be afraid to add extra subcategories to better organize Mark’s content.

About Japan

Based on your card sort, build an IA diagram of Mark’s site. Remember, you aren’t showing links between pages, you’re showing the hierarchical relationship between sections and subsections.

your Sometimes you’ll change . IA g rin card sort a bit du out a good ab That’s okay... it’s t avoiding site organization, no nal ideas. changes to your origi

you are here 4   97

finalizing your IA

98   Chapter 3

Video Clips

Videos

People Photos Sushi Hiroshima

Language Landscape Photos Restaurant Menus

“Media” is the most obvious category to separate. Splitting video and photos will bring more organization to the media section.

Tokyo

Culture Images Food Notes Cities Travel Diary

Media Food Blog

Mark in Japan

Always give your IA diagrams titles.

Travel Notes

About Japan

Your job was to to build an IA diagram based on your card sorts. Here’s what we came up with:

We grouped “Tokyo” and “Hiroshima” under cities, and put them all under “Travel Notes.” This gives Mark room to add more notes on different topics if he wishes.

The blog should be the first link on the site. This is where most of the new content will show up and it even could become part of the index page.

organizing your site

Q: A:

Q: A:

Q:

Q: A:

Is all this work really needed just to come up with some navigation categories?

Well, it is if you want to do it properly. Some sort of thought needs to go into the design of your content and navigation. Hastily designed IA can have a disastrous effect on the success of a website. Even if you do shortened, “quickie” versions of card sorting and IA diagramming, your outcome is likely to be better than if you did nothing at all.

sort?

A:

What if I just want to skip right to the IA and not do a card

That’s better than nothing, but you will really have no way of sifting through and auditing your content. The reason a card sort is so important is that is helps you get rid of content that is irrelevant and makes you think about how all those content chunks relate to each other. IA diagrams can help with this, but they aren’t as thorough as a card sort.

If IA diagrams don’t show link relationships, what does?

Most of the time, a site map is the best way to show what links are available on a site. The problem with this is that a site map can’t really be made until the site is finished. During pre-production, your focus should be on organizing content and not building links. That work will come when you start to build out pages. Do all websites go through this same process?

Actually, most probably don’t–and that’s why so many sites on the Internet are so difficult to use. In so many cases, IA and content organization are a design afterthought, leading to unusable websites and content that’s difficult to find. Skipping pre-production will only lead to frustrated users and dwindling hits.

Q:

How does a site’s theme relate to information architecture?

A:

IA actually directly relates to your site’s theme. The content of your site is what drives the overall theme, and the organization of that content is important. If the IA is bad or focus is put on the wrong content, it will not only confuse users, but your theme won’t come across either.

you are here 4   99

moving to production

Move from pre-production to production Coming up with an IA diagram and doing all those card sorts may have seemed like a lot of work for a simple navigation. Mark will love you, though, especially when his users are easily navigating his site and finding all his content without any problems. And now we’ve got a well-organized IA, a storyboard Mark likes, and a clear idea where we want to take the site. Let’s lay down some markup and style!

Mark in Japan

Blog

Travel Notes

Food

Media

About Japan

Travel Diary

Cities

Food Notes

Images

Culture

Tokyo

Restaurant Menus

Landscape Photos

Hiroshima

Sushi

People Photos Videos

Video Clips

100   Chapter 3

Language

organizing your site

Build Mark’s site structure This folder will hold all the images needed to make our layout work. /markinjapan

This folder will hold all the files for Mark’s site.

/images

Below the links to the JavaScript files

is a small bit of code that readies the Facebox JavaScript to act when a link with the proper rel attribute is clicked. the linked The Facebox code then takes over and uses page . the on ct files and CSS to render the effe

390   Chapter 10

evolutionary design

4

 sing this example above as a guide, add the Facebox effect to the rest of the list U items in the portfolio. Remember to link the thumbnails to their full-size versions and provide the proper rel attribute to the link.

Add links to the portfolio images that point to a larger version of the same file. This larger image will be displayed in the lightbox.

The rel attribute describes the relationship of a link to the current page. Here it's used to tel the Facebox JavaScript when a l particular link is clicked.



Make sure you fully enclose the existing tags in the tags. Basically, think of the image as if it were text inside the link tag.

Geek Bits The rel attribute is used to describe the relationship between two resources. In the lightbox case, the link relationship is to the lightbox effect. This is purely a semantic relationship, but other resources (like JavaScript) can use that attribute to treat those links differently then a normal site link.

you are here 4   391

try out the lightbox

Let’s take a look at what our portfolio markup needs to look like for the lightbox effect to work properly:



in the Images aren’t the only thing that can appearplet e HTML lightbox. Text content within a tag or com box. documents can also be displayed through the light

Each link needs to have the rel=“facebox” attribute for the effect to work properly. Without that bit of code, the JavaScript wouldn’t know to execute.

Test Drive Give it a shot. Add all the images and files to your own file structure and load up the page in a browser. How does it look? Try another browser. Does it work the same way?

392   Chapter 10

evolutionary design

Q:

You mentioned JavaScript might not be fully compatible with some browsers. What will happen if a user’s browser doesn’t support it?

A:

That’s right. Not all browsers support JavaScript. If that happens, since you added a link to the larger image, instead of displaying in the center of the existing page, the browser may still take a shot at displaying the linked image in a new blank page. Users would need to use their browser’s back button to get back, but they may still be able to see the larger image.

Q:

So if I can put text in a lightbox too, wouldn’t users miss out on that if their browser doesn’t support JavaScript?

A:

It’s the same deal. Different browsers handle JavaScript differently, and as you can never be sure what level of support your users’ browsers will have, this is another good reason to use JavaScript sparingly. If you’re going to use it, make sure the content that it displays isn’t crucial to your users’ understanding of the site and its content.

Q:

Hmm. Would Flash be a better option for adding interactivity?

A:

It depends on what you’re trying to achieve. If you want rich, animated, multimedia sections, Flash is a good bet, but here we’re just showing a larger version of an image. Of course Flash has its own set of limitations (browsers need plugins, not all content is 100% accessible, and so on), so if you’ve got a site that’s mostly contentbased, it’s best to stick with HTML and CSS for the main presentation and add touches of interactivity here and there with JavaScript or Flash.

Those lightboxes look great, but... I don’t know, are they going to keep people coming back to the site regularly? I know our designs are awesome, but I doubt users will be hitting F5 waiting for us to post the next one... Any ideas?

What do you think? How else could we add new content to Red Lantern to keep users coming back over and over?

you are here 4   393

fresh content with blogs

Hmm. The JavaScript stuff looks cool, but it’s a onetime thing. How about a blog to keep users coming back?

Keep your content fresh with a blog. Blogs have become a powerful tool for creating two‑way communication with your users. You posting entries, and your users have the opportunity to comment on your posts and each other’s comments. A blog is a relatively easy way to add a constant stream of content to your site—which means that your site will always look fresh and give users a reason to come back. Blogs also give your site a “voice.” Instead of your site being somewhat anonymous, you can speak through your blog posts and reach out to other people.



If you’re going to start a blog, make absolutely sure that you’ve got the time to post regularly.

There’s nothing worse than your users coming to your site, only to find that the blog hasn’t been updated for 6 months. The only way to attract readers is to give them something new and interesting to read on a fairly regular basis.

394   Chapter 10

evolutionary design

Adding blog functionality with WordPress Jane agrees. She thinks it would be a great idea for the new version of the Red Lantern site to have a blog. That way you guys can write design articles, post news about Red Lantern, and generally have a better avenue of communication with your users. Jane’s done some research and wants to use WordPress (http://wordpress.org). Why? Well, there are a bunch of reasons:

ƒƒ WordPress is open source–which means there are thousands (perhaps even tens of thousands) of developers around the world contributing their efforts to make it better with every version. ƒƒ WordPress only requires PHP and MySQL to run. (Don’t worry, we’ll talk you through it if those terms sound a little scary.) ƒƒ WordPress has an incredibly easy (and legendary) 5 minute install process. ƒƒ WordPress features a very simple templating system that lets you change the look of your blog with a click of a button. More importantly, it’s really easy to develop your own templates (called “Themes” in WordPress speak). They’re all written using CSS... so if you happen to already have a site and want your WordPress blog to look just like it, it’s just a matter of adapting the existing CSS. ƒƒ Best of all, WordPress is free!

with This is default “Kubrick” theme that ships all WordPress and is designed to work with of the special features of WordPress. you are here 4   395

install wordpress

Add a WordPress blog to the Red Lantern site To get Red Lantern’s blog up and running, you need to download WordPress and get it set up on the server. You can download the WordPress files from: http://wordpress.org/download/

/redlantern

Download WordPress from http://wordpress.org and put a copy into the main site directory of Red Lantern.

/blog Rename the folder “blog” so that you can access it at: http://redlanterndesign/blog

Copy all the downloaded files from the WordPress folder to the /blog folder.

Geek Bits WordPress requires a server with PHP and MySQL (an open source relational database) to operate properly. If you don’t have access to a server or hosting plan (most web hosts fully support WordPress), check out this site and learn how to run WordPress locally on your PC or Mac using XAMPP, an installable set of software that gives you a working web server on your desktop.

http://www.apachefriends.org/en/xampp.html

396   Chapter 10

evolutionary design

Complete the WordPress installation and get the Red Lantern blog up and running.

You’ll have to rename wp-config-sample.php to the following: 1

 dit and rename the wp-config.php file so that the parameters match E the ones from your own setup. // ** MySQL settings ** // define('DB_NAME', 'putyourdbnamehere'); define('DB_USER', 'usernamehere');

// The name of the database

// Your MySQL username

define('DB_PASSWORD', 'yourpasswordhere'); // ...and password define('DB_HOST', 'localhost'); define('DB_CHARSET', 'utf8'); define('DB_COLLATE', '');

2

// 99% chance you won't need to change this value

These four database parameters are needed so that WordPress can build the database tables that will hold the blog data.

Following the installer, get the basic blog up and running on your local machine or server. Remember, we want to access WordPress at /blog.

Follow the WordPress installer to get the Red Lantern blog up and running.

you are here 4   397

blog tells it like it is

Blog Exposed This week’s interview:

Getting to know the Blog

Head First: Welcome, Blog, it’s good have you here. To start off, I’ve got to ask, what’s with the name? Blog? Sounds like the sound a dog makes when it’s throwing up! Blog: Really? Is that how this interview is going to go? Ok, I’ll bite. The name “Blog” is a shortened version of “weblog,” which is a combination of the words “web” and “log.” Basically, back in the day when blogs first started out, they were just a log of what people were doing on the Web (cool sites they’d visited, funny photos, yadda, yadda)—hence the name weblog (and then blog). Head First: Sorry, maybe that wasn’t the best way to phrase the first question. You’ve certainly come a long way from those early days haven’t you? Blog: You bet! Blogs have become a really powerful tool for communicating on the Web. You see blogs everywhere—from personal sites to big corporate sites. Everyone has jumped on the bandwagon! Head First: Really? That many people have blogs? Blog: Yeah, we’re talking millions, and millions, and... well, you get the idea. Head First: Wow. That’s a lot of people blogging. If there are that many people using blogs out there, it must be super duper easy to set them up? Blog: Well, yes... and no. Head First: Yes and no? What kind of answer is that? Blog: It’s complicated. Head First: Enlighten us, that’s what you’re for, right?

398   Chapter 10

Blog: The technology behind blogs can be pretty complicated. They are dynamic web applications that store stuff (posts, comments, etc.) in a database on the server and use a server-side language (like PHP) to pull stuff out of that database and put it on the actual site. The good thing is that blogs have become so popular, there are lots of accessible solutions for a wide variety of people with a wide variety of tech savvy. Head First: Ok, that sounds good–can you talk about some of these solutions? Blog: Well, blogs generally fall into two categories: hosted and installed. Hosted blog systems are created, administered, and maintained by a third party (usually administered by the user through an easy-to-use online interface). Because the service lives on the host’s server, you don’t have to deal with installation or server configuration yourself. There are free hosted blog services (like blogger) and paid hosted services (like movable type). Head First: Ok, I get hosted blogs... what about installed blogs? Blog: Installed blog systems are basically software that you install on your own web server that run the blog. They can be more complicated than hosted solutions–especially for people who don’t have access to a server (or any server experience). The good news is that there are a handful of installed blog systems out there (namely WordPress) that make it about as easy as it can get. Head First: Wow, I never knew that there was so much to know about blogs. Thanks for stopping by!

evolutionary design

Test Drive Take a look at what the blog looks like after you complete the WordPress installation.

This is what will appear at the /blog/ URL.

Hey, Hot Shot, I hate to rain on your parade, but this blog doesn’t look very red to me...

WordPress installs a “Welcome” post so that something displays on the blog’s home page. You can remove it when you start blogging.

The sidebar will show links to pages, archives, links and categories within the blog.

you are here 4   399

wordpress themes

Change the look and feel of your blog with themes Themes for WordPress allow you to change the design of your site by uploading new designs for use in the software. The themes are a collection of files in a directory that hold the PHP code, markup, style and images of the new design. Once uploaded, you can activate a new theme from the WordPress admin panel.

The WordPress theme site

/blog This is the main blog folder that holds all the WordPress files and folders.

Put all themes in the /themes directory.

/wp-content

Once you upload the theme, it can be activated on the Design menu in the admin panel.

/themes

Geek Bits You can build your own themes for WordPress so that they better match the rest of your site. Check out this tutorial to get you started on building themes: http://codex.wordpress.org/Theme_Development

400   Chapter 10

evolutionary design

A design update and some tweaking of images and CSS.

Wow, this looks great. I think our users will be really pleased with what we’ve done. I’m looking forward to their blog comments.

The lightbox effect with Facebox

The freshly-installed WordPress blog

you are here 4   401

tools for your toolbox

CHAPTER 10

Your Web Design Toolbox You’ve got Chapter 10 under your belt, and you’ve added some fresh content to your home page.

ƒƒ Your personal site is your best PR tool. ƒƒ It’s important that your site always represents your best and most progressive work. ƒƒ Fresh content will send a positive message to your users and keep them coming back. ƒƒ A website should evolve (change incrementally) instead of changing radically all the time. ƒƒ JQuery is a library of pre-written JavaScript functions and controls that are put in a directory on your server and then called from within your markup. ƒƒ A lightbox is a page effect that displays images or other HTML content in a floating frame in the center of your page’s layout.

402   Chapter 10

ƒƒ A blog provides you with a way to keep your content fresh and updated, as well as create a direct line of conversation with your users. ƒƒ Hosted blog systems are created, administered, and maintained by a third party (usually administered by the user through an easy to use online interface). ƒƒ Installed blogs are made possible by software you install on your web server—they require a database of some sort (like mySQL) and support for a server-side language (like PHP).

11 the business of web design

Mind Your Own Business I can’t even afford a pair of pants since my design got ripped off by a rival web design firm.

Business in a web design book? Are you kidding me? You’ve mastered pre-production, information architecture, navigation, color, and even accessibility. What’s left in your path to web design mastery? Well, you’re going to have to tackle the business issues of web design. You don’t need a Harvard MBA, but you better know more than just where you deposit your check... or those checks may stop coming. Let’s look at establishing good client relationships and understanding your intellectual property rights. The result? Increased profits and protection for your hard work.

this is a new chapter   403

foo bar

The newest potential client: the Foo Bar Jane at Red Lantern just got wind of a big potential client: the Foo Bar, a popular restaurant that needs an online presence. After all the work you did for Jane with Red Lantern, she’d like you to take on the work. She’s willing to pay you well and give you a stake in her company if you can get the Foo Bar gig.

could pass aurp? o h w . .. y sl u io Ser ed the Foo B a client nam

The Foo Bar Steakhouse and Saloon I don’t like doing work on spec, but I think this job’s in the bag... bring us this client, okay?

404   Chapter 11

the business of web design

What Foo Bar wants in a bid: 1

 basic HTML mockup of one page of the site, showing off A the site’s overall look, feel, and layout.

2

A color scheme for the site, including which design elements would have what color, represented in the HTML mockup.

3

 few succinct ideas for branding and logos that would fit in A with the Foo Bar’s new online presence.

A quick sketch by the owner

Here are some colors inspired by the building and bar.

The Foo Bar owner

Spec work refers to doing a lot of work before getting paid. In this case, the Foo Bar owner wants a site mockup to look at before he commits to your work and Red Lantern design. Why do you think Jane doesn’t usually do spec work?

you are here 4   405

quick code for foo bar

Let’s build a quick mockup for the Foo Bar By now, putting together a mockup should be a piece of cake. Let’s look at some XHTML for a simple version of the Foo Bar: The Foo Bar

Welcome to The Foo Bar. Cold Beer Served Daily.

foo bar storefront

Get to the Foo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. Sed ac mauris eget eros vestibulum luctus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. Sed ac mauris eget eros vestibulum luctus.

Subscribe

© Copyright 2013 - 2019 AZDOC.PL All rights reserved.