First Things First:
IA and CSS

Due to advances in web development technologies, we must reexamine and modernize the practice of information architecture.

Presented by

Christina Wodtke

Information Architect

Elegant Hack; Boxes and Arrows

Author, Information Architecture: Blueprints for the Web

Nate Koechley

Senior Web Developer

Yahoo!, Inc

Background & Context

An IA and a Webdev both arrived at this conclusion

Need is pressing in big companies like Yahoo!

Internal need for speed and efficiency

Discreet teams and specializations

Makes sense for individuals too

Probably already doing it…

Where We’ve Been

Web Development

Meaningless Translations

Tag soup is bad. Semantic HTML has been used for presentation, presentational HTML has been used for meaning. To get by, we’ve been translating designs into a rats nest of meaningless markup.

All relationships, precise specifications, and semantic meaning are lost in this destructive translation process.

Abusing, Hacking and Confusing HTML

Aggressive optimization makes documents unreadable

Abusing, Hacking and Confusing HTML

Aggressive optimization makes documents unreadable

Pixel-Precise, “Canvas Based” Design

Locks content into single device / purpose / visualization

Abusing, Hacking and Confusing HTML

Aggressive optimization makes documents unreadable

Pixel-Precise, “Canvas Based” Design

Locks content into single device / purpose / visualization

Results in a relatively useless and unimportant specialization.

Web Dev’s make it work, but don’t add understanding or even preserve meaning

Pointless Collaboration

Since

Webdev’s and IA’s were not neighbors in the process

Webdev’s work was mysterious alchemy

Webdev’s work carried/preserved no IA meaning

There hasn’t been a pressing need for collaborative deliverables or coordinated/co-informed work

Until now…

Where We Are

Web Development

Standards-Based Web Development

Separation of Structure, Presentation and Behavior

“Layered Semantic Markup” with “Graded Browser Support”

Progressive Enhancement – build upon meaningful roots (Champeon and Finck)

Semantics now play central and crucial role, allowing HTML to be explicit and relational

It’s now possible for context, meaning and intent to survive the entire development process

Modular Development

Rich Meaning Within Each Module

Answered the Call

We have answered the call to “properly separate the components [so we can] enable different strategies”

There are now multiple components and layers, yet certain [semantic] information persists.

Persistent elements should be identified as early as possible in the process

Enter: Information Architecture…

Where We’ve Been

Information Architecture

Site Maps

Wireframes

Good, but not quite right…

Too precise for Visual Designers

Communicate / influence decisions that Visual Designers are tasked with.

Too vague for Web Developers

Don’t effectively specify hierarchy, semantics, grouping or relationships.

Dan Brown’s Wireframes – Getting Close!

Much better at communicating hierarchy and relationship

But still not communicating the modern info that today’s Web Developers need!

We’ve We’re Going…

Information Architecture

Five new things for Information Architecture

Make all references CSS compatible

Identify hierarchies

Catalog similarities and relationships

Define explicit markup

Design additional semantics

1) Make all references CSS compatible

Pages, containers, widgets and content should be referenced with smart, CSS-compatible names.

WD: Use in the structure, presentation and behavior

All: Reference throughout progress tracking, QA testing, customer care, and more…

Therefore, IAs should identify and use them on sitemaps, content inventories, wireframes, and functional specs,…

1 à Incompatibility is inefficient

References like “10.1.7” or “account registration page”, since it can’t be sustained, are inefficient and result in detrimental translation

If you’re making up a name, make it something we can all use

1 à Compatible names are:

A single word

Consider CamelCase for legibility

AccountRegistationPage instead of accountregistrationpage

About the content

About meaning, not presentation or placement

“promoHeader” not “rightsideBlueHeader”

May not begin with a numeral

CSS technical constraint

“teaser3” not “3teaser”

2) Identify hierarchies (two types)

Define the Source Order

In what order is the pure content (without its presentation)?

Think about how it will be read without presentation. You have to think: How is a person moving thru this page? What’s the task analysis of the page? How should it look on my cell phone or sound in my screen reader?

Define the order of Headers (h1, h2,…h6)

(Don’t need to be in order in the source, nor sequential)

2 àSometimes this uncovers issues

What are there two H1 tags that say the same thing?

3) Catalog similarities and relationships

What can be reused? What characteristics are shared?

Each container is unique (News before Marketplace)

Yet each are similar, because they’re all module headers

Another tool to articulate meaning; currently Webdev task

3 à Relationships

The life of a scoreboard

#nba .scoreboard, #nfl .scoreboard,

#nhl .scoreboard

We can target things on the page not just thru uniqueness and classification, but also thru relationship.

Also consider medium and device

Which class of things stay for the Print version?

4) Define explicit markup

Don’t be afraid… only about 30 tags

Markup is just a way to explicitly define content

Lists: UL, OL, DL

Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, & ACRONYM

Forms: Radio button or Checkbox

Headers: H1…H6

5) Design additional semantics

Squeezing semantic meaning from HTML is a good start, but a richer vocabulary is useful.

Content types and meta info

HTML’s cite tag only gets us so far, we need “author”, “publisher”, “date”, “source”

States (for navigation)

selected, default, disabled, active

Position (within lists)

first, last

Relationships

parent, child, sibling

“glue” (from Movable Type)

Consistent use “grants” semantic meaning

XML still isn’t primetime; it must be represented in HTML

So what does this mean: Wireframes

New additions à Compatible Names

New additions à Hierarchies

Branding (#branding)

Logo (#logo)

“You are here” (#place)

Main Navigation (#mainNav)

Minor Navigation (#subNav)

Primary Content (#content)

Secondary Content (#sub content)

New additions à Similarities & Relationships

New additions à Explicit Markup

New additions à Granted Semantics

Not scary, it’s simple

Basic HTML representing basic IA work identifying priority, classification and meaning.

A New Process

Can these advances enable an improved design and development process?

Lost in Translation…

What is the future of the web?

網の未来は何であるか à Is future of the net what?

未来是网什么? à What future will be net?

그물은 무슨 미래 것인가? àThe net future will connect?

Le futur net se reliera ? àThe future Net will be connected?

Das zukünftige Netz angeschlossen? à The future net is attached?

La rete futura è fissata? à The future net is fixed?

Waterfall Process

Silo’d teams

4 vertical phases, most of any process

Costly feedback loops and sluggish iterations

Sluggish iterations

He said—she said

Better Process

More efficient (only 3 vertical phases)

Seperation of Content and Presentation

Allows direct communication and appropriatly concurrent work.

Short and appropriate feedback loops

Ideal Process?

Most efficient: 3 vertical phases; only 4 actual stages

Cleanest feedback loops

Clearest communication with least waste

Keep the end in mind when you begin

Documents what’s real

Always current, always used

Conclusion

Conclusion

Technical hurdles have been removed, meaning can thrive.

Due to advances in web development technologies we can modernize the practice of information architecture.

These advances enable an improved process.

This is our Web Vision.

Thanks!

Christina Wodtke

cwodtke@eleganthack.com

http://eleganthack.com/blog/

Nate Koechley

natek@yahoo-inc.com

natek.typepad.com


	Due to advances in web development technologies, we must reexamine and modernize the practice of information architecture.


	Christina Wodtke
		Information Architect
		Elegant Hack; Boxes and Arrows
		Author, Information Architecture: Blueprints for the Web
	Nate Koechley
		Senior Web Developer
		Yahoo!, Inc


	An IA and a Webdev both arrived at this conclusion
	Need is pressing in big companies like Yahoo!
		Internal need for speed and efficiency
		Discreet teams and specializations
	Makes sense for individuals too
		Probably already doing it…


	Tag soup is bad. Semantic HTML has been used for presentation, presentational HTML has been used for meaning. To get by, we’ve been translating designs into a rats nest of meaningless markup.
	All relationships, precise specifications, and semantic meaning are lost in this destructive translation process.


	Aggressive optimization makes documents unreadable
	Pixel-Precise, “Canvas Based” Design
		Locks content into single device / purpose / visualization


	Since
		Webdev’s and IA’s were not neighbors in the process
		Webdev’s work was mysterious alchemy
		Webdev’s work carried/preserved no IA meaning
	There hasn’t been a pressing need for collaborative deliverables or coordinated/co-informed work
	Until now…


	Separation of Structure, Presentation and Behavior
	“Layered Semantic Markup” with “Graded Browser Support”
	Progressive Enhancement – build upon meaningful roots (Champeon and Finck)
	Semantics now play central and crucial role, allowing HTML to be explicit and relational
	It’s now possible for context, meaning and intent to survive the entire development process


	We have answered the call to “properly separate the components [so we can] enable different strategies”
	There are now multiple components and layers, yet certain [semantic] information persists.
	Persistent elements should be identified as early as possible in the process
	Enter: Information Architecture…


	Too precise for Visual Designers
		Communicate / influence decisions that Visual Designers are tasked with.
	Too vague for Web Developers
		Don’t effectively specify hierarchy, semantics, grouping or relationships.


	Much better at communicating hierarchy and relationship
	But still not communicating the modern info that today’s Web Developers need!


	Make all references CSS compatible
	Identify hierarchies
	Catalog similarities and relationships
	Define explicit markup
	Design additional semantics


	Pages, containers, widgets and content should be referenced with smart, CSS-compatible names.
		WD: Use in the structure, presentation and behavior
		All: Reference throughout progress tracking, QA testing, customer care, and more…
	Therefore, IAs should identify and use them on sitemaps, content inventories, wireframes, and functional specs,…


	References like “10.1.7” or “account registration page”, since it can’t be sustained, are inefficient and result in detrimental translation
	If you’re making up a name, make it something we can all use


A single word
	Consider CamelCase for legibility
		AccountRegistationPage instead of accountregistrationpage
About the content
	About meaning, not presentation or placement
		“promoHeader” not “rightsideBlueHeader”
May not begin with a numeral
	CSS technical constraint
		“teaser3” not “3teaser”


Define the Source Order
	In what order is the pure content (without its presentation)?
		Think about how it will be read without presentation. You have to think: How is a person moving thru this page? What’s the task analysis of the page? How should it look on my cell phone or sound in my screen reader?
Define the order of Headers (h1, h2,…h6)
	(Don’t need to be in order in the source, nor sequential)


	What can be reused? What characteristics are shared?
		Each container is unique (News before Marketplace)
		Yet each are similar, because they’re all module headers
		Another tool to articulate meaning; currently Webdev task


	The life of a scoreboard
		#nba .scoreboard, #nfl .scoreboard,
		#nhl .scoreboard
	We can target things on the page not just thru uniqueness and classification, but also thru relationship.
	Also consider medium and device
		Which class of things stay for the Print version?


	Don’t be afraid… only about 30 tags
	Markup is just a way to explicitly define content
		Lists: UL, OL, DL
		Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, & ACRONYM
		Forms: Radio button or Checkbox
		Headers: H1…H6


Squeezing semantic meaning from HTML is a good start, but a richer vocabulary is useful.
	Content types and meta info
		HTML’s cite tag only gets us so far, we need “author”, “publisher”, “date”, “source”
	States (for navigation)
		selected, default, disabled, active
	Position (within lists)
		first, last
	Relationships
		parent, child, sibling
	“glue” (from Movable Type)
Consistent use “grants” semantic meaning
XML still isn’t primetime; it must be represented in HTML


	Branding (#branding)
		Logo (#logo)
		“You are here” (#place)
	Main Navigation (#mainNav)
		Minor Navigation (#subNav)
	Primary Content (#content)
		Secondary Content (#sub content)


	Basic HTML representing basic IA work identifying priority, classification and meaning.


	Can these advances enable an improved design and development process?


	What is the future of the web?
	網の未来は何であるか à Is future of the net what?
	未来是网什么? à What future will be net?
	그물은 무슨 미래 것인가? àThe net future will connect?
	Le futur net se reliera ? àThe future Net will be connected?
	Das zukünftige Netz angeschlossen? à The future net is attached?
	La rete futura è fissata? à The future net is fixed?


	Silo’d teams
	4 vertical phases, most of any process
	Costly feedback loops and sluggish iterations
	Sluggish iterations
	He said—she said


	More efficient (only 3 vertical phases)
	Seperation of Content and Presentation
	Allows direct communication and appropriatly concurrent work.
	Short and appropriate feedback loops


	Most efficient: 3 vertical phases; only 4 actual stages
	Cleanest feedback loops
	Clearest communication with least waste
	Keep the end in mind when you begin
	Documents what’s real
	Always current, always used


	Technical hurdles have been removed, meaning can thrive.
	Due to advances in web development technologies we can modernize the practice of information architecture.
	These advances enable an improved process.
	This is our Web Vision.


	Christina Wodtke
		cwodtke@eleganthack.com
		http://eleganthack.com/blog/
	Nate Koechley
		natek@yahoo-inc.com
		natek.typepad.com