There’s a first time for everything: first date, first job, first car, first house, and the list goes on. I suppose there’s got to be a first even for our Usability & Design team, and by this I mean, our first post on our first blog. At this point, some affirmation in the form of encouragement would be in order here as we throw out ideas and opinions for public consumption, but seeing as how this is digital space, stunned silence will have to do. Indifferent silence, maybe.

So what’s with the blog? Authoring a design blog isn’t a presumption that we’re in a position of authority when it comes to design. It’s not to say we have a pedigree or portfolio of work we’re out to crow about neither. If anything, our design blog is a blog by people, designers by day, working on a product for which we have a lot of ideas, goals, and dreams: stuff we want to do when it comes to design, feel, and UI. It has to do with usability, CSS, colors, endless AJAX library debates, standards compliance, some more nerdy stuff and some stuff that’s just plain nifty.

We’re an odd bunch. “Yoo-dee-ers” – they call us. Most of us here come from a traditional computer science background (oh, code is bliss) and picked up an artsy bent along the way (the guy leading our team got the MFA, and Abe’s on his way to get one too). We’re iPhone admirers; 37signals readers; 9rules browsers; shrug our shoulders at Techcrunch, Digg, Popurls, Original Signal, and Reddit; social networking and web 2.0 connoisseurs trying to get our heads around how we’re going to put it on the table for our clients and world to make it part of their daily fare.

So we’ll talk about design, things we’re thinking and reading. We’ll throw out our discussions as we’re doing our jobs and see what you have to say. Screenshots maybe, the newest UI element, some technology stumbled upon, designs that inspire us. Musings will shy away from the philosophical, and might even veer towards the architectural (which was this poor guy’s major in college).

Maybe something more concrete than this intro stuff is in order here. Usability is an area of the product which has received short shrift a little too much in the past in an otherwise really robust application. “Usability” isn’t just a buzzword for 2007. It’s a reality we care about and our work’s sharply focused on making it happen. How’s this UD team actually going to do it? We say, subscribe to the feed and let’s figure it out.

Here in UD-land, we’ve been working on some projects that require some heavy UI overhaul. One of these projects requires a “filter bar” — a search bar that filters a long list dynamically. We thought that the typical text fields would clash with the style of our design, so we opted for the Safari-esque search field.

Initial Setbacks

Unfortunately, Safari is the only browser currently that (natively) offers this nice-looking search field. What to do, what to do? Well, we could simply fake it, couldn’t we? That is, we could just have a simple text input field and tack on two rounded sides on the end, no? Unfortunately, it’s not that easy. You see, in Safari, when you select an input field, it “glows”:

There were other problems that came up along the way:

• No way to disable glow in Safari, or
• no way to only make the outside glow in Safari (if we were just using a standard text input)
• Safari uses type=”search”. However, that isn’t W3C compliant.

Solution

Well, without going into all the boring details as to what we’ve done, let me just say that we’ve turned it into a generic framework, and you can download it here. A thing to note is that it requires the Mootools framework.

Implementation

We first need to reference the right files. Remember, Mootools go before prettyinput.js.

<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>


Next, we’ll place the input tag inside the HTML file. Note that the span element is optional — it defines the text inside the search bar.

<label for="YOUR-ID">
<span class="prettyplaceholder">Search</span>
<input id="YOUR-ID" class="prettysearch" type="text" />
</label>


Finally, let’s insert this Javascript snippet in the header.

window.addEvent('domready', function() {
new PrettyInput($('YOUR-ID'));
});


Voila! That’s it!

Compatibility

This is fully compatible with the following browsers:

• IE6
• IE7
• Firefox 2+
• Safari 2

Download PrettySearch (15KB)

Being a big fan of the Apple Pro Application videos, I was quite tickled by this video my friend, Jim, sent me. I got a good dose of humility as you realize your so-called innovative ideas of today are just plain givens in the future. “The future is in the past”