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.

Written by David McCreath on May 26, 2009 with 1 comment |

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!

Written by David McCreath on May 16, 2009 with 1 comment |

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:

1. 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.
2. 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

Bookmarkable jQuery UI Tabs with scrollTo and localScroll

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

Written by David McCreath on May 11, 2009 with 5 comments |

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.)

Written by Mike Monteiro on May 5, 2009 with 0 comments |

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.

Written by Mike Monteiro on March 12, 2009 with 6 comments |

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:

• Words it is not OK to ever say.
• Panda Gifts I Have Recieved
• Best Shapes
• Retired Crayola Colors
• Names for My First Earthquake’s next album

Written by Mike Monteiro on February 27, 2009 with 0 comments |

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!

Written by Erika Hall on January 23, 2009 |

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!

Written by David McCreath on January 13, 2009 with 0 comments |

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.

Written by David McCreath on January 8, 2009 |

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.

Written by Erika Hall on January 5, 2009 with 0 comments |

Archives