Summary: Using HTML5 and CSS3 is the most bang for your buck right now if you want to use semantic web ideas in the most broad way possible and Codecademy.com is the best way to learn them right now. Card sorting is a common user interface (UX) technique for websites.

I recently met with a group of law librarians at the South Texas College of Law to discuss a little information architecture theory and practice. The coolest thing about putting together something like this is how much you polish your own skills. I can attest that the best way for me to learn a thing is to attempt to teach it well.

Information architecture is a way of measuring, modeling, and quantifying information as an entity and how humans and machines interact with information. There is a long and illustrious history and the disciplines touched by the ideas here are as varied as librarianship and physics can represent.

How we design the web impacts how we interact with the information therein. I came up with the following claim: When it comes to the web, you get the most bang for your buck in terms of using information architecture by learning to use HTML5 and CSS3 effectively.

HTML5 Makes the Web Better with Semantics

HTML5 has been a long time in the making. The W3C is in charge of putting the official stamp on a finished product. As the more nerdy among you probably know, the father of HTML and Web is Tim Berners-Lee. One of his original visions was to create a web of machine-readable information where the data ABOUT the data would help the machine parse things out. The semantic web isn’t fully realized with HTML5 but you can use HTML5 to add metadata to web content. Let’s look at an example (modified slightly) from the excellent HTML5 Doctor site.

The new HTML tag here is article. So what’s new? Well all the stuff from line 8 to line 29 is one thing. This unit is suitable for export to RSS or ready to be visually set apart from other articles or all setup to connect the time and comments directly to the content via the tags.

Big idea: good metadata makes for a more flexible web! 

HTML 4.01 didn’t have this kind of ubiquitous metadata. There is a very similar tag called section which is a more generic way to break up data but the article tag is less ambiguous.

HTML5 isn’t fully baked

HTML5 isn’t exactly finished yet but that hasn’t stopped the web movers and shakers from making this the new standard. You can see how well your particular browser understands HTML5 over at HTML5Test. And yes even Internet Explorer version 10 speaks some HTML5.

Learn to code HTML5 & CSS3

 

If you want to dig in a bit more you could download the HTML5 boilerplate code, read the free Dive Into HTML5 book online, visit the HTML5 Doctor for some clear explanations of tags, or try out the W3Schools HTML5 lessons.

But one cool and very interactive way to get some HTML5 under your belt is to step through the web fundamentals lessons over at Codecademy. The code you learn isn’t necessarily the most cutting edge HTML5 but what you see there will work across browsers. There is also a cool editor and hints along the way. The lessons culminate in a little product you are to create. It’s a lot of fun! And you can also learn programming fundamentals as well, not just web code.

Card Sorting Can Improve UX

UX and usability has really grown into a mature field of study within information architecture. I recommend taking a stroll through some of the great work over at the Norman-Nielsen Group site to get a feel for how much analysis goes into how humans interact with the web.

Big idea: Card sorting can allow the stakeholders to shape the UX of a site.

One easy to implement idea is card sorting. First find a group of stakeholders in the web project in question. They need not be web designers. Then ask them to write out on cards the topics that are most important to have on the website. There are a lot of ways to use this sort of mental inventory. You can sort them. You could ask another team to put them in piles and turn those into your menus. Or many many other things. You can also use software tools to a similar end by using a web-based card sorting tool. I also found some unrelated but cool mental map tools out there!