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 :)

Adobe Fireworks plays an integral role in my workflow when designing wireframes and prototypes. Sometimes, I’d like to create several pages that use the same guides in the same document. Unfortunately, there’s not an easy way to setup global guides that can be shared and modified with several pages.

Luckily, there is a way to copy + paste guides from one page to another using an extension by Sarthak Singhal. Copy Paste Guides allows you to copy guides from one page using the Commands menu, and paste them in another.

To install, download the extension from Adobe Exchange, and then install the Extension in Fireworks (Commands → Manage Extensions).

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.

I was interviewed by a few cool cats recently. Rodney Echols published a nice post with some insight from the brilliant Skellie (Tuts+ Manager), Mike Smith from GuerillaFreelancing.com, and myself on building successful online publications. Frank Kuhn also posted a brief one-on-one interview with yours truly.

So sit back, grab a snack, and get to know me. It’ll be super great, like we’re chatting in person. Only I get to do all of the talking. What more could you ask for really?

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.

Today I published a new article over on the UX Booth. If you’re interested in a few interesting ways for creating more readable copy, go check out Tips and Tricks for more Legible Content.

Readability & legibility are both areas of interest in accessibility and typographic design, and many resources exist that attempt to define what constitutes well designed copy. In this post, we go over a few commonly overlooked and newer ways to implement more legible type on the web.

This post includes a very handy trick that I believe should be used more at this point in time by many web designers, where a 1px (or greater) text-shadow is used on custom fonts to make type render more consistently in browsers like Google Chrome on the Windows Operating System.

I am your enemy, the first one you’ve ever had who was smarter than you. There is no teacher but the enemy. No one but the enemy will tell you what the enemy is going to do. no one but the enemy will ever teach you how to destroy and conquer. Only the enemy tells you where he is strong. And the rules of the game are what you can do to him and what you can stop him from doing to you. I am your enemy from now on. From now on I am your teacher.

Orson Scott Card, Ender’s Game

I recently completed my series on the UX Booth, “Considerations for Mobile Design“. Ultimately, this is a topic of great interest to me, and this series was a great way to submerge myself in different facets of mobile web design.

The three parts of the series were split into the following segments:

1. Part 1: Speed

   The introduction to the series identified constraints in mobile design imposed by bandwidth, download and upload speeds.

2. Part 2: Dimensions

   This section attempts to establish common limitations across groups of devices based on resolution and physical size. In addition, solutions for serving specific styles to groups of devices are offered, and analyzed.

3. Part 3: Behavior

   Perhaps the least complete of the sections, this article attempts to show how users behave differently on handheld devices compared to desktops. At the same time, this area probably interests me most, but I believe much more testing will need to be done in regard to how gesture-based interfaces can be used in an acceptable way before the ideas explored here become more relevant.

Despite my interest in the subject, I’ll admit that the most fun part of the series was creating the artwork for it :)

Here are some of my favorite designs created for the series:

I even made a wallpaper from the Part 3 Artwork (1920×1200):

I hope that you’ll share your thoughts on the series over at the UX Booth if it’s a topic that interests you. We’re also looking for contributors to come guest post on the subject of mobile design. If you want to voice your thoughts on the matter, please visit our contribution page on the Booth!

I’ve been spending a lot of my free time lately practicing motion design on the web. It’s a very interesting subject :)

This is a quick demo I put together the other day of an animated parallax effect being used as a website background. It is a little resource intensive, so probably not an elegant solution for sites that value performance on a wide variety of computers and devices.

I may return to this demo soon—I believe that by adding some opacity animations to the bokeh to make them glitter, I can make the overall presentation feel much more complete.