Mule Design : Off the Hoof

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.

Welcome Pessimistic Phillies Fans*

I was 13 years old the last time the Philadelphia Phillies won a World Series. The next day the Sisters of St. Joseph were generous enough to let us make signs and walk up and down our block of Broad St. un-ironically singing Queen songs. It was a crisp October morning, we were World Champions, I was about to leave the confines of parochial education forever, and the future looked pretty good.

One month later Ronald Reagan was elected president.

The Phillies haven’t won a World Series since. I saw my city plunge into an abyss of despair and self-loathing. I saw our other teams come really, really close. There was even an NBA Championship in ‘83. But nothing else. We lost World Series’, Super Bowls, NBA and NHL Championships. Philadelphia isn’t about losing; it’s about having the rug pulled out from under you at the very last moment.

I live in San Francisco now, but as any of my friends will tell you, Philadelphians have an indelible stain on their souls; a distrust that anything is final until it’s actually final. Not only do we not count our chickens before they’re hatched, we’re convinced someone is about to steal our eggs. Probably family.

So as I sit here 5 hours away from a World Series victory, with our best pitcher on the mound, and 8 days from a Presidential Election, with the best candidate I’ve seen in my lifetime holding a big lead, I am utterly convinced that both will go wrong. I can’t help it.

Andrea Seabrook explored the inner psyche of what makes Philadelphians so pessimistic yesterday on All Things Considered. She even gave us a shout-out because of our “I’m Not Angry, I’m From Philly” t-shirt. The piece aired when we were up 2 games to one and you can hear how nervous the interviewees are. I can only imagine that after last night’s win they’re absolutely catatonic.

Why can’t us? Because we’re from Philadelphia.

And for the love of all that’s holy; PLEASE remember to vote next week. Unless you’re from western Pennsylvania; we were always right never to trust them.

UPDATE: Game 5 was suspended due to rain, taking our best pitcher out. God hates us. This is the best proof yet.

UPDATE: Wow. We did it! We REALLY did it.

* real fans spell it Phans.