Information Archectiture 101 using the new SLWA site as an example

2. I AM NOT A
LIBRARIAN

6. CONTENT IS KING
BUT WHO WANTS TO
RULE A DISORGANISED
RABBLE

10. <ul>
<MySource_AREA id_name=quot;topnav_menuquot; design_area=quot;menu_normalquot;>
<MySource_SET name=quot;levelquot; value=quot;rootquot; />
<MySource_SET name=quot;prefix_with_dividerquot; value=quot;falsequot; />
<MySource_SET name=quot;suffix_with_dividerquot; value=quot;falsequot; />
<MySource_SET name=quot;show_subsquot; value=quot;alwaysquot; />
<MySource_SET name=quot;settings.class.normalquot; value=quot;level1quot;/>
<MySource_SET name=quot;settings.class.hierarchyquot; value=quot;hierarchyquot;/>
<MySource_SET name=quot;settings.class.currentquot; value=quot;currentquot;/>
<MySource_ASSET>
<li class=quot;<MySource_PRINT var='settings.class' />quot;>
<a href=quot;<MySource_PRINT var='asset_link' />quot; >
<MySource_PRINT var='asset_short_name' /> </a>
<MySource_SUB design_area=quot;menu_normalquot;>
<MySource_SET name=quot;show_subsquot; value=quot;alwaysquot; />
<MySource_SET name=quot;settings.class.normalquot; value=quot;level2quot;/>
<MySource_SET name=quot;settings.class.hierarchyquot; value=quot;hierarchyquot;/>
<MySource_SET name=quot;settings.class.currentquot; value=quot;currentquot;/>
<ul>
<MySource_ASSET>
<li class=quot;<MySource_PRINT var='settings.class' />quot;>
<a href=quot;<MySource_PRINT var='asset_link' />quot; >
<MySource_PRINT var='asset_short_name' /> </a>
<MySource_SUB design_area=quot;menu_normalquot;>
<MySource_SET name=quot;show_subsquot; value=quot;alwaysquot; />
<MySource_SET name=quot;settings.class.normalquot; value=quot;level3quot; />
<MySource_SET name=quot;settings.class.hierarchyquot; value=quot;hierarchyquot;/>
<MySource_SET name=quot;settings.class.currentquot; value=quot;currentquot;/>
<ul>
<MySource_ASSET>
<li class=quot;<MySource_PRINT var='settings.class' />quot;>
<a href=quot;<MySource_PRINT var='asset_link' />quot; >
<MySource_PRINT var='asset_short_name' /></a> </li>
</MySource_ASSET>
</ul>
</MySource_SUB> </li>
</MySource_ASSET>
</ul>
</MySource_SUB> </li>
</ul>

11. #menu li ul, #menu li:hover li ul, #menu li.sfhover li ul {
position: absolute;
width: 13.5em;
left: -999em;
top: 1.5em;}
#menu li:hover ul, #menu li.sfhover ul {
left: 0; }
#menu li li:hover ul, #menu li li.sfhover ul {
left: 13.5em;
top: -1px; }

12. <!--[if lte IE 7]>
<script type=quot;text/javascriptquot; >
sfHover = function() {
var sfEls =
document.getElementById(quot;menuquot;).getElementsByTagNam
e(quot;LIquot;);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=quot; sfhoverquot;;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new
RegExp(quot; sfhoverbquot;), quot;quot;);
}
}
}

14. RESOURCES
The Polar Bear Book
Information Architecture for the World Wide Web,
Third Edition Designing Large-Scale Web Sites
By Peter Morville, Louis Rosenfeld
Boxes and Arrows
http://www.boxesandarrows.com
Information Architecture Institute
http://iainstitute.org
This presentation
http://www.slideshare.net/nickobec/mmiuc