Simian Design

Doug Bowman has a _fantastic_ read on how he, and the rest of the team over at Google, recreated some buttons that just launched the other day over at gMail.  The problem they were looking to fix was one of complex actions, where a button can do more than one thing.

A basic 

<input type="submit">

 could be used for single actions, a 

<select>

element could be used for a compact menu of actions, and 

<input type="radio">

 could be used for selecting mutually exclusive options. But we’re left with no way to represent other interactions common in desktop apps. Such as a checkbox that represents more than just on or off. Or the use of auto-complete to refine or narrow the options in a drop-down menu. On top of this, the controls we can render have significantly different appearances across browsers and platforms. Even within a single browser, buttons and select menus have quite different designs.

Enter: the concept of custom buttons.

If you care reading about interaction design, functionality, usability or things about how to sweat the details like making pillbox buttons then go read this, read it now.  It’s fantastic.

Dan Wellman has written an excellent article, The Definitive Guide to Creating a Practical jQuery Plugin. He takes you step-by-step through the entire process.

In this article we’re going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

Writing a jQuery plugin makes sense if you have code you reuse a great deal. You can drop code into your site and have it work right away with little or no tweaking of the code.

He takes you through the Adding Configurable Properties, building Constructor Methods, and adding to the plugin’s API.

It’s a very well written tutorial, easy to follow, easy to help you along.

Flickr recently released a Flickr site custom tailored for the iPhone.  They wrote about some of the rules they learnt doing this site, which I find fascinating.  I’m pulling out the main points, but you really need to go read the detailed description of why they’re doing things the way they are.

1. Don’t Use a JavaScript Library or CSS Framework
2. Load Page Fragments Instead of Full Pages
3. Don’t Build for Just One Device
4. Optimize Everything
5. Tell the User What is Happening

Now they’ve put together a library just for the iPhone that handles many of these items. The iUI framework seems to be a iPhone version of the YUI framework, but it’s a good start.

I don’t like the default SharePoint breadcrumbs. They annoy me in multiple ways.  And I’m not alone in my disdain.

MOSS 2007 has two breadcrumbs that are included on the master page.  Not one, but two.  The Global Breadcrumb appears in the upper left of a default SharePoint site, and it shows the site levels as a person delves into a site.   A very high-level breadcrumb.  

The Page Level breadcrumb is also included on the master page, wrapped in a content placeholder.   This allows the master page to provide default information, but allowing the pages to replace that default content with it’s own.  If on the page level you empty out that content placeholder, you can zero out the Page Level breadcrumbs.  Annoying.

Heather Solomon has a great writeup on breadcrumbs (shocker), which is well worth a read.  I particularly like the demo image she provides showing the difference between the two main providers you can choose from.

The next challenge with the breadcrumb is the site map provider it uses.  There are several available in SharePoint, and two that are used predominantly for WSS and MOSS sites in the breadcrumb.   The problem is the WSS one is great for lists and libraries, and the MOSS one is great for publishing pages.  But they each are not great for the other. 

Breadcrumb with site map provider best for WSS: 
<asp:SiteMapPath SiteMapProvider=”SPContentMapProvider“ id=”ContentMap” SkipLinkText=”" NodeStyle-CssClass=”ms-sitemapdirectional” runat=”server”/>

Breadcrumb with site map provider best for MOSS (publishing sites):
<asp:SiteMapPath ID=”siteMapPath” Runat=”server” SiteMapProvider=”CurrentNavSiteMapProviderNoEncode“ RenderCurrentNodeAsLink=”false” CurrentNodeStyle-CssClass=”breadcrumbCurrent” NodeStyle-CssClass=”ms-sitemapdirectional”/>

The main issue with the WSS site map provider is it will show directories you don’t want it to (mainly the Pages library) in the breadcrumb, and on some pages it will show “.aspx” on the end of the page name. The MOSS site map provider is more graceful, it just doesn’t show the list or library name in the breadcrumb.

There is also a great collection of reference links at the bottom of the post as well.

Poolie Studios has a nice collection off icons that he uses to iconify links.  This process is a fairly lightweight, unobtrusive way to show what your links are.

a[href$=".pdf"] { BLAH BLAH } is the core of the it all.  This CSS selector object (easily done via jQuery for older browsers) allows you to showcase exactly what your links are.

I’m not 100% positive that this is always a good idea, but this is a nice collection of icons that fit the link sizes, and thus I’m linking it to you.

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Okay, you’ve maybe seen the reports.  You know, Site Actions > View Reports > Checked Out To Me?

Did you know it’s not that impossible to add to that list?  All you really need to know is some CAML.  (I know this isn’t really about UI customization, but it’s still cool, so bear with me.)
To access the reports, go to your root directory, and click on Site Actions > View All Site Content.  The directory you’re looking for is called “Content and Structure Reports “.

When you click into this folder, you’ll see a normal list.  Let’s edit the report called “Checked Out To Me”.

Here are the fields  that we care about when you create a new report.

Report Title: What it’s called.  This can be anything.

Resource Id: both of them.   Don’t know why there are two.  (oh, apparently it’s an internal naming convention.  You can ignore it.)  Don’t use these.
CAML List Type: This is where you’d link it up to a list template here if you only want your report to search through a specific type.  You can get a list of the internal ID’s here.
CAML Query: The actual query.  I really find it easier to copy and existing one and modify it.

Target Audiences: If you were to target an audience with this report, you’d put that here.

Report Description: What the description of the report will be in the drop down.

The end result is a nice customization of the drop-down.   (note: Another site that talks about just this exact thing is located here.)

In typesetting, a widow is a single word on a line by itself at the end of a paragraph and is considered bad style.

Shaun Inman created a widget/do-dad that fixed this autmatically.  This was called Widon’t.  Now it’s been recreated in XSL, thanks to Oleg Kourapov.

Now given my recent Sharepoint leanings, you might wonder why I’m excited about this.  It’s the itemstyle.xsl.

The itemstyle.xsl controls a great deal of the MOSS  2007 outputs.  Most noticeably is the Content Query.

It seems by adding a line for this function into our itemstyle, we can control widows.  I’ll be playing with this shortly, should update you on how it turns out.

Eric Meyer, CSS Guru gives us a run down on some extreme CSS Reset. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults.

“That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.”

It’s a small chunk of code to simplify things, and make your life easier.  You should try this out and see if it’s for you.