Since the initial work on CSSsitemap, Andrew Maier and I have been pretty busy working on an array of other tools that are a bit specific to a project we’re collaborating on presently. The result: almost no time has been invested in CSSsitemap since the first in-house version.

Rather than make an empty promise about how we’re going to build some cool features into it eventually, I’m just going to share the code now (it’s awfully simple at this point). Yes, we’re still working on a pretty cool set of tools for project documentation & UX designers, but it’s still sort of up in the air in regards to when and how we’ll share that system with the world.

Download: CSSsitemap System (.zip, 13.3 KB) | Demo

Code example:

<ul>
  <li><span>Fruit</span>
    <ul>
      <li><span>Apples</span></li>
      <li><span>Oranges</span></li>
      <li><span>Watermelons</span></li>
    </ul>
  </li><!-- Fruit -->
 
  <li><span>Vegetables</span>
    <ul>
      <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span>
        <ul>
          <li><span>Arugula</span></li>
          <li><span>Cabbage</span></li>
          <li><span>Lettuce</span></li>
          <li><span>Spinach</span></li>
        </ul>
      </li><!-- Leaf Vegetables -->
 
      <li><span>Root Vegetables</span>
      	<ul>
          <li><span>Beets</span></li>
          <li><span>Carrots</span></li>
        </ul>
      </li><!-- Root Vegetables -->
    </ul>
  </li><!-- Vegetables -->
</ul>

The system is intended for documenting pages in a website in a visual and functional way. It’s very straight forward: pages are presented in a branched format using unordered lists. URL information can be added to any item in the tree for quickly navigating complex sites.

This system was built for webkit browsers, and will probably not work as-is anywhere else at the moment. We recently used it in part of a documentation process for a 300-page website where it has helped tremendously (a preview of which is shown below, intentionally obfuscated).

To be clear, this isn’t a sitemaps to be used on websites to aid people in their navigation or for SEO purposes. This system is for internal use at the moment, which allows us to visualize the depth of a site, section content appropriately, and create useful flowcharts. Someday, we hope to integrate more powerful functionality directly into this system such as illustrating user flows with color coded paths, and methods for organizing and filtering parts of the sitemap in realtime.

Feel free to use however you’d like. If you do anything cool with it, be sure to let me know :)

About a week ago, I mentioned that I’ve been working on a super easy to use Sitemapping system for use in some UX projects I’m working on. Today, I’m happy to say that the CSSsitemap System is just one piece of a larger templating system for UX designers.

Another part of this overarching tool is a simple Mental Model templating system. Like it’s Sitemap counterpart, this system is built to reduce time spent on tediously styling a document, and facilitate the process of laying out information effectively.

Furthermore, it’s very simple to build themes for :)

Cake Theme:

Simple Tech Theme:

Both of these systems are usable already, but I’m still figuring out the best way to release them. I’ve been discussing some ideas with Andrew Maier that might allow us to support the system more effectively in the long haul. In the meantime, I might release a preview of both systems here for your feedback and suggestions.

As a part of the “Discovery Phase” for some projects, creating a sitemap can be a useful tool for visualizing how different pages relate to one another. Some software exists to take care of the task (ie: Omnigraffle), but I was interested in building my own cross-platform solution.

Using CSS, I’ve built a super easy to use system with very simple syntax. In fact, the entire system is based on unordered lists. No classes required, just a list.

Here’s a sample of the code, and a preview of how it renders:

<ul>
  <li><span>Fruit</span>
    <ul>
      <li><span>Apples</span></li>
      <li><span>Oranges</span></li>
      <li><span>Watermelons</span></li>
    </ul>
  </li><!-- Fruit -->
 
  <li><span>Vegetables</span>
    <ul>
      <li><span>Leaf Vegetables</span>
        <ul>
          <li><span>Arugula</span></li>
          <li><span>Cabbage</span></li>
          <li><span>Lettuce</span></li>
          <li><span>Spinach</span></li>
        </ul>
      </li><!-- Leaf Vegetables -->
 
      <li><span>Root Vegetables</span>
      	<ul>
          <li><span>Beets</span></li>
          <li><span>Carrots</span></li>
        </ul>
      </li><!-- Root Vegetables -->
    </ul>
  </li><!-- Vegetables -->
</ul>

Currently, I’m only supporting webkit based browsers. Since this is primarily for internal use at the moment, there are some bugs that need squashing before I’m ready to release this to the public. I’ll post an update when the system is available for download.