Chronicling the trials and tribulations of developing for the modern web.



Remember the :active styles

Posted by Pat Nakajima on May 05, 2008 in Web Applications.

The hyperlinks of today look way better than they did five years ago. Designers and developers have become better and better at styling links to not only be usable, but beautiful as well. We know how to indicate the basic behavior of a link using only color (for example, red usually indicates a destructive action). And we know how to style links to give them a stronger affordance of click-ability.

Most web applications make clever use of the :hover pseudo-class, which allows us to tweak link backgrounds to add an even stronger affordance of click-ability, and draws the eye to the link, which focuses the user on task at hand. All of 37signals’ apps provide great examples of tasteful rollover link styles.

When we begin to think about rollover styles, we’re no longer thinking about how the app looks. We’re thinking about how it feels. Different styles for link rollovers make a page feel much more responsive. Everybody these days knows this, and takes advantage of it.

Unfortunately, few people take advantage of the :active pseudo-class, which allows you to style the link differently while it’s being clicked. This is just as important, if not more important than the rollover state. Changing a link’s :active style provides immediate visual feedback that the link is being clicked.

Try each of the following links. See which feels better.

This link does not have an active state.

This link does have an active state.

The chances of a person successfully completing a task increase with the level of feedback that that he/she receives before, while, and after performing that task. (if you’ve read The Design of Everyday Things, you know what I’m talking about). With links, the “before” feedback can be achieved using :hover styles, and the “after” feedback is usually just the browser doing something, be it going to a different page or just updating something dynamically. The “during” feedback can be achieved by simply using a good :active style.

Now, just as much thought must be given to a link’s :active style as to its :hover style, if not more. Usually, a click is less than a second, so changing the style too much can be distracting, and actually do more harm than good. I’ve found that the best :active styles tend to just make the background a bit darker. I first saw this on flickr (which was where I first noticed the :active state in use and fell in love). You might also think about adding an underline during the click. Experiment and see what works best for you.

One thing’s for sure though. Once you feel the difference in your web apps between a good :active style and a non-existent one, you’ll wish every site made use of them.

Playing with Warehouse 1.1.1

Posted by Pat Nakajima on October 15, 2007 in Web Applications.

I’ve been a happy Warehouse user ever since the app was released and I was able to get it running on my SVN server. I’ve had almost no complaints. Still, whenever I try to sell the idea to others, one of the first things I’ll hear is the question “Is that all is does?” I’ll answer yes, and we’ll typically move on in the conversation. With the pseudo-release of Warehouse 1.1.1 though, I’ll have a bit more to talk about.

Warehouse 1.1.1, recently released to beta participants, introduces two new features which will make the app worthwhile to a lot more people hooks and plugins.

Hooks

Hooks have been a part of SVN and sort of a part of Warehouse all along, but now there is a separate tab in the interface for managing them. You can setup separate instances of different hooks with customized options for each. Pretty nifty. What’s more, Warehouse 1.1.1 ships with three hooks already in place:

  • Campfire: Logs into Campfire and posts a message for every repository commit.
  • Mailer: Emails the details of every commit, using mail settings found in Warehouse 1.1.1’s new and improved Settings area.
  • Lighthouse Beacon: Posts the latest revision data to your Lighthouse account. It’s great to see some integration between ActiveReload products.

Those three hooks pretty much cover 99% of the demands I’ve heard from people who wanted more from Warehouse. I’m still excited to see what else users will come up with though.

Plugins

Since Warehouse is a Rails app, it’s had plugin support from the beginning, but implementing them would have required some tinkering with the app itself. The new plugin system automatically loads all Warehouse plugins when the app is started, and provides a new tab in the interface for managing them.

Warehouse 1.1.1 comes with a simple plugin called “Photo Gallery” which provides a quick interface to view any image in your repository. It’s meant as more of a demo to those of us who might be inclined to create our own plugins. I took the time to develop an ultra-basic “Hello World” plugin, which basically just displayed the message “Hello World” when I clicked on it.

Obviously, my plugin didn’t take much time to develop, but it wasn’t so much of a stretch to imagine developing something much more useful with not much more effort. I think it’s safe to say that the plugin system will be a hit.

A word to the wise

Unless you really know your way around a Rails app, you should wait for a more stable version to be released before you start to play with the new Warehouse. While version 1.1.1 introduces some great new features, it’s still very much a beta release. You’ve been warned.

And feel free to take a look at my warehouse installation here: nakadev.com.

footodo is now live

Posted by Pat Nakajima on June 20, 2007 in Web Applications.

I took footodo back down because it was eating up a bit too much in the way of system resources. You can still view the code here: http://open.nakadev.com/browser/projects/footodo

A little while ago I posted about an open source Rails app I created called footodo. The only way to check it out was to download it using Subversion, then run it yourself. Not too difficult, but not too easy either, especially for people without knowledge of Subversion.

Then today I realized the fact that I really need a to-do list to stay more on top of things. Then I thought, instead of using somebody else’s, why not use my own? So I decided to deploy footodo. Now if you want to try footodo, all it takes is a trip to footodo.devthatweb.com, where you can easily sign up and be on your way.

So enjoy. I’m going to be adding features as I see fit. Now that I’m actually using the app, that’ll probably be rather soon.

Are we all iPhone developers now?

Posted by Pat Nakajima on June 11, 2007 in Web Applications.

Today, Apple announced its solution for letting developers get their apps on the iPhone. Looks like iPhone apps will be a mixture of HTML (for the structure), CSS (for the style), and Javascript (for the behavior). Does that sound familiar? If it doesn’t, you probably shouldn’t be reading this blog.

iPhone apps will be web apps. They’ll run on the iPhone’s version of Safari, Apple’s web-kit based browser. So as long as your web app runs on Safari, it should run on an iPhone. And for you Windows users out there who aren’t sure whether or not your web app runs in Safari, there’s good news: Safari 3 is available on Windows XP as well as Windows Vista.

So all of this begs the question: Are all web developers now iPhone developers?

Answer: Not unless all web developers are also Windows and Mac developers. (Hint: They’re not.)

Making the iPhone open to third party developers means making it a platform. Developing for a platform means catering to its strengths, and dealing with its weaknesses. For example, web developers can take advantage of the strengths of the web, such as its wealth of information, capacity for communication, and the ability to access it from many locations. Its weaknesses include being at the mercy of whatever connection the client has available and being obsolete in an area with no connectivity. Don’t expect your iPhone application to work on a plane, or in a long tunnel.

Since an iPhone app would suffer from all of the shortcomings of the web, and lacks any unique advantages, you really can’t call it a platform. And since you really can’t call the iPhone a platform, you really can’t call your web app an iPhone app.

Three web 2.0 web stats services compared

Posted by Andreas Creten on June 01, 2007 in Web Applications.
Like any real web worker, I spend a lot of time analyzing project traffic stats. I’ve been on the lookout for the best web statistic analytics apps since I found webalizer (which came with my hosting) to be both ugly and unclear.

Now, there are a lot of stat programs around on the web, and to figure out which one would best suit my needs, I first needed to figure out what my needs were.

This is what I’m looking for in a web stats service (your needs may vary):

  • Choice between free account and a full-option premium account
  • Web 2.0 style
  • Hosted on their servers, ruling out the ever popular Mint application

I took a look at a lot of services, creating dozens of accounts in the process. Finally, I whittled the list down to three finalists:

They all have the basic features, including how many visits do you get in a day, the visit depth and the visit duration. Each program can provide information about the browser, the OS and the plugins that your users has installed. They also each have a “map overlay” feature that show where your users come from geographically.

Reinvigorate

Reinvigorate is not openly available to the public yet, but since I’m a beta tester, I can bring you an inside look at the service before its wide release.

Reinvigorate’s dark interface contains a very nice and usable menu. Its presentation of data is both coherent and stylish. Better yet, it gives you flexibility, such as the ability to choose the type of graph that is used to display your data.

Changing graph style buttons

Reinvigorate focuses on what the users are doing. You can see what paths your users follow while visiting your site. I love the way it groups user paths, and you can even see a list of the most popular paths.

Popular visitor paths overview

On the active users page you can see a live view what the users are currently doing at your site. Over whole the application, when you click on an IP address or a username (if you use name tags), you can see what the user did and which pages were visited.

View live user info and paths

Reinvigorate also includes the ability to navigate using visits per week/day/month/year, browser version (instead of name) and a great keywords and referrer overview.

Clicky 2.0

Simplicity rocks. It was clearly on the minds of Clicky 2.0’s developers. The service has a very clean and simple layout. If offers the user the essential functions, plus the extra touch that is mostly commonly called finesse. Like Reinvigorate it focuses on the user, and shows you user actions. However, it only shows lists these actions, instead of putting them together to form a sense of flow as you’d find in Reinvigorate.

Users actions list

Clicky 2.0’s list-based approach to showing user actions is a bit unfocused; it could benefit from an afternoon with an interface designer. The biggest thing missing from 2.0 though, is the presence of useful comparative graphs. Currently, your data is graphically represented by some bars. Not so good.

Clicky 2.0 does offer something that the other two services in the piece don’t: outgoing links, which let you see where users are going when they leave your website.

Google Analytics

I’m not among the Google techie-boppers (bare interfaces aren’t for me), but Google Analytics is simply amazing. It has almost everything you could want built-in, like the ability to analyze visitor data for a specific period, set goals you’d like to reach, then later compare those goals with the actual tracking data. You can even create goals for getting your users to follow certain paths, called “conversion goals.”

Navigating through Google Analytics can be difficult at times, and there tends to be a high click-count between you and the data that you want. This can be partially forgiven though, simply due to the fact that Google Analytics contains so much data. Google Analytics also makes things easier with its exceptional dashboard. You can easily add, remove, or reorganize graphs and data at will, using an effective drag-and-drop interface.

Google Analytics also makes enterprise users feel right at home with its ubiquitous export function. Now you can send your data in CSV, XML, PDF and TSV.

Site overlay view

Google Analytics even provides some usability tools, in addition to its traffic analytics suite. The site overlay shows you where your visitors are clicking using an approach similar to that of Crazy Egg. Crazy Egg delivers much more precision, but then again, it’s a different service intended for a different purpose.

In conclusion

The service you choose depends on what kind of user you are. With that in mind, here are my recommendations:

Consumer/Hobbyist – Clicky 2.0
Get the essential data in a simple design
Prosumer – Reinvigorate
All of your data in a cool and configurable interface
Professional – Google Analytics
Extensive tracking and reporting functionality, as well as planning tools and a bevy of export formats.

Since these each of these services offer some sort of free account, you have the ability try before you buy, which is always a good thing.

To be honest, I still can’t decide which service I like the most, though at this point it’s really between Reinvigorate and Google Analytics. I’ve been happily running them next to each other. This way, I not only get the benefits of both, but also get protection in the event of downtime from one or the other.

What type of stats tracking do you use?