A List Apart had an interesting article recently that Defended the Case for Eye Candy. The article hit a key point that we've been practicing here at The Wojo Group on our various projects.

Things that are enjoyable will be easy to use and efficient.

The ALA article is defending the case that beautiful and aesthetically pleasing UI designs increase functionality because they're perceived to be easy to use and efficient. What we've been practicing here is the theory that you can have an interface be more enjoyable through the implementation of functionality. That is, if a piece of functionality is fun, the user will perceive it as intuitive. Now there are limits to this; you can't have something that is super fun and not functional what so ever. But, generally speaking, the more fun you can make a user interface to interact with, the more forgiving your users will be of any shortcomings. (more…)

We all just spent a few dedicated days listening to talks and having long hard discussions about building web apps in Miami at

(more…)

Ok everyone, we here at the wojo group are getting pretty excited for next week. On Saturday, we're packing up our cars and driving straight through the night. We're not stopping until we hit Miami. Why, you may ask? FOWA 2009!

(more…)

To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. I looked around for a sample of how others did stacked bar graphs and came up empty handed. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart.

The Markup

The first thing I do anytime I start HTML/CSS work is code the HTML. It’s a personal preference to make sure it’s all going to look good for screen readers and be as semantic as possible, and since it’s my article we’re going to do the HTML first.

<br />
&lt;dl id=&quot;csschart&quot;&gt;<br />
&lt;dt&gt;Mon&lt;/dt&gt;<br />
&lt;dd&gt;36&lt;/dd&gt;<br />
&lt;dd&gt;30&lt;/dd&gt;<br />
&lt;/dl&gt;<br />

Like Alen Grakalic’s implementation, I used a definition list. I found it to be the most semantic way of presenting data like this. To explain, each day of the week is in a <dt> tag and the data for that day is in a <dd> tag. There are two <dd> tags for each day, one for our page views and one for our unique visitors.

<br />
&lt;dt&gt;Mon&lt;/dt&gt;<br />
&lt;dd class=&quot;p36&quot;&gt;&lt;span&gt;&lt;b&gt;36&lt;/b&gt;&lt;/span&gt;&lt;/dd&gt;<br />
&lt;dd class=&quot;sub p30&quot; &gt;&lt;span&gt;&lt;b&gt;30&lt;/b&gt;&lt;/span&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />

Each <dd> is given a class that corresponds to the percentage of that bar. p100 is 100% the height of the graph and p0 is 0% the height of the graph. Making 100 classes is a pain and a lot of CSS but it makes it so easy when you’re turning these graphs out dynamically.

The other class to which we’ve added some of the <dd> tags is “sub”. This denotes the stacked bars in the graph that will be put on top of the other <dd>.

Finally, we wrap our data in <b> and <span> tags so we have enough to work with when we’re styling it.

Styling the Graph.

<br />
dl#csschart, dl#csschart dt, dl#csschart dd{<br />
margin:0;<br />
padding:0;<br />
}<br />
dl#csschart{<br />
background:url(../images/bg_chart.gif) no-repeat 0 0;<br />
width:454px;<br />
height:360px;<br />
padding-left:11px;<br />
}<br />
dl#csschart dt{<br />
display:none;<br />
}<br />
dl#csschart dd{<br />
position:relative;<br />
float:left;<br />
display:inline;<br />
width:33px;<br />
height:330px;<br />
margin-top:22px;<br />
}<br />
dl#csschart span{<br />
position:absolute;<br />
display:block;<br />
width:33px;<br />
bottom:0;<br />
left:0;<br />
z-index:1;<br />
color:#555;<br />
text-decoration:none;<br />
}<br />
dl#csschart span b{<br />
display:block;<br />
font-weight:bold;<br />
font-style:normal;<br />
float:left;<br />
line-height:200%;<br />
color:#fff;<br />
position:absolute;<br />
top:5px;<br />
left:3px;<br />
text-align:center;<br />
width:23px;<br />
}</p>
<p>/* Styling the Bars. */</p>
<p>dl#csschart span{<br />
height:50%;<br />
background:url(../images/bar.png) repeat-y;<br />
}<br />
dl#csschart .sub{<br />
margin-left:-33px;</p>
<p>}<br />
dl#csschart .sub span{<br />
background:url(../images/subBar.png) repeat-y;<br />
}</p>
<p>dl#csschart .p0 span{height:0%}<br />
dl#csschart .p1 span{height:1%}<br />
dl#csschart .p2 span{height:2%}<br />
dl#csschart .p3 span{height:3%}<br />
dl#csschart .p4 span{height:4%}<br />
dl#csschart .p5 span{height:5%}</p>
<p>/*This continues until 100%*/</p>
<p>

The first thing we do is reset all the margins and padding to make it look the same on all browsers. Then we define the width and height of our chart in dl#csschart. We’re using a background image to help with the tick marks on the axes and for some background gridlines. One important thing to note is the padding-left. This moves the first bar over past the tick marks on the left of the background image.

Next, we hide the dt tags. There is really no good way to make them do what we want. Position the dd tags to float left and use margins to push them to the correct place in our background image. Now, just to be clear, the dd tags are not our bars, they are simply containers for our bars. They are all 100% of the height of our graph. We use the span tags inside the dd tags to fill in our bars. Since they’re positioned absolute inside our positioned dd tags we can use bottom:0; to place them on the x-axis and have them grow in height from there. We use the b tag to display the actual data value inside the bar.

At the bottom we define the background image for the bars in dl#csschart span (you can easily just make it a background color instead), then we position our .sub bars overtop by giving them a margin-left of -33px (the exact width of the bars).

Finally, we make our 101 classes for each percentage point from 0% to 100% to give our bars their height.

I’ve made a diagram to explain what each tag is doing.

Add the Axes.

Ok now you’ll notice we don’t have labels on our axes. So we use some simple unordered lists. One before the cssChart:

<br />
&lt;ul class=&quot;yAxis&quot;&gt;<br />
&lt;li&gt;100&lt;/li&gt;<br />
&lt;li&gt;90&lt;/li&gt;<br />
&lt;li&gt;80&lt;/li&gt;<br />
&lt;li&gt;70&lt;/li&gt;<br />
&lt;li&gt;60&lt;/li&gt;<br />
&lt;li&gt;50&lt;/li&gt;<br />
&lt;li&gt;40&lt;/li&gt;<br />
&lt;li&gt;30&lt;/li&gt;<br />
&lt;li&gt;20&lt;/li&gt;<br />
&lt;li&gt;10&lt;/li&gt;<br />
&lt;/ul&gt;</p>
<p>

and one after the cssChart:

<br />
&lt;ul class=&quot;xAxis&quot;&gt;<br />
&lt;li&gt;Mon&lt;/li&gt;<br />
&lt;li&gt;Tue&lt;/li&gt;<br />
&lt;li&gt;Wed&lt;/li&gt;<br />
&lt;li&gt;Thu&lt;/li&gt;<br />
&lt;li&gt;Fri&lt;/li&gt;<br />
&lt;li&gt;Sat&lt;/li&gt;<br />
&lt;li&gt;Sun&lt;/li&gt;<br />
&lt;/ul&gt;</p>
<p>

Styling the Axes.

<br />
ul.xAxis{<br />
margin:0 0 0 27px;<br />
padding:0;<br />
float:left;<br />
clear:left;<br />
display:inline;<br />
width:454px;<br />
}<br />
ul.yAxis{<br />
margin:14px 0 0 0;<br />
padding:0;<br />
display:inline;<br />
float:left;<br />
}<br />
ul.xAxis li{<br />
float:left;<br />
list-style:none;<br />
width:33px;<br />
text-align:center;<br />
}<br />
ul.yAxis li{<br />
list-style:none;<br />
height:33px;<br />
text-align:right;<br />
float:left;<br />
clear:left;<br />
}</p>
<p>

Styling the axes is really just floating the the y-axis left and using some margins to push it in place. Then you can use some margins to push the li tags to line up with the tick marks of your background image.

Step 1

First we'll start off with a photograph of an equestrian horse jumping. This one is from iStockphoto.com, feel free to use whatever picture you'd like.

Step 2

Open your picture in Adobe Illustrator. Trace an outline of the horse and rider with the pen tool. Don't worry too much about the tail or mane, just give it a nice outline- we'll work on the details of those areas later.

Step 3

Tweak the finished outline of the horse. You may need to use object > path > simplify… to smooth out your work.

Step 4

Now we'll make a brush to add some of the fancy curls and swirls for the long hair details of the horse. Start by making a circle with the shape tool. than use the direct selection tool, , to grab the bottom point and pull it down. The result should be something like below.

Step 5

To make this shape into a brush we'll go to the brushes palette and select "new brush…"

Step 6

Select Art Brush.

Step 7

In the option box match the settings below.

Step 8

Now we'll start to add in some of the hair. This uses a combination of techniques that you can choose from and mix and match to create the hair. The first is the arc tool. Draw an arc on the tail to start making some of the detail hair. Repeat as necessary and if needed you can alt click the canvas with the arc tool to bring up the arc tool's options.

Step 9

The other technique to use is the spiral tool,. Again, alt click the canvas with the spiral tool to bring up its options. After some use of the arc and spiral tools you should come up with something resembling this:

Step 10

Now all we need to do is the mane. You can continue to use the same two spiral and arc techniques, but since its smaller, finer hair I went for the brush tool. If you double click the brush tool you can bring up its settings. It helps if you turn up the smoothing. Then, just use the custom brush that we've been using, turn the stroke width down a little, and start drawing some hair on top of the horse's neck. Here's what it should look like.

Finished Product

Just took it, so should you.

.

We built and launched Invisequine.com as a redesign and rebranding of Invisequine Co. The previous website was a template based e-commerce site that offered far more than what Diane Sheets, the owner of Invisequine Co., needed to sell her waterproof equestrian products. The site template was really designed for companies who sell hundreds of projects, and Diane's company offered a small and select list of specialty products. The resulting mismatch was a cluttered site that was difficult to navigate. Our goal was to restructure the information architecture to allow users to purchase products with as few clicks as possible. We were also tasked with organizing the different types of products and options in the best possible way. As far as the rebranding was concerned, Invisequine Co. wanted to be modern and trendy yet elegant.

The information architecture was reduced to pure simplicity. There are only 3 pages on the whole site- Home, Catalog, and Contact. Take note that there is no cart page.

For the shopping cart we employed a rather inventive technique. When an item is added to the cart a bar at the bottom of the page appears to show all of the cart functionality and products. From this bar you can checkout through PayPal. If you're a return visitor the bar will appear just as it did when you last left the site. When the cart is emptied, the bar disappears.

The Branding borrowed the standard horse jumping mantra of Equestrian brands and took it a step further. The horse is jumping over the logo type and has some extra flare to set it apart and make it more "hip" . The raindrop helps convey that Invisequine Co. sells equestrian rain products.

In a future article I will walk through the process of creating this logo from start to finish.

When it comes to marking up your document with bold and/or italicized text there is a bit of an argument about what tags to use. The W3C recommends using <strong> instead of <b> for making text bold and using <em> instead of <i> for making text italicized. Their reasoning is that <strong> and <em> tags both separate structure from style by placing some sort of meaning to the text inside those tags. Text inside the <em> tag is to be emphasized and text inside a <strong> tag is to be strongly emphasized. On the other hand, The <b> and <i> tags simply imply that the text should be displayed a different way. If you read the text inside the <b> or <i> tags you should not be reading them with any emphasis.

(more…)