Scribd
Upload
125 views43 pages

First Things First: Ia and Css

This document discusses how advances in web development have enabled information architecture (IA) to be modernized. It proposes five ways for IA to evolve: 1) Using CSS-compatible naming conventions, 2) Identifying content and header hierarchies, 3) Cataloging similarities and relationships, 4) Defining explicit HTML markup, and 5) Designing additional semantics. These changes allow for improved collaboration between IA and web development, enabling a more efficient design and development process.

Uploaded by

raj4raj
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
125 views43 pages

First Things First: Ia and Css

This document discusses how advances in web development have enabled information architecture (IA) to be modernized. It proposes five ways for IA to evolve: 1) Using CSS-compatible naming conventions, 2) Identifying content and header hierarchies, 3) Cataloging similarities and relationships, 4) Defining explicit HTML markup, and 5) Designing additional semantics. These changes allow for improved collaboration between IA and web development, enabling a more efficient design and development process.

Uploaded by

raj4raj
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 43

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
 SeniorWeb Developer
 Yahoo!, Inc
Background & Context
 An IA and a Webdev both arrived at
this conclusion
 Need is pressing in big companies
like Yahoo!
 Internalneed 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
 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
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
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
communica
ting
hierarchy
and
relationship
 But still not
communica
ting the
modern
info that
today’s
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
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,
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
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
#logoBr an din g #bran di ng #s econd ary Cont ent

#content

#ma in Nav

#s ubN av
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
.headlin
e

.noPri
nt
#frontPage
.headline

#currentIssue
.headline
New additions  Explicit
Markup
Use Unordered (UL) instead
of Ordered lists (OL) for the
#deals list because they
rotate randomly and aren’t
sold per placements
New additions  Granted
Semantics
For the navigation, use
“.current” to indicate
which section we’re in

Use “.featured” for the


highlighted deal

For the list of dates on


this schedule, use
“.current”, “.past” and
“.upcoming” classes as
appropriate
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
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
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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy