Hide Notes 

Slide 1: First Things First:  IA and CSS Due to advances in web development  technologies, we must reexamine and  modernize the practice of information  architecture.
Slide 2: Presented by  Christina Wodtke  Information Architect  Elegant Hack; Boxes and Arrows  Nate Koechley  Yahoo!, Inc  Author, Information Architecture: Blueprints for the Web  Senior Web Developer    
Slide 3: 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  Probably already doing it…  Makes sense for individuals too     
Slide 4: Where We’ve Been Web Development
Slide 5: 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.    
Slide 6: Abusing, Hacking and Confusing HTML    Aggressive optimization makes documents unreadable Pixel­Precise, “Canvas Based” Design Results in a relatively useless and unimportant  specialization. preserve meaning  Locks content into single device / purpose / visualization  Web Dev’s make it work, but don’t add understanding or even     
Slide 7: 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…     
Slide 8: Where We Are Web Development
Slide 9: 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    
Slide 10: Modular Development    
Slide 11: Rich Meaning Within Each Module     
Slide 12: 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…    
Slide 13: Where We’ve Been Information Architecture
Slide 14: Site Maps    
Slide 15: Wireframes    
Slide 16: Good, but not quite right…  Too precise for Visual Designers Too vague for Web Developers or relationships.  Designers are tasked with.  Communicate / influence decisions that Visual    Don’t effectively specify hierarchy, semantics, grouping     
Slide 17: 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!    
Slide 18: We’ve We’re Going… Information Architecture
Slide 19: Five new things for Information Architecture Make all references CSS compatible  Identify hierarchies   Catalog similarities and relationships  Define explicit markup  Design additional semantics      
Slide 20: 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,   Therefore, IAs should identify and use them on  sitemaps, content inventories, wireframes, and  functional specs,…   customer care, and more…  
Slide 21: 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     
Slide 22: 1  Compatible names are:  A single word   Consider CamelCase for legibility  About the content  AccountRegistationPage instead of accountregistrationpage  About meaning, not presentation or placement  May not begin with a numeral  CSS technical constraint  “promoHeader” not “rightsideBlueHeader” “teaser3” not “3teaser”    
Slide 23: 2) Identify hierarchies (two types)  Define the Source Order presentation)?   In what order is the pure content (without its   Define the order of Headers (h1, h2,…h6) 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?  (Don’t need to be in order in the source, nor sequential)    
Slide 24: 2 Sometimes this uncovers issues  What are there two H1 tags that say the same thing?    
Slide 25: 3) Catalog similarities and relationships   Each container is unique (News before Marketplace)  Yet each are similar, because they’re all module headers What can be reused? What characteristics are shared?  Another tool to articulate meaning; currently Webdev task    
Slide 26: 3  Relationships  The life of a scoreboard #nhl .scoreboard  #nba .scoreboard, #nfl .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?    
Slide 27: 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,    Forms: Radio button or Checkbox  Headers: H1…H6 VAR, CITE, ABBR, & ACRONYM    
Slide 28: 5) Design additional semantics  Squeezing semantic meaning from HTML is a good start, but a richer vocabulary is  useful.       Content types and meta info  States (for navigation)  HTML’s cite tag only gets us so far, we need “author”, “publisher”, “date”, “source” selected, default, disabled, active first, last Position (within lists)  Relationships    Consistent use “grants” semantic meaning XML still isn’t primetime; it must be represented in HTML “glue” (from Movable Type) parent, child, sibling    
Slide 29: So what does this mean: Wireframes    
Slide 30: New additions  Compatible Names #logoBranding #branding #secondaryContent #content #mainNav #subNav    
Slide 31: New additions  Hierarchies  Branding (#branding)     Main Navigation (#mainNav)  Logo (#logo) “You are here” (#place) Primary Content (#content)  Minor Navigation (#subNav) Secondary Content (#sub content)    
Slide 32: New additions  Similarities & Relationships .headline .noPrint #frontPage .headline #currentIssue .headline    
Slide 33: 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    
Slide 34: 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    
Slide 35: Not scary, it’s simple  Basic HTML representing basic IA work identifying  priority, classification and meaning.    
Slide 36: A New Process Can these advances enable an  improved design and development  process? 
Slide 37: 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?    
Slide 38: Waterfall Process      Silo’d teams 4 vertical phases,  most of any process Costly feedback loops  and sluggish iterations Sluggish iterations He said—she said    
Slide 39: 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    
Slide 40: 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  
Slide 41: Conclusion
Slide 42: 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.     
Slide 43: Thanks!  Christina Wodtke  cwodtke@eleganthack.com  http://eleganthack.com/blog/  Nate Koechley  natek@yahoo­inc.com  natek.typepad.com