Ordered List - Home

YardVote

2008-10-24T22:39:00Z

Yesterday some friends from Holland, MI came down to hang out with Steve and I all day. They started a project called Yard Vote about a month ago and we decided to help them give the application some upgrades.

New Design

Steve worked out a new design for them that really features the mapping aspect and he created some killer icons. The previous version was fixed width and kind of narrow, so it was harder to see all the signs. Now with the full width map, you can really get a feel for the sign density in an area.

Email a Sign

When I started using YardVote I quickly found myself addicted, but the sign entry process from a phone was kind of slow. While Steve was working on the interface, I added the ability for Yard Vote to receive emails. In a few hours, I was able to glue together the workings to allow emailing yardvote@collectiveidea.com with the subject being the color of the signs and the body equivalent to the address. The email receiving can even update existing signs if you accidentally put in the wrong color.

It was a lot of fun to take a day off and help out our friends with their cool project. FYI: YardVote isn’t just for Michigan and Indiana either, as there are already signs marked in 26 states. Go ahead and add one yourself. Let’s see how many we can get before the election.

Scannability Equals Profit

2008-10-16T18:31:00Z

No one reads on the internet anymore. Right? Time and time again it is proven that we just skim and scan, eyes darting around like a chicken with its head cut off. When are we as web workers going to fully recognize that?

I use Facebook pretty rarely, but today I received a message from a friend so I fired up Safari and logged in. I immediately was distracted by how perfect the messages area of Facebook is designed. See below.

You might be thinking, ok, this guy is crazy because that text is too blurry to read. If so, you missed the point. In order to really dive into why I think it is designed so well, I’m going to add some overlays so it is easier to reference things.

The screenshot above is around 660 pixels of real estate when live in Facebook. I shrunk it down a bit to fit here. Let’s start with columns 1 and 2. Facebook could have merged those columns together. I mean look at all the vertical space left unused for each message. The reason Facebook separated the image and details is when you merge them into one column you lower scannability. It’s definition time. I define scannability as the ability to quickly scan vertically and comprehend. Scanning is a very vertical thing. As your eyes shoot down the messages page, it is very easy to scan the images, then the names and then the message body. It would be much hard to for your brain to comprehend things if it had to process, text then image, text then image, text then…you get the point.

Speed Reading

Try something real quick for me. Reread the paragraph above, but as you go through the lines, don’t trace all the way from the beginning of the line to the end. Start on the second or third word and as you get two or three words from the end continue to the next line until you have read the paragraph. The amazing thing is, your brain sees and comprehends the words on each end of the line, even though you don’t look at them. I picked up this speed reading technique in the Four Hour Workweek by Tim Ferriss.

This is why Facebook, whether consciously or not, is only using a three hundred pixel column for the message body, instead of the four or five hundred pixels that are available. As columns of text get more thin, there are fewer words to deal with on each line, which makes it faster to scan vertically and comprehend.

Poor Scannability Example

Take Twitter for example. I love Twitter like a son, but I find their web interface almost unusable. Aesthetically, it is pleasing, but the line length of the tweets (around 400 pixels as of article posting date) is so long that I lose the ability to scan vertically through them. The length mixed with the fact that the username is inline in the tweet forces me to read my tweets. Yeah, that is right, I don’t like reading my tweets. I scan them for keywords and such and only read those that catch my eye or are by someone I hold near and dear. I do the same thing on your blog, that is, if I read your blog.

I believe scannability is one reason Twitterrific, Snitter and all the mobile Twitter clients are so popular. Remember? People don’t read anymore.

The Point

Yes, I do have a point. This is not just a rant. I think as screens started getting wider, web workers decided they should use the extra space. I mean, we can’t leave it blank, it’s above the fold (don’t get me started on that). Wrong. Just because the space is there, doesn’t mean it should be used. Next time you begin work on a website or web app, remember these three simple steps.

3 Simple Steps

Scannability
???
Profit

Ordered List on the Road

2008-10-11T18:50:00Z

Steve and I (mostly Steve) are going to be racking up some frequent flyer miles over the next thirty days. If you are attending any of the following events, be sure to say hi.

Web Builder, Oct 13-15, Las Vegas

The Web Builder 2.0 conference is coming up next week and Steve will be doing to presentations. The first is on how to use and extend jQuery. The second is a dueling presentation with Dan Rubin, a Sidebar cohort, on how to get designers and developers on the same page.

Future of Web Design, Nov 3-4, New York City

Steve will be presenting the exciting new capabilities of HTML 5 and CSS 3 in a three and half hour workshop. This I’m sure is a can’t miss.

RubyConf, Nov 6-8, Orlando, FL

Steve will arrive home from FOWD, tag me, and I’ll be on my way to Ruby Conf. I won’t be speaking, but I will be having fun. This will be my second ruby conf and I’m stoked.

Sidebar Workshop, Nov 12, Washingon, DC

The Sidebar crew and their diverse talents will be holding a one day workshop in our nation’s capital. They’ll cover what you’ll need to create a high quality web site from start to finish. Steve will be presenting on HTML/CSS. If you live in DC, be sure to register!

Steve and I love to socialize, so if you are attending any of these conferences/workshops, be sure to flag us down on Twitter or in the hallway.

Hello Old Friend

2008-10-09T20:22:00Z

Remember back in the good old days? The days when our stylesheets were littered with ‘px’ font sizes and all was naively well? Guess what? Those days are here again.

For quite some time now I’ve been using Yahoo’s great font and reset styles in every new project. Basically, they normalize font sizing issues using percentages. 100% is 13px and they have a chart up and down to attain the other pixel sizes you may need.

The other day as I started a new project, it hit me. Safari is now on ‘roids. Firefox 3 is not too far behind. And Internet Explorer 7, well IE7 now does the ‘zoom’ of the whole page rather than just shifting font sizes up. The only browser that has problems with resizing pixel-based font sizes is Internet Explorer 6, right? And now is the time, if there ever was one, to begin IE6’s deprecation.

I’m not gonna lie, I immediately fired up my text editor and starting littering, nay, joyously smashing ‘13px’ and ‘48px’ (just because) all over my stylesheet. And you know what? It felt great.

Now there are those who enjoy percentages and em’s already and they probably won’t take kindly to this but frankly, I just don’t enjoy math that much _[1]. I hereby declare pixel font sizes safe to use once again.

body { font-size:12px; }

Note: I checked around with a few people to make sure I wasn’t hog crazy before posting this. If I am in fact hog crazy and coincidentally the people I asked also are, feel free to point it out in the comments. I’m not above being wrong.

[1] I was going to be much more harsh on those who would continue to use percentages and em based font sizes, telling them that they were obviously wrong, but I’ll leave that kind of stuff to Jeff Croft. :)

Harmony: User Management

2008-09-16T12:00:00Z

When we set out to make Harmony, our upcoming website management system, we wanted to solve some of the more annoying issues that we had run into with managing content on the web. User management is one such issue.

The administrative utility of adding users to a management system is commonplace. And there’s nothing particularly difficult about it. But we feel there are a few ways to simplify the process for content managers and developers alike. Keep in mind that we’re talking here about people who manage the website from the administrative interface, not ‘public facing’ users, like forum members for example. Also, Harmony will start off, at least, being a hosted management solution, so many of these features become more powerful in that environment.

Permissions

Let it be known that both John and I are both fiercely opposed to granular permission levels. They add over-complexity for their little usefulness, and are only in place to help paranoid managers. John and I like to say that “we don’t write software to solve social problems.”

That said, there will be a few basic permission levels where they make the most sense.

Account Owners: Owners will have access to anything in an account, including managing billing information, users, and sites.
Administrators: Administrators are nearly identical to account owners, but won’t have access to the billing section of the account. They also can’t remove/demote account owners. Just like account owners, they will have access to manage any site in the account, including sites that are added in the future.
Site Managers: Site managers are assigned to only one or more specific sites in an account, but will have full access to add users and manage content on those sites. The specific sites assigned to these users will stay the same, even as more sites are added to the account in the future.

One other key feature is that users can be identified as developers, which will show all the template tools and advanced theming utilities. If a user is not assigned this developer flag, these tools will simply be removed from the interface to simplify management for those at a non-technical level.

One Login

After working with content management systems for years, specifically working with single-installs of either custom software or open-source tools like WordPress, maintaining content across a distributed set of accounts and servers is a nightmare. Remembering your login for each separate instance is a pain, but even if you use tools like 1password, or simply have the same username/password everywhere, you still have to go through the login process at each location. Harmony will be different. Your user account, be it with your email address and password or your OpenID, will be completely unique to the system. You may belong to only one main account, or you may have several that you manage. All you have to do is login once, and you’ll have access to everything you need from one administrative interface. Finally.

As a developer, you’ll have options on how to serve your clients with Harmony. You can have a large account for your business, host all your client sites in that one account, and bill your clients to cover the cost, or profit from, your single account. If you prefer to avoid the monthly billing scenario, you can have your clients sign up for their own site account, and grant you administrative access. In the interface, the accounts and sites will be organized and easy to access, no matter which method you use. Or you could even blend the two, with almost no difference in how you, or your clients, manage their sites and content.

Convenience

Our CMS survey showed that the average number of sites being managed was typically not less than 4, and often times more like 20 or 30. Starting with user accounts, we’re trying to make the process of managing your websites as convenient as possible. We have many more ideas that are being built into Harmony, so if the project interests you, watch out for more updates.

FancyZoom meet jQuery

2008-09-04T20:42:00Z

A few days ago John posted a rewritten version of Cabel Sasser’s FancyZoom to work with Prototype and Scriptaculous. I took it upon myself to port it to jQuery, while making a few usability improvements.

FIrst off, you can visit the demo to see the effect in action. It’s nearly identical in behavior to John’s original in Prototype. But the fancyZoom effect is added in a much more jQuery-like way.

$(document).ready(function() {
    $('a.zoom').fancyZoom();
});

This will add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.

Additions, etc.

I’ve added in a few additional usability enhancements, most of which John has included back into the Prototype version. These include:

The zoom will close when clicking outside the zoom box area.
Hitting the esc key will close the zoom window.
Passing an option of closeOnClick: true into the fancyZoom function will close the zoom when the contents are clicked as well. This works great for image galleries.

So enjoy, all you jQuery folks. Both jQuery and Prototype versions are kept in the same repository, so you can get the code and see examples at GitHub.

FancyZoom Meet Prototype

2008-09-02T20:58:00Z

I hate lightboxes. Everyone who knows me, knows this. When I saw Cabel Sasser’s FancyZoom, a similar interaction, I liked the idea but not the exact implementation, so I rewrote it.

So what didn’t I like about Cabel’s? Nothing big and nothing deal breaking, just more a matter of preference. First, I didn’t like that it used AJAX. I tend to lean towards the side of rendering everything and then showing and hiding, rather than loading stuff with AJAX. I’m not a fan of waiting once a page is loaded, so my version works with any HTML already included on the page.

Second, Cabel, being the rebel that he is, built his from scratch with no use of any JavaScript libraries. That is cool and all, but I almost always have Prototype and Scriptaculous included. Cabel’s version without Prototype is two scripts that weigh in at 36k. My version with prototype is only 12k. Granted, we are doing things a bit differently, and mine has the overhead of Prototype and Scriptaculous, but like I said, I’d have that overhead with or without the fancy zoom.

Third, Cabel’s implementation only works for images and it loads them via AJAX (to save initial page weight). I think that the zoom interaction is pretty interesting so I didn’t want a version limited to just images. Mine supports pretty much any html you can throw in a div (images, text, flash, etc.). The only caveat is the html must be on the page somewhere, at this point.

Fourth, and final, is that I liked Apple’s rounded corners, as opposed to the original fancy zoom’s square edges. Sexy. You can see it on Apple’s site (click on the watch video button) or just take a gander at the screenshot below.

Demos

As always, I’ve whipped together a little demo site for you.

A Few Snippets

I won’t go into all the code, as it would take forever, but I’ll mention a couple of snippets from fancy zoom.

Object.extend(String.prototype, {
  // if a string doesn't end with str it appends it
  ensureEndsWith: function(str) {
    return this.endsWith(str) ? this : this + str;
  },

  // makes sure that string ends with px (for setting widths and heights)
  px: function() {
    return this.ensureEndsWith('px');
  }
});

Object.extend(Number.prototype, {
  // makes sure that number ends with px (for setting widths and heights)
  px: function() {
    return this.toString().px();
  }
});

When you are setting widths and height in prototype you always have to have ‘px’ on the end. I got tired of adding it, so using the snippets above I can do things like the code below, and I’m guaranteed to always end up with the correct unit.

180.px() // => '180px'
'180'.px() // => '180px'
'180px'.px() // => '180px'

Also, for the first time I used Effect.Parallel, which allows you to run multiple effects at once really easily. In this case, I’m running Effect.Appear, Effect.Move and Effect.Morph in sync to make the transition feel like it is jumping off the page.

At any rate, this was an interesting project and I’m sure I’ll be updating it with more goodies as I use it. The code and examples are up on Github so feel free to fork and give back. Hope it comes in handy for you.

Harmony: Signup and Cost

2008-09-01T13:07:00Z

I don’t know about you but I like to try before I buy. That is why signing up for Harmony will require no payment details. Provide us with a bit of information and you’ll be on your way to the administration area where you can take our baby for a spin.

What exactly are we requiring? All we want to know is who you are and how you would like to login. We have two login options, email with a password or OpenID. Steve and I are both fans of OpenID, so it’s important to us to allow you to use it from the start. The main goal of the signup page was to make it as simple and quick to complete as possible. Below is a screenshot of a piece of the signup form in it’s current state.

Once you have created your account, you’ll be taken to your account’s administration area, where you can start adding sites and users. One of the cool things that we’ve talked about is not charging a dime until a site goes live. Think about it. Administration area use won’t really cost us money, so why should we charge you for it? What will cost us money is the infrastructure and programming necessary to make sure the site you have created is available and speedy once you make it public.

What Will It Cost?

The cat is out of the bag. We are going to charge money for the hard work we put into Harmony. How much? We don’t know yet, but we promise it will be reasonable. Based on experience, we know it can be difficult managing the infrastructure an application like this requires, so the balance is what makes it worth the effort for us and affordable for you.

That is all for this week. Next week we will share what we have done with users. We are taking a bit of a different spin than some applications, so it should start some interesting discussions. That said, don’t feel you have to wait until next week to let loose with some feedback.

Introducing Harmonious Fridays

2008-08-22T19:28:00Z

On my second day working with Steve at Ordered List, we began our first application. I started programming and Steve started designing and a few days later we had a great start.

Only problem is that start has barely been touched during July and August. Harmonious Fridays will be our solution to that problem. Allow me to explain.

What

So what are we building? If there was a realm that Steve and I would not be bashful declaring ourselves experts in, it would be website administration. We’ve built countless systems that empower non-technical users to update their content, without giving up the control that developers and designers require. Harmony will be it’s name and managing websites will be it’s game.

Why

Both of us have spent our formidable years as web developers creating applications to manage websites. In fact, we got so tired of building them at Notre Dame, we decided to create one to rule them all. It was aptly named Conductor (built with Rails) and it was, and still is for that matter, awesome. We’ve been looking around at the various solutions (Expression Engine, Wordpress, Mephisto, etc.) and have not found one that hits our sweet spot.

Our Dream

We have a dream. We would like to manage all of our sites in one place. We want to login once and seamlessly switched between those sites. We are tired of installing software and setting up servers for each site that we create. We want full control (markup, styles, flexibility). We want an interface that is so simple our mothers could use it. We want statistics integrated in a way that will help us make content decisions. What about you? Do you have some of these dreams?

The Plan

In an effort to bring our dreams into fruition, we have declared Fridays as Harmony workdays (thus Harmonious Fridays). Each Friday, Steve and I will head into the office (wherever the office is that day) and work solely on Harmony. That alone should help us gain momentum on the project, but that is not where it stops.

We are building this first because we want it, but second because we think others will want it too (thus the survey). That is why each Friday (or sometime over the weekend), we are going to post the results of the day’s work. The posts will vary in content (concepts, code, mockups, screencasts), but, ultimately, will give you a chance to help guide the project and keep us accountable. We are pretty excited to try this out and curious to see what kind of feedback we get along the way.

Content Management Survey Results

2008-08-22T18:45:00Z

After a solid week of activity, we’ve closed our CMS Survey. Some of the answers were predictable, but there were a few informational gems that we’ll be able to pull from this data set. We’ve summarized the results below for your edification.

To set the stage, this survey collected from 189 responses. Though I’m sure more accurate results could be gleaned from a larger group, I’m satisfied that this is enough data to indicate trends, if only for the audience of this particular site. Now, onto the results.

Which CMSs Have You Used?

WordPress is by far the most broadly used system, but there were plenty of people who either used systems not on our comparison list, or who had created there own at one point or another. I wasn’t surprised to see Expression Engine in third, since I’ve been hearing more and more about it lately.

Satisfaction

So, in general, people seem relatively satisfied with the CMS they have, though there is definitely room for improvement. I noticed in the open-ended questions area, most people, regardless of satisfaction, indicated there were things missing from their current solution. Overall, only 12% of respondants indicated any dissatisfaction with their current CMS, while 38% said they were very satisfied.

Those indicating WordPress as their favorite CMS were very near the average, with slightly fewer people indicating that they were either very satisfied or not satisfied.

Expression Engine was notable because the low level of dissatisfaction, and the high rate of ‘Very Satisfied’, even though the software costs money. However, I would attribute these results more to the licensing system than the software itself, as you would seem less likely to pay for a solution that didn’t meet your needs.

To Host or Not To Host

While I was pretty sure that many people would prefer to host their own Content Management System, I was surprised by just how many were so adamant about it.

Digging into the data a little more showed an interesting insight into the psyche of web developers.

Of all the reasons given for why respondents preferred to host their own solution, the word control was explicitly stated 51% of the time. We truly are a group of control-freaks. I could comment on this finding quite a bit, but I’ll save that for a separate article.

The Rest of the Data

There were a few open-ended questions asked at the end of the survey which don’t have any real computational value to a summary such as this. The data will, however, be used and published here as we begin to develop our own version of managing online content. Hopefully you find this data useful, or at least interesting.

Live Search with QuickSilver Style (for jQuery)

2008-07-07T11:00:00Z

I’ve been palling around with jQuery quite a bit lately. The other day I whipped together my first jQuery plugin and things finally clicked. In the comments of the original post, I mentioned doing a jQuery port.

Lucky for you, I ran into some free time this weekend. Without any further ado, I will now link you to a demo and give you some code to peruse.

(function($) {  
    var self = null;

    $.fn.liveUpdate = function(list) {    
        return this.each(function() {
            new $.liveUpdate(this, list);
        });
    };

    $.liveUpdate = function (e, list) {
        this.field = $(e);
        this.list  = $('#' + list);
        if (this.list.length > 0) {
            this.init();
        }
    };

    $.liveUpdate.prototype = {
        init: function() {
            var self = this;
            this.setupCache();
            this.field.parents('form').submit(function() { return false; });
            this.field.keyup(function() { self.filter(); });
            self.filter();
        },

        filter: function() {
            if ($.trim(this.field.val()) == '') { this.list.children('li').show(); return; }
            this.displayResults(this.getScores(this.field.val().toLowerCase()));
        },

        setupCache: function() {
            var self = this;
            this.cache = [];
            this.rows = [];
            this.list.children('li').each(function() {
                self.cache.push(this.innerHTML.toLowerCase());
                self.rows.push($(this));
            });
            this.cache_length = this.cache.length;
        },

        displayResults: function(scores) {
            var self = this;
            this.list.children('li').hide();
            $.each(scores, function(i, score) { self.rows[score[1]].show(); });
        },

        getScores: function(term) {
            var scores = [];
            for (var i=0; i < this.cache_length; i++) {
                var score = this.cache[i].score(term);
                if (score > 0) { scores.push([score, i]); }
            }
            return scores.sort(function(a, b) { return b[0] - a[0]; });
        }
    }
})(jQuery);

The cool thing about writing the same functionality with two different libraries is now you can compare a bit to see which implementation you like better. :)

If you want to learn more about why I did this, read the original post.

Update: The man himself, John Resig, has made the code a bit more efficient and jQuery-ish.

Your Thoughts on Content Management

2008-07-02T22:01:00Z

John and I have been thinking about website and content management as of late, and we’d like to get a few more opinions on the matter. We’ve put together ~~a short survey~~, and if you wouldn’t mind, it would help us out if you’d share your thoughts.

Update The Survey has been closed, and we are processing the data. Check back here soon for the results.

We’ll leave ~~this survey~~ open for a week, and post an analysis of the results here when it’s over. I think it should be interesting to find out some of the more general opinions of the available options in the content management world. Thanks for your help.

Live Search with Quicksilver Style

2008-06-23T21:12:00Z

Live search? C’mon guys, this has been done plenty of times before, you say. Yes, it has but I promise you we’ve added a bit of a twist to it.

When working on the latest incarnation of orderedlist.com, Steve mentioned that the typical year and month layout of archives was overkill. He thought a better way to present them would be to list them all and let live search sort ‘em out. That simple thought fired a neuron in my brain. I am a fan of QuickSilver and I remembered seeing a port of the QuickSilver string ranking algorithm in JavaScript. A side note: anytime I say “algorithm” in a sentence I feel really smart. The fact that in the previous sentence “algorithm” was preceded by “string ranking” made me feel doubly smart. Ahem…back to the point at hand.

Demos

Typically, when I am reading a tutorial of any sort, I want to see the end product because if that is not impressive, I do not want to waste my time reading it. Feel free to open up a new tab with the archives page or the simplified demo I created just for this post and try a few searches.

Type This, Get That

Sure you can search ‘sidebar creative’ to find posts titled that, but I am lazy. I’d rather type ‘sdbcv’ because it is shorter. Plus, vowels are so 2007. You know who else is cool? Yeah, that guy Nunemaker, but holy crap is that name a keyboardful. Why don’t we just hit a few of the important characters like ‘nnmkr’. Bing, bang, boom. Welcome John Nunemaker is right there at the top. Cool, eh?

The How

First things first, we need a JS library to take away the hurt of cross-browserness. For this exercise, we used Prototype.

Second, we drop in the JS QS string ranking algorithm (I still feel smart).

Third, I made the simple prototype class featured below. It is commented pretty well with what is going on. Also, note that this is not the live version on Ordered List but a slightly simplified one that I made for the demo. Go ahead and give it a read through.

var QuicksilverLiveSearch = Class.create({
    /**
     * Sets up the caches and adds observers
     */
    initialize: function(field, list) {
        this.field = $(field);
        this.list  = $(list);

        if (this.field && this.list) {
            this.rows  = $A([]);
            this.cache = $A([]);
            this.setupCache();

            // kill normal submit of form since it's live
            this.form = this.field.up('form');
            this.form.observe('submit', function(e) { e.stop(); });

            // setup observer on the search field to run the filter when typing
            this.field.observe('keyup', this.filter.bindAsEventListener(this));

            // run the filter initially for any text that may be in it
            this.filter();
        }
    },

    /**
     * Caches inner html of children in array for later manipulation. 
     */
    setupCache: function() {
        // loop through immediate descendents (in this case li's) and push
        // their lowercase text to the cache and the li to the rows
        this.list.immediateDescendants().each(function(child) {
            this.cache.push(child.innerHTML.toLowerCase());
            this.rows.push(child);
        }.bind(this));
        this.cache_length = this.cache.length;
    },

    /**
     * Runs the filter that only shows the rows 
     * that have a score based on the search term.
     */
    filter: function() {
        // if nothing is in the field show all the rows
        if (!this.field.present()) { this.rows.invoke('show'); return; }

        // get the scores and hide the low scoring items
        this.displayResults(this.getScores($F(this.field).toLowerCase()));
    },

    /**
     * Hides all the rows and shows on the ones with a score over 0
     */
    displayResults: function(scores) {
        // hide all rows default
        this.rows.invoke('hide');

        // show each row that had a score
        scores.each(function(score) { this.rows[score[1]].show(); }.bind(this))
    },

    /**
     * Get the score of each row in the cache and return sorted 
     * result set of [score, index of row in this.rows]
    */
    getScores: function(term) {
        var scores = $A([]);

        // loop through the cache and get the score for each item 
        // appending them to the return set if they have a score
        // greater than 0; basically building an array like this:
        // [[0.69, 2], [0.33, 34], ...] where the first element is
        // the string score and the second is the index of the item
        // that scored that
        for (var i=0; i < this.cache_length; i++) {
            var score = this.cache[i].score(term);
            if (score > 0) { scores.push([score, i]); }
        }

        // sort the scores descending by the algorithm score (the first element in the array)
        return scores.sort(function(a, b) { return b[0] - a[0]; });
    }
});

Now all that is left is to create a new instance of this class once the dom has loaded.

document.observe('dom:loaded', function() { 
    new QuicksilverLiveSearch('q', 'posts');
});

As you can see, most of the heavy lifting is done by prototype and the quicksilver string ranker. All I do is build a cache of all the strings I want to search through and then show only the rows that have strings with a score greater than 0. Simple implementation with pretty cool results so I thought I would share it here.

The Well-Designed Web

2008-06-19T14:52:00Z

Recently 37Signals posted an article on why Web Designers Should Do Their Own HTML/CSS. I’ve been thinking about my reaction for a few days, and have finally come to a conclusion. I feel they’re putting way too much emphasis on the designer.

Knowing HTML/CSS Can Help Designers

Knowing the particular constraints, as well as strengths, of the medium you’re designing for is never a bad thing. It helps make a more informed designer, and a more thought-through solution. But did we expect Andy Warhol to weave his own canvas? Or Bob Dylan to sing well? Knowledge of implementation details isn’t required to create great works of art.

A Few Points

In my experience, good web designs come from good designers who know the web, regardless of their skills in a text-editor. 37Signals argues:

I’ve worked with many web designers in the past who only did abstractions and then handed over pictures to be chopped and implemented by “HTML monkeys”. It never really gelled well.

Their reasoning why this didn’t work is:

The things that got strong attention were all the things that Photoshop did well. Imagery, curvy lines, and the frame. All the around stuff, never the it stuff.

My response to this is two-fold. First, if you’re not getting good designs from your designer, than they’re probably a poor designer. Pretty pictures does not a good web design make. And that’s all there is to it. Take a bad designer, teach them HTML/CSS, and you’re still going to get bad designs.

Secondly, and much more importantly, if you are getting good designs from the designer, but they’re just not translating well to the markup and styles, then that’s the fault of your “HTML monkey,” as described. If the person doing your XHTML/CSS coding doesn’t ‘get’ your design, or your designer, than you’re going to end up with a poor product, no matter how good or bad the design is.

The Cornerstone to the Well Designed Web

So the cornerstone is the developer, not the designer. If you have a good developer who understands what makes a design good, understands user interaction, and has a sense of aesthetics, you’re going to get a good product. Yes, it’s important for your designer to have an understanding of how to build a website. But it’s much, much more important to have a developer who understands what makes good design.

Welcome John Nunemaker

2008-06-04T17:15:00Z

It’s my pleasure to introduce John Nunemaker as the second member of Ordered List. As a former coworker at Notre Dame, it’s wonderful to have him join me as a business partner and experienced developer.

Site Redesign

In an effort to distinguish Ordered List as a former one-man-show, I felt a redesign was in order. Not a big departure from the previous, but different enough to highlight our expanded service offerings, and unique personalities.

Additional Content

Not only will this addition allow for more work to be done for our clients, but will also allow us to collaborate on ideas for blog posts, tutorials, screen-casts, and more. In addition to this new upcoming content, John already has a collection of articles and references at his two websites Addicted To New and Rails Tips.

Future Plans

We plan to take full advantage of John’s wealth of experience in Rails development and content management to make some pretty awesome tools and applications. But just as much as I look forward to the work we’ll do, I’m excited to have another like-minded developer on board to help develop ideas and discuss issues.

I hope you’ll join me in welcoming John aboard.