Mule Design : Off the Hoof

Design & Banding

In addition to belonging to the design team of rockstars, I also belong to a rock band of designers. My all-designer band has taken a promiscuous attitude to our band’s online presence. We’ll make a band page on whatever new music site sounds worth the set-up time and see what sticks. Like the parent who overloads her kindergartener with too many extracurriculars, we’ve signed our band up for 20+ music sites. But there is only one web-related question we get from other bands and new fans: “Do you guys have a MySpace?”

Why is ugly, ad-heavy, slow-loading MySpace still the main site people go to to hear bands? Trendy teens and clueless entrepreneurs alike have moved on from the sleaze, but not bands. It’s still the main way our band gets listened to, connects with other bands, and sets up shows. After three years with an account and an unimpressive (by band standards) 40k+ views, we get contacted by bands from Berlin to Burlingame looking to play shows in San Francisco. It’s a popularity contest, I admit, that I subscribe too. If a band has less than 5k views, I’m thinking they’re babies at this band thing.

Why do people still use MySpace to check out bands? Consistency. I can go to Beyonce’s page and Simon Lebron’s page and find their songs in the same place. There is also a high chance of finding out who’s in the band, their next show, and contact information.

Until another site can boast every band’s info like this, I will be checking MySpace. With Ugh. As a designer, there are several sites out their that are furthering design in the name of music. Here are my three favorites:

The Sixtyone is like D&D for music snobs. Quests, levels, a “music adventure”: game on! T61’s straightforward, clean design doesn’t have a ton of personality, but the site interactions are very thoughtful. Press play in the header and you’ll see what I mean with the uninterruptible music player and friendly corner dialogs. Our reoccurring user success story that we haven’t seen on any other sites (except maybe YouTube)—we get rabid fans from T61. They email us saying they remember when we were just Level 7 and they have been there bumping us (a good thing) ever since. And then they show up to our shows and tell us some more! Flippin’ awesome.

Muxtape is an elegant beauty. The site’s most recent and totally legal incarnation allows indie bands, by invitation only [hot breath on nails], to build themselves a page showcasing their songs, about information, and likely some big photos of themselves all chopped up. I love how this site encourages user-created good design. Bands are confined to a 3x4 grid to fill with whatever they please, but really what more do you need? Since the good design on Muxtape requires no hacking, the designs are usually elegant and simple.

The Next Big Sound allows you to see how a band is doing in a nice little data visualization. It surveys the views, listens, comments, and fans a band has on a handful of big music sites. The real high-school fun happens when you can compare the popularity of different bands. The graphs is usefully colorful and easy to recalculate. Unlike the other two mentioned sites, this site isn’t as interesting to folks without bands. But bands beware—NBS can be a mood-altering substance.

So what have we done with our design freedoms and constraints on all these sites? Well, if you really must know—here is my band, My First Earthquake, are on all the mentioned sites: The Sixtyone Muxtape Next Big Sound Myspace

And totally within our own control: Our site

Writing CSS Efficiently

For the last few projects we’ve done at Mule, I’ve been able to work closer with the clients’ implementation teams than I sometimes do. They were building the site (or application) as I coded, which meant I got nearly instant feedback about whether or not a particular technique was going to work in their environment and could go back and change things on the fly. As a result I had to be particularly organized about how I set up my code — so I could find things quickly — and really careful about how I used classes vs IDs and how tricky I got with my code. These are just a few little observations that I made and have changed or not changed my habits accordingly.

Note: This is about writing your CSS in a text editor, not a CSS-specific editor.

I’ve always opted for a minimum number of stylesheets, versus splitting things like fonts and colors into separate stylesheets, for a couple of reasons. First, I think for the most part the combination of today’s average Internet connection speed and the average person’s browser cache settings, one large HTTP request is better than several small ones. Secondly, I don’t like jumping from document to document. I’d rather have it all right there in front of me in one big chunk (with the exception of IE-specific style overrides).

The organization of that big chunk is something I still tweak on every project: For the most part I put styles for basic HTML tags (no classes or IDs) at the very top, then the big content sections (wrappers, banner, content, footer), then break it out into sections by the name or type of template. That’s mostly for my own cognitive convenience, and it’s worked really well for me for years.

However a couple months back I saw a tip on some site (that I’ve unfortunately forgotten now, so I can’t give credit) that made a huge difference in how I work, given how laughably obvious it is in hindsight:

Alphabetize your CSS properties within your selectors.

Duh, right? In the past, I would just tack properties on to the end as I went, although I would sometimes group things in a way that made some kind of internal sense like this.

a {
    color:#ff0;
    text-decoration:none;
    display:block;
    width:100px;
    height:15px;
    padding:2px;
}

Then when I went looking for something I’d always spend time digging through lists of properties that would be in whatever order made sense at the time that I wrote them.

Now I know exactly where “height” is going to show up not only in relation to “width”, but to “color”, “position”, and “z-index”. (If I use any of the -moz or -webkit properties, they go at the end of the list.)

I was amazed and chagrined at how much sense that one practice made, but there’s a secondary effect to using it:

Keep all your properties for a given selector on one line.

I can now easily keep all my properties on one line instead of having a line-break and a tab for each property, which makes the far left column of my stylesheet a breeze to scan.

a { color:#ff0;display:block;height:15px;padding:2px;text-decoration:none;width:100px; }

Indent descendent selectors beneath their ancestors for some visual grouping.

If I have a bunch of styles specific to the footer (for example), I’ll format them like this:

#footer { ...properties... }
    #footer ul { ...properties... }
    #footer p { ...properties... }

I only ever indent one level because more than that and the indenting starts to become less efficient. This isn’t something that’s going to have complicated nesting like HTML can; it’s just a way to chunk up the stylesheet for scanability.

Code for IE6 as you go.

I’m happy to say that as a team, we at Mule are pretty darn good at designing sites that look fantastic while maintaining cross-browser consistency without getting into a bunch of stupid hacks. Sure, I’d love to say we’ve just stopped supporting or at least coddling IE6, but the sites we build have audiences that still use that browser in large numbers. Plus, most of the things that I end up having to fix for IE6 are required for its almost-as-bad sibling, IE7. So between those two, yeah, I end up having a few things that go into stylesheets loaded with conditional comments.

On one of our recent projects I decided to take the approach of “Make it right, then make it work in IE”. While that absolutely sped up the “make it right” period, the “make it work in IE” period was kind of drag because we had to go back and change some HTML that the dev team had already incorporated into their CMS. In this case it was a fairly easy fix, and it was only in one place, but if I had followed my usual rule, we wouldn’t have had to do it all.

So keep your problem children handy and if you do something in your code that you’re not sure about, check them right away.

If you have separate stylesheets for Internet Explorer, keep your selectors in the same order as the main stylesheet.

As with the alphabetizing of properities, this might seem like a no-brainer, but my habit has been to just add selectors to the bottom of the IE stylesheet(s) as I go (at least in those cases where the cascade wasn’t important). And while these stylesheets are rarely more than 10 or 15 lines, it’s more about handing things off to someone else in a way that doesn’t look like I just dumped a bunch of stuff in a box at the last minute.

These probably won’t save hours on any given project, but they will allow to think about something besides “Where the hell is that rule?” and it will definitely be easier to hand things off to the client at the end of the project.

WordPress Plugin for Six Apart Services

We were happy to learn that friend of Mule Art Wells worked with our friends at Six Apart to develop a new WordPress plugin that gives WordPress users access to several Six Apart services: TypePad AntiSpam, TypePad Connect (6A’s commenting and community tools), Six Apart Media (6A’s advertising network), and Blogs.com (6A’s blog directory).

If you know our work, you know we’ve done a lot of work with Six Apart: we’ve worked on their corporate site and the most recent versions of both TypePad and Movable Type, plus we’ve built a lot of sites using both of those products. We’ve also worked spent our fair share of time working on sites powered by WordPress. We think both platforms are great, and we’re happy to have both of them in our arsenal of tools. This kind of integration strengthens both and we think it’s a really fantastic move for Six Apart to make.

And nice work, Art!

Bookmarkable Tabs with jQuery UI

Tabs have proven to be a reliable and intuitive interface model for web pages that contain related content. But depending on how you set things up, tabs have one serious flaw: They frequently make it difficult or impossible to bookmark a specific tab. That is, if you have a page with five tabs on it, and I want to send someone to that page with specific tab showing, how do I do it?

We ran into this issue on a recent project. The client had two specific requirements for using a tabbed interface on some of their pages:

The URL in the browser’s address bar must update when a tab is clicked, so that your normal web user would see that each tab has a unique URL.
If someone sent that link around, the page would load with the correct tab content exposed, and move to the tabbed area, while leaving the tabs themselves visible so that a new visitor would understand that the were looking at only part of the page.

Working with the client’s implementation team, we had already decided to use jQuery for the site’s JavaScript, and further to use the jQuery UI scripts because they provide quite a bit of funcitonality that we wanted. Unfortunately, jQuery UI’s tab widget failed both of our requirements.

To be clear, if you use jQuery UI tabs, and someone figures out how to send around a tab-specific link, the page will load with the correct tab exposed. But it loads the page at the top of the tab content area instead of at the top of the tabs themselves. So someone who’s never visited the site before would have to scroll up to realize that there are other tabs that might contain content they’d also be interested in.

The bookmarking issue is one refered to directly on the jQuery UI pages. The script that was adapted for the tabs widget used a history plugin that needs some rewriting, and the jQuery UI team has not had time to update those scripts.

Fortunately, the jQuery scrollTo plugin and its related localScroll plugin solved both of our problems quite nicely. Those plugins provide some very slick functionality for sliding users around on web pages, but we’re going to use them in a much less flashy way.

Loading the Plugins

As with any jQuery plugin, you can keep the scripts in separate files and load them all as needed, or you can gang them up in one file. It depends whether your set up benefits from a slight larger file and fewer HTTP requests (if you’re using the plugins on all or most of your pages) or from having smaller, more discrete files.

Just make sure the plugins are loaded before or with your site’s JavaScript file.

Creating the Tabs

All of our calls happen within document.ready() function.

First we’ll create the tabs using the normal jQuery UI technique. In this case, we’ve wrapped the tabs ul and related divs in a div with a class of “tab-set”.

$(".tab-set").tabs();

Getting New Visitors to the Correct Tab

Next, we want to see if we need to load a specific tab. We’ll check to see if the page we’re on has a “tab-set” div, and check the URL to see if there’s a hash on the end of it. If yes to both, then we use the scrollTo plugin to jump us down to the “tab-set” div — which keeps the tabs visible — while relying jQuery UI’s default behavior to show the correct tab content.

if($(".tab-set") && document.location.hash){
  $.scrollTo(".tab-set");
}

Creating Bookmarkable URLs for the Tabs

Once a user is on the page, we use the localScroll plugin to update the URL in the address bar while keeping the page from reloading.

$(".tab-set ul").localScroll({ 
  target:".tab-set",
  duration:0,
  hash:true
});

What that says is “Scroll to the div ‘tab-set’ instead of the target of the link itself, do it with no animation, and add the hash to the URL”.

That’s it! All requirements met.

Demo Pages

Default jQuery UI Tabs

http://muledesign.com/demo/tabs/default-tabs.html
Be sure to click on the tabs and check your address window.

Then the same URL with a hash on it, which you would find if you understood right- or control-clicking, but the average web user might not:
http://muledesign.com/demo/tabs/default-tabs.html#comments

Bookmarkable jQuery UI Tabs with scrollTo and localScroll

http://muledesign.com/demo/tabs/bookmark-tabs.html
Again, be sure to click on the tabs and check your address window.

And then with the hash on it, which URL is available either with the right/control-click or by copying and pasting your address window.
http://muledesign.com/demo/tabs/bookmark-tabs.html#comments

Links

jQuery: http://jquery.com/

jQuery UI: http://jqueryui.com/

scrollTo Plugin: http://plugins.jquery.com/project/ScrollTo

localScroll Plugin: http://plugins.jquery.com/project/LocalScroll

Last Year's Model

I like records. LPs. They sound great. And for all the awesomeness of carrying most of your music around on a little tiny white brick there’s nothing quite as satisfying as dropping a needle on vinyl.

That said I have all the standard-issue geek stuff, and when Nintendo released their new DSi last month I tried to justify buying one as I stared at a fat stack of still-working-just-fine DS’s. Usually it’s something like “I bet there’s some cool interaction design in that thing. I’d be remiss to my craft if I DIDN’T get it.” That reminds me, I need a Kindle.

A few weeks ago I had the pleasure of working with my friend Anil Dash on Last Year’s Model; a little one-page site with the big idea that you don’t have to automatically upgrade to the latest version of stuff just because it’s new; not if the one you have still works just fine.

I threw the design together in an afternoon, mostly using stock art I’d purchased for other projects and after being inspired by a wall of Amazon Prime boxes in the office. Ironically, my new MacBook Pro exploded right after designing this and I had to take it into the shop. As I pulled out my backup laptop I couldn’t remember why I’d replaced it.

(Posted with MT 3.36; cause it still works just fine.)

Because fair is fair...

After 14 years of crushing the musicians’ spirits with ‘meh’ and ‘fail’ reviews Pitchfork has created something THEY care about.

I’m giving away a bucket of Mule t-shirts to whoever can write the most Pitchfork-like review* of Pitchfork’s redesign.

Leave your review in the comments. We’ll know when we have a winner. Might have a few.

Please enjoy yourselves.

* Here’s a random sample.

Let's make lists!

Andre Torrez is one of the most talented individuals I have the pleasure of knowing. Apart from staying busy at his day job he always has about 15–20 good ideas going on in various states of development. When he launched Listable in late January I really liked how simple and straightforward it was. It’s a simple list-making site.

I asked him if I could help him design it further and he said “sure!” So Andre, Dave and I spent an evening redesigning the site and coming up with a couple of ideas for things to throw in over time. It took about a week to get all the pieces in place because of our day jobs, but I love the results.

Something about getting a very small group of people together under a very short deadline just works. Let’s do it again, Andre.

Here’s some of my favorite lists. Read them and make your own:

Get Plinky!

Now that the election is over, and the holidays are over, and capitalism is over, you know what the world needs?

…something to talk about, something delightful.

What the world needs now is Plinky!. Fortunately, it just launched. And you can get in there right now.

Plinky gives you a prompt. It could be a question, a poll, a challenge. You write a response. Your friends write responses. You read them. They amuse you. You discuss them. There, your day is a little better and so is the interweb.

We had the absolute pleasure of providing our design services to Plinky. Ryan Freitas and Jason Shellen, and the whole rest of the team, are hell-bent on inspiring people to amuse and enlighten each other. Especially those people who are intimidated by “professional bloggers” (They discuss their cats with such passion.)

So, take a look. I think you’ll like it!

MediaShift and Idea Lab

Everyone loves a good launch, right? Two of our recent projects have launched: MediaShift and Idea Lab. Both sites are run by Mark Glaser in partnership with PBS and the Knight Foundation and both are focused on how new media are changing old media, specifically in the realm of news and reporting. Where they differ is in perspective. MediaShift is reporting on those changes, whereas the authors of Idea Lab are initiating them. Each author on Idea Lab is a winner of the Knight Foundation’s Knight News Challenge. Both blogs are sharp and worth following.

Mark’s attention to detail and enthusiasm for his work made both of these projects really fun to work on. Congratulations to everyone involved!

Oh, Burger King. You and your wacky marketing team.

Burger King has had its marketing stake firmly in the "Well, not really WEIRD, but definitely ODD" ground. They recently launched a Facebook app that shows a fantastic grasp of social networking and how to have fun with it. It's called "Whopper Sacrifice" and if you use the app to de-friend 10 people on your Facebook list, you get a coupon for a free Whopper. The best part, though, and what really makes it, is that the people you de-friend are notified that they've been de-friended so you can get yourself a burger. Will people use this as an excuse to prune their lists? Or will they de-friend their 10 best friends, the ones who would be understanding, and re-friend them later?

And why the hell am I using "friend" as a verb? Stupid Web 2.0.

Anyway. Click through for a video of Mike cementing his relationship with ~~Anil~~ Sippey.

Free Food for Thought

Better information leads to better design decisions. The more you know about the audience, the context, and the opportunities (and apply this knowledge) the more likely it is that you will meet a real need and do it well, even creatively.

Research can be very expensive, particularly quantitative research. For this reason, one of my very favorite resources is the Pew Internet & American Life Project. Their work “explores the impact of the internet on children, families, communities, the work place, schools, health care and civic/political life.”

They produce some very useful reports based on phone surveys and qualitative methods that can balance out the hype and hysteria from news and media sources.

If you are designing an online product or service, particularly for an American audience, you will find something useful there. They cover everything from attitudes about health information to voter engagement and video games.

For a fun diversion, start with The Future of the Internet III, which is the output from a survey of “thought leaders.” Apparently everything online is going to get more awesome, but people will still be jerks.

Happy Holidays!

Rebecca Bortman, one of the rising stars here at Mule, is not only a great designer, she’s a total rock star. We were lucky enough to have her band, My First Earthquake, play at our holiday party.

They’re awesome. They’re fun. If their new video doesn’t cheer you up I’m not sure what will. Happy Holidays, everybody.

Because the Web is Made of Words

We are delighted to announce the launch of the website we designed for Brain Traffic, a leading content strategy agency.

This site is lively and engaging and contains not one single unnecessary image. Our design is intended to help them convince potential clients of the power and importance of using words well on the Web. You know what does that? Making the design about the words and making the words look really good.

At the heart of the site is the portfolio. Enjoy the grid and hierarchy that frame their expertise.

The Disposable Film Festival

In a city with more film festivals in a year than weekends, I’ve found an extra special one. The Disposable Film Festival premiered in San Francisco last January and celebrates films made on non-professional filming devices that showcase the potential of this portable medium. The growing device list includes webcams, digital still cameras, and cellphones. Over the last two years, the festival’s received submissions from 30 countries including hair-raising camera stunts, heart-stirring moving snapshots and jaw-dropping unscripted moments captured by professional and amateur filmmakers alike.

I’m lucky enough to do the design and artistic direction for the festival. Like many dream projects, the festival’s team of four San Franciscans and one Vancouverite puts in time after our full time jobs and in exchange for smiles and beers. I get a big dose of my favorite things about design: I learn so much about the subject matter. Among other things, I can now answer questions like, “How do I make a film for $20?” and “What’s it take to put on a multi-city film festival?” with confidence and personal experience.

This exciting Thursday, I’ll be in New York City with the festival co-founders, Eric Slatkin and Carlton Evans. We’re presenting selections from the 2008 program along with a feature-length disposable film at Anthology Film Archive. For more details, I proudly refer you to The New York Times! If you are in town, I hope to see you there. If you are in San Francisco, ready yourself for the 2009 festival. It’s coming in January.

PS: I’m not only the president of Hair Club for Men, I’m also a client.

Khoi Vinh on Social Networks

For many months, my position has been: email me and instant message me all you want, but please, whatever you do, don’t make me sign into Facebook. It’s just too much of a drag.

I completely share Khoi’s attitude here. There’s a couple of social networks that I’m completely addicted to; Flickr and Twitter, but apart from that they seem like something for the younger more social set. Hence the name I suppose. However as a professional in the field I find that I need to keep up with this stuff. Khoi goes on:

I admit that’s a bad attitude. Actually, it’s an irresponsible attitude for someone who purports to be a forward-looking designer. It’s a disservice to my colleagues and my employer, to begin with, as it basically amounts to sleeping on the job.

Read the whole thing. He’s as good a writer as he is a designer.