JeffCroft.com: Latest blog entries

Foursquare versus Gowalla, round two

Jeff Croft — Mon, 08 Mar 2010 09:48:17 -0800

A year ago, two exciting location-based social games launched at South By Southwest Interactive, the annual geek-fest that is something of a mecca for web nerds. After playing with both down in Austin, I wrote a blog post entitled A look at Foursquare and Gowalla. Although the post didn’t generate a ton of discussion, it is still consistently near the very top of my most-viewed-posts stats. A year ago, location-based social games were something of a novelty — now, they’re the hottest thing going.

So, I thought I’d post a follow-up, letting you know what’s changed, why these two games may not be as similar as you think, and which I personally prefer.

The basic premise

At a glance, the two games work in a very similar manner. Both are social networks, so you’re connected to your friends (note that when I wrote the original article, Gowalla was not a social network). Once you’ve established your friend relationships, you go out into the real-world (say, to a bar or restaurant), whip out your phone, open up either app, and “check in” to wherever it is you are. As you check in, you can (optionally) let your friends know where you are, and/or post the details of your checkin to sites like Twitter and Facebook.

Everyone loves to say these games are direct competitors (and they may be when it comes to business models and revenue), but in terms of user experience, that’s where the similarity ends. From here, the gameplay of each is strikingly different in several key ways.

For end users, I think the question “Should I use Gowalla or Foursquare?” is silly. There no more reason you can’t happily play both games than there is reason you can’t own both Monopoly and Scrabble.

So, what’s different?

Note: I’m an iPhone user, and as such, my comments apply to the iPhone version of each game. Both games are available for other platforms, such as Android, but I don’t personally have experience with them.

Also note: I’m focused on the user experience and gameplay of these two games — not on their business models. You can find countless articles out there that compare the two in terms of potential money-making ability, if that’s your thing — for the most part, this isn’t one of them.

Foursquare gameplay

Foursquare’s gameplay is centered around three basic axes: “badges”, “mayorships,” and the “leaderboard.” Badges are virtual achievements you receive for reaching some kind of milestone. Some are very simple. For example, you’ll receive an “Explorer” badge when you check in 25 different venues. Others are more complex; you can get the “Player Please” badge by checking into a venue with three members of the opposite sex. Foursquare’s badges tend to be geared towards nightlife and partying (although not exclusively so). There are a ton of badges, and they’re constantly adding more, so the chances of you ever “completing” the game are slim to none. Running around trying to earn badges is fun, but in my opinion, less compelling then the another angle to Foursquare’s gameplay: mayorships.

Everyone’s got their favorite spots. Whether it’s your neighborhood bar, your local coffeeshop, or the airport, everyone seems like they’re somewhere all the time. On Foursquare, the person with the most check-ins to a particular venue over the past 60 days is crowned the “mayor.” Two factors make mayorships more exciting than badges (to me, anyway):

They encourage you to meet the other regulars in your favorite spot. For example, if you go to Kate’s Pub all the time, and someone name “Jennifer S.” is the mayor, you may be encouraged to figure out who Jennifer is and introduce yourself.
Mayorships are fun because you don’t just have to get them — you have to keep them. Whereas badges are one-time achievements, you can lose your favorite mayorship as quickly as you got it. So, there’s an ongoing incentive to keep checking in.

The final aspect to Foursquare gameplay is the leaderboard. As you check in to venues, you earn points — the leaderboard shows who has the most points of your friends, and in your area. Frankly, it’s not very compelling and I don’t think anyone really looks at it.

Foursquare has the concept of “specials,” which are deals they’ve made with businesses to incentivize checking in (and thereby, visiting their business). For example, you may check into a coffee shop and find that the mayor there gets a free coffee once a month. Or, you may check into a hotel and find that you are entered into a drawing to win a free night’s stay. On the surface, this seems exciting, but I’ve yet to find any specials that were incentive enough for me to physically go to a place and check in.

Foursquare’s game play tends to be very much about competing with your friends (for mayorships and leaderboard postion), which is different than Gowalla.

For me personally, Foursquare was fun for a while, until the people I played with (myself included) started cheating (more on this soon). It’s a well-done product, if a bit on the simple side.

Gowalla gameplay

Gowalla’s gameplay is a bit more complex than Foursquare’s. As you’d expect, this complexity may turn off new users, but also may appeal strongly to those who are really into gaming. Gowalla features several aspects: “stamps,” “items,” “pins,” and “trips.” Let’s go over each:

Each time you check into a spot on Gowalla, you receive a stamp (akin to a stamp in a real-life passport). A stamp is an well-fashioned icon representing wherever you are (note that Gowalla was formed from a design company that focused on creating gorgeous icons, so it’s no surprise that the entirety of the game is orders of magnitude more beautiful than Foursquare). Usually, these stamps are generic to the type of spot you have visited — an Asian restaurant is a pair of chopsticks, a salon is a comb and scissors, etc. However, Gowalla also has the concept of “featured spots,” for which they hand-craft truly stunning stamps. Featured spots are generally major sights and attractions, such as The Space Needle, the Golden Gate Bridge, etc. The idea, of course, is to collect as many stamps as you can by visiting as many spots as possible — it’s a bit like geocaching. Collecting stamps, especially the featured ones, is fun — but isn’t the most compelling part of Gowalla, in my opinion.

Next up: items. When you check into a spot on Gowalla, you may be lucky enough to find some available items. Items are, again, gorgeous hand-crafted icons representing all sorts of objects — everything from a drumset to a tour bus to an espresso machine to a beatnik poet. Once you have an item, you can hang onto it, or you can “drop” it at another spot, for other users to find. Each spot you check into may have items that have been dropped there, and you can always swap an item you have for one that’s laying around at the spot you’re at. Items are fun because they have history attached to them. You can drop an item at Kate’s Pub, see your buddy pick it up, watch them drop it at Boxcar Alehouse, see someone you don’t know pick it up, watch them drop it at The Space Needle, see a tourist from the midwest pick it up and take it home, dropping it at Kansas City International Airport. It reminds me of old favorite Where’s George, and I think it’s pretty fun to see where the items you’ve picked have been and who’s hands they’ve been through. Gowalla is just starting to explore a really exciting feature of items: virtual goods that can be redeemed for real-world things. Gowalla has a deal with Incase, makers of laptop cases and backpacks, whereby if you check into an Apple store, you may find a special Incase backpack item that can be exchanged for the real thing. Just today, Gowalla announced a partnership with the Travel Channel to offer virtual goods at featured locations. No doubt Gowalla will be doing more of this, and I think it’s a pretty compelling incentive to play the game.

Gowalla has “pins,” which are similar in many ways to Foursquare’s badges. They’re achievements awarded for certain milestones, such as visiting 10 coffeeshops or creating 50 new spots. Frankly, Gowalla’s pin assortment is uninspired, and seriously lacking when compared with Foursquare.

Finally, Gowalla lets users string together spots into “trips,” and you receive a pin for successfully visiting each spot in a given trip. Conceptually it’s a great idea, but as the tools for users to create trips have only been available for a month or so, there aren’t yet a lot of really cool trips, at least in my area. I expect that to change soon, and for trips to become one of the most engaging features of Gowalla.

Gowalla’s gameplay tends to be less about competing with your friends and more about personal achievements. You’re trying to collect stamps, pins, and items, but there’s no direct competition with your friends in the user experience — a distinct difference from Foursquare. Gowalla is, very much, digital/virtual geocaching.

Spot creation

Another key difference between Gowalla and Foursquare is how they handle spot creation. When you create a venue on Foursquare, you do so by entering its address. On Gowalla, spots have no address associated with them — instead, they have GPS coordinates. The repercussions of these differences are many:

Gowalla requires GPS to play. Foursquare is enhanced by GPS, but doesn’t require it. This means Foursquare has a larger potential audience, because it works on devices that don’t have GPS hardware. It also means Gowalla works better outside (GPS signals can be weak indoors), whereas Foursquare works equally well inside and out.
Gowalla is capable of having spots which are not addressable, and which are very precise points on the Earth’s surface. This, again, points to its geocaching nature. You can create a spot for that really wicked tree in your favorite park, or your mailbox, or the trash dumpster where your favorite bum spends most of his days. The net result of this, is potentially, some very interesting trips. Whereas Foursquare could only have a spot for Woodland Park Zoo in Seattle, Gowalla could have a trip called “Woodland Park Zoo Sights” featuring 50 cool things to find inside the zoo.
Foursquare has no way of verifying you are where you say you are. Because of this, it’s easy to check into a venue on Foursquare, even if you’re hundreds of miles away. Gowalla, on the other hand, enforces the integrity of the game by not allowing you to check into a spot until your GPS reading shows that you’re actually physically there (or at least very close). Which leads me to…

Cheating

Because the Foursquare iPhone app (and, presumably, their apps for other platforms, as well) lets you check into venues regardless of if you’re there or not, and because there’s strong incentive to do so (earning mayorships, getting access to the various specials available for checking in, etc.), cheating is rampant on Foursquare (I use the word “cheating” loosely, as if the app allows you to do it, maybe it’s not cheating — but I think we can all agree it’s against the spirit of the game to check into a place you’re not physically at).

For me personally, this ruined Foursquare. I was really enjoying the game for a while, competing for mayorships with my friends, until I started to see people checking in one place, and then checking in five miles away immediately after. It really affected my motivation to compete at Foursquare. Also, if I were a business owner trying to set up a special with Foursquare, this would be a serious concern for me. Unfortunately, I don’t think most of the businesses doing specials even realize I can easily become the mayor (and reap whatever benefits you’re giving me) without ever setting foot in their establishment. I think, at some point, Foursquare’s lack of enforcement that you are where you say you are is going to come back to bite them in the ass. But we’ll see.

Gowalla doesn’t really have this issue, because the app requires access to your GPS and ensures you are extremely close to the place in question before letting you check into a spot (and thereby, receive any special items that may be available there).

Check-in culture

There’s an interesting cultural difference between the two apps, as well. On Gowalla, with its geocaching roots, it’s fairly commonplace for someone to walk down the street and check into each and every spot they pass. This is encouraged by the gameplay, which rewards you with items, stamps, and pins for doing so. The Gowalla community, for the most part, doesn’t seem to frown on this type of usage. When a friend checks into a the neighborhood bar on Gowalla, there’s no expectation that they’re staying there for any length of time — they may have just been passing by. Also, it’s not uncommon to see Gowalla users checking into a sculpture, a fountain, a quirky landmark, or a bridge.

The Foursquare community, on the other hand, considers this to be a serious faux pas. When you check into a venue on Foursquare, you are, effectively, saying to your friends, “hey, I’m out and about — come join me!” Clearly, indicating that you’re at the neighborhood bar and then not actually being there when your buddies show up is not going to win you many brownie points with your friends. Likewise, the Foursquare community (in my experience) strongly frowns upon checking into places like sculptures and bridges (if you even can, which you often can’t, because they’re not usually addressable). It makes sense, in that if you’re checking out a sculpture, you’re probably not inviting all your friends to come join you.

I’m not making a judgement on which of these mentalities is better — just a casual observation about the culture of check-ins on each game.

The bottom line

Both Foursquare and Gowalla have made great strides over the past year. Notably, Foursquare now works all over the world (whereas it only worked in a handful of US cities on launch), and Gowalla now sports a social network (where it did not at least year’s SXSW). Both have expanded to other platforms beyond iPhone, and both have started making special deals with business. Both do a great job of notifying your friends where you’re at, if that’s what’s important to you (for me, it’s more about the gameplay). And both have received a ridiculous amount of buzz in the press, usually setting them up as strong competitors to one another in a “which one is going to win?” fashion.

I’m here to say that I don’t think one has to win. Monopoly and Life are both games that seem similar on the surface, but they’ve both been best-sellers for decades. I expect both Foursquare and Gowalla to succeed and prosper, and I expect many more location-based social games to bubble up, as well (especially if the rumor that Facebook is adding places/checkin functionality to their API is true). There’s plenty of room in this space for more than one game.

For now, I personally prefer Gowalla, largely because of its design sensibility, its ability to have non-addressable spots, and the fact that it discourages cheating by enforcing the integrity of check-ins with GPS. But, both are solid products and worth a play if you’re interested in mobile social games that encourage you to get out and explore your world instead of staying home with your face buried in your monitor.

But wait, there’s more!

Update, 3/10/2010: Predictably, a couple days after I wrote this, both Foursquare and Gowalla released significant updates to their iPhone apps.

Foursquare has some nice design changes, both in terms of usability and aesthetics. They’ve simplified the check-in flow a bit, and are now using icons to indicate different types of places (these are useful, but not to be confused with Gowalla’s stamps, which indicate the type of place while being beautiful enough to be a collectible, of sorts). You can also now see your check-in history, which is a nice touch. Visually, Foursquare is much more attractive than it was before, no doubt — but I’ll still give Gowalla the edge on design.

Gowalla made much more sweeping, significant updates in their 2.0 version. They’ve also refreshed visually, and as you’d expect from these guys, it’s stunning. They’ve made a significant change in that the “Activity” tab is now the default view, rather than “Passport.” I think this is an indication of Gowalla putting a bit more focus on the social networking aspect and a bit less on the game aspect (which probably makes sense from a business and growth perspective, but I prefer the old way, personally). They’ve also added some significant new features. You can now comment on other users’ check-ins. You can now attach photos to your own check-ins (a shot across the bow to Brightkite, I’d say). And, in response to a feature request I made long ago, you can now add a check-in message (and post it to Twitter/Facebook) after your initial checkin. Finally, Gowalla adds a “hot spots” feature, which is (presumably) a lot like Foursquare’s “trending” — showing you places near you that are currently active with a lot of Gowalla users. Some nice updates for both apps, but there’s no doubt that this is a refresh for Foursquare, and a really significant new update for Gowalla.

Building BarStar

Jeff Croft — Wed, 03 Mar 2010 11:46:09 -0800

Over the past few months, I’ve spent a lot of my free time working on a personal project centered around a social activity I’ve become pretty passionate about: karaoke. Karaoke? Yes, karaoke. Why? Because it’s fun, dammit. I could write a whole separate post on why I love karaoke and what makes a great karaoke performance, but my boy Jon Culver already did, so just read that, instead. But I did think I’d take a few minutes to write about the process of building BarStar, and how it came to be.

Back when I was at Blue Flavor, Keith Robinson had this idea for a simple iPhone app. We were calling it “karaoke finder.” All it was really supposed to do was use your physical location to tell you where some karaoke is going down tonight near you. Simple, but very useful, especially for those of us who travel and want to find karaoke in a city we’re not familiar with. The idea kind of died as Blue Flavor fell apart last summer.

Separately, way back in May, my good friend and fellow KC-to-Seattle transplant Scott Phelps and I had the idea to somehow make a karaoke game. Both of us were (and are) very interested in real-world social games like Foursquare and Gowalla, and wondered if such an idea could work for a niche hobby, like karaoke.

For months we talked about the game while perched on barstools listening to bad singing, but didn’t really do much else. At some point, I remembered the “karaoke finder” idea and realized the two could be merged into a single concept that might be both useful for the casual karaoke’er just looking for a place to hang out, as well as the serious singer and social web geek. We always knew (and still know) that such an audience may be hard to find, but we ultimately felt like it was worth a shot — if it ended up that no one gave a shit and we just competed against each other, that’d be good enough. Scott decided it should be called “BarStar,” and we were off to the races.

Sometime late last year, I started building. It was slow going — I was just working in my spare time. But eventually, I had enough of a concept together to try actually playing the thing with my friends. We’ve got a pretty good-sized group of karaoke fanatics up here in Seattle, and we figured if they liked it, it was worth pursuing. Since then, Scott and I have built something I’m pretty proud of. To date, I’ve done most of the technical work, and Scott’s been a great “idea guy.” I’ve had a bit more free time than him, so this arrangement has worked out really well for us.

We loved the idea of building native apps for iPhone, Android, etc., but since we’re web developers, we decided to build a web version of the game (targeted at mobile WebKit) first, and if that takes off, we may build native versions, as well.

The karaoke finder

In order to do such a location-aware game, we were going to need a database of karaoke joints. At first I considered using data from an existing source (Yelp, Gowalla, Foursquare, etc.), but quickly realized if I really wanted to have a killer database of karaoke venues, I needed karaoke specific metadata that none of these have. For example: what nights does this place have karaoke? When does it start? Who is the KJ (karaoke slang for “host”)? Also, I wanted people to be able to comment on/review venues, and I wanted those reviews to be karaoke-oriented. For example, I hoped people would comment on the KJ, on their song selection, on the stage and sound setup, and so forth, more than on their happy hour specials and how strong their drinks are.

So, I decided we needed our own database. We wanted it to be as accurate as possible, and I ultimately decided the way to do that was to give users free reign over it. So, anyone can add a venue and anyone can edit venues that already exist. So far, it’s worked nicely.

With a little UI work on top of that, we quickly had our “karaoke finder” bit done, and it’s now super easy to find out where there is karaoke going on around you.

The Game

If you’re familiar with Foursquare, you’re familiar with a lot of the gameplay constructs in BarStar. Basically, it works like this:

Users “check in” at a karaoke venue.
Once checked in, they log their performances, noting what song they sang.
Other users can then rate and comment on their performances.

From there, we have both achievements and competition with other users:

Users earn various “awards” for their performances. For example, if you perform five times in one night, you earn the “Sore Throat” award. If you perform in ten different cities, you get the “On Tour” award. And so on.
Using a top-secret, industrial strength algorithm, we give each user an overall score. The algorithm factors in everything from variety of songs, to size of your audience, to how high your ratings are, and much more. Then, we compare users in a leaderboard we call the “Top 40.” You can also try to be the top performer for the past 30 days at your favorite venue (we call this “BarStardom”) or of your favorite artist’s songs (“RockStardom”) — these are sort of our take on Foursquare’s “mayor” concept.

Around the time we really started working on this, something was happening on Foursquare that was bugging the hell out of us: people were cheating. That is, people were “checking in” at places without really being there, in an attempt to become the “mayor.” This is still a rampant problem on Foursquare, and frankly, I think it’s something they’ve got to fix if they want businesses to take them seriously as a marketing tool. We really wanted to ensure our app was built in a way that didn’t make it so easy to cheat, so we came up with a couple core principles of our gameplay:

“Checking in” would never net you any kind of credit. In BarStar, you get credit in the game for doing something — like making a fool of yourself in front of a lot of people. Just being there isn’t enough.
Karaoke performances would have to be verified in order to count for any credit in the game. We went round-and-round about different ways to verify that someone actually performed in public, and we ultimately decided on a simple one: let other users act as “witnesses.” So, in order for a performance in BarStar to be meaningful, at least one other user must say, “yes, I saw it.” If a tree falls in the woods and no one is around to hear it…

Of course, this doesn’t entirely prevent cheating. There’s no way to entirely prevent cheating. But, we think it does a pretty good job of discouraging it.

So, there’s no question the gameplay is inspired heavily by Foursquare, but we feel like we’ve put our own twist on it in several key ways, and we’ve got some more planned, as well.

On building for mobile

This is the first mobile app I’ve really built. I’ve done a few small sites here and there, but nothing as complex as a game. It’s been a fun challenge. I started building with my usual process, which made everything very page/document-based. It worked fine, but all the page refreshes were starting to feel really slow when using it on a mobile device as intended. In an effort to reduce the number of pages, I started loading up the five core pages with more and more information. This worked fine from a UI perspective, but actually backfired on me: eventually, those five pages became heavy enough that the experience felt slower than having the page refreshes I was trying so hard to avoid. So, I back-tracked and re-architected a lot of things to be more dynamic, loading only what is needed via Ajax. This ultimately has worked out pretty well. There’s an interesting balance to be reached, here, for sure.

I’ve really enjoyed building and designing for mobile, and I hope to do a lot more of it.

What’s next?

Today, BarStar is still labeled as “in beta,” but it’s open to the public for registration, and we’re getting lots of new users every day. We’ll be removing that beta label soon, and then we’ll get to work on the rest of our plans, some of which include:

A Desktop Site: We want to build a companion site for viewing on computers, along the lines of what Gowalla has done. The game is meant to be played on mobile devices, but it’d be nice to be able to manage your account on the desktop, as well.
Features for KJs: We feel like KJs are one of our core audiences, and we have some ideas on how we can help them promote their shows and use BarStar to their advantage. We haven’t really implemented any of this yet, focusing first on the singers — but we will.
Monetization: We’ve got some good ideas on how we might be able to monetize this thing that we’ll be exploring down the road, if it looks like it’s going to take off.

Find us at SXSW!

Both me and Scott will be at SXSW interactive, along with a few other members of our Seattle karaoke crew that has been testing BarStar since the very early days. And SXSW is all about the karaoke this year. There are no less than three major parties featuring karaoke, including the epic Cog’aoke Contest and the TechKaraoke party BarStar is helping to sponsor — and the {RV}IP Lounge is supposed to be making another appearance for ongoing karaoke fun, as well. We’ll have a small handful of shirts to give away, probably to those who wow us with their performances, and we’ll have a large batch of buttons. I looked into getting branded condoms to pass out, but couldn’t get them done in time — so you all are on your own when it comes to playing safe.

Please do check out BarStar and follow us on Twitter if you’re interested karaoke at all, and if you’re not, pass it on to your friends who are! And if you love it, do us a favor and review it on Facebook!

On Flash

Jeff Croft — Mon, 01 Feb 2010 20:26:33 -0800

In the days since the iPad’s announcement, there’s been an ongoing discussion going on in web circles about what its lack of support for Flash means for that technology, for Adobe, for video on the web, and frankly, for the web as a whole. I’m not really sure why this debate didn’t rear it’s head when the iPhone was introduced, or when Android was introduced, or when Palm’s WebOS was introduced (since all three didn’t include Flash support), but whatever. The iPad is here and we’re talking about it now, so here are some off-the-cuff, not very well-thought-out thoughts on the matter.

Since the iPad announcement, standardistas are coming out of the woodwork to lay the proverbial smaque down on developers and sites who’ve been using Adobe’s Flash technology to serve up video, saying, more or less, “See, we told you so. If you don’t use web standards, you’ll eventually get bitten in the ass.” This is a sentiment I agree with, for the most part. But in this particular care, it’s nothing more than overzealous bullshit.

What would you have them use instead? Web standards have, for years and years, offered no alternative. These developers used Flash for video not because they didn’t care about standards, but because there wasn’t a viable, standards-based alternative. So please, get off your fucking high horse and stop treating these people the same way you treat those who are still writing tag soup, table-based layouts (while you’re at it, stop treating those people that way, too).

Okay, okay. I hear you. HTML5. Yeah, yeah. Fine. Look, I’m as stoked about HTML5’s video support as you are. Really, I am. But it’s not practical today. It works only in the minority browsers, and even those can’t agree on a codec to roll with. If YouTube switched to HTML5/H.264 today, they’d be irrelevant tomorrow. And if you run a video-heavy site, you’re probably in the same boat.

Sorry standardistas, but Flash is still the best way to make video content accessible to the largest number of users. That’s a fact. Flash is more accessible than web standards, when it comes to video. It just is. You can’t deny it. I fully expect and hope for that to change, though. If you haven’t already explored HTML5 video, you should. Is is the future. But it’s not the present.

So what is the present? Frankly, the present, when it comes to video, is a g’damn nightmare. If you want to do it right, you need to use HTML5/H.264 support for Chrome and Safari, HTML5/Ogg support for Firefox, and fallback to Flash for everything else. And you still won’t get your content to everyone, because there are still browsers out there that support neither HTML5 nor Flash. And if you’re a major video content publisher (like, say, a journalism site), I wouldn’t blame you at all if multiple encodings of every video you produce is a non-starter, and you decide to just roll with Flash for now, ignoring the minority of devices (iPhone/Android, etc.) that don’t have Flash installed. I mean, shit, you’ve got deadlines and business goals to meet, as well as user experience ones. I get that. For now, do what works for your organization and don’t let the standardistas get you down.

Flash is really great at three things: video, games, and ads. I’ve addressed video. As far as games go, these mobile device manufacturers with their own app stores are never going to be too keen on Flash games running on their devices, because they’d rather sell you native games. You may not like it, but it’s a fact. Get used to it. As for ads, well, I have no idea. We all know the journalism industry needs to find a new business model, anyway — maybe this is as good a time as any.

iPad thoughts

Jeff Croft — Thu, 28 Jan 2010 02:59:35 -0800

I’m not going to front: when I saw the iPad introduction today, I was initially disappointed. I was really hoping for revolutionary way to interact with a device — a whole new multi-touch interface. I was expecting this, and the fact that the iPad is, really, just a big iPod touch was a bit, well, underwhelming. Then I remembered something: the way we interact with the iPhone and iPod touch is fucking awesome. Like, best-UI-ever-created awesome. Why fuck with it?

It’s totally cliche and douchey to say so, but the fact is, the iPad is just a big iPod touch. Seriously. That’s all it is.

But is that so bad?

The name

Let’s get this out of the way. I don’t really like the name. I think it’s confusing when your product line also includes something called the “iPod.” The cottony-thing-ladies-wear-over-their-hoohaa jokes will get old fast, but people are going to be mistakenly typing and saying “iPad” when they mean “iPod” (and vice-versa) for years to come.

But seriously: who cares?

(Also, I was shut down hard tonight when I said something about a “tampon,” reminded by my ladies that a tampon is a very different device than a feminine pad. Thus, “cottony-thing-ladies-wear-over-their-hoohaa.”)

This is not the device for you — yet

If you’re reading this blog, this is almost certainly not the device for you. At least not today. But stop for a minute to consider a regular person. What do they need? They need to browse the web. They need e-mail. They want to interact with the photos from their digital camera. They want maps and e-books and music and movies. But really, that’s about it. They’re consumers of media, not creators. What do they really want that the iPad can’t do out of the box?

Nothing, that’s what.

But let’s be clear: the iPad is, pretty much, a sheet of glass. It’s a playing field and a ball. It’s up to app developers to invent a sport for it. We get to make the rules of what this thing is. So while, out of the box, it may not let you write code, edit comps in Photoshop, compose music in Logic, or edit video in Final Cut, I won’t be surprised if it eventually does. If they can build a world-class version of iWork and that sweet-looking Brushes app for this thing, I’m damned sure someone can build Photoshop for it. So while it may not be the device for you today, it very well may be, in the future.

So who’s it for, then?

My wonderful girlfriend is about to go back to school. She’s got a ThinkPad from about six years ago that barely works anymore. She saw this thing and said, “maybe that’s what I need for school.” And I agree. It’s perfect for taking notes, reading texts, and doing simple assignments. It may not be great for writing a 50-page thesis, but for most students, it’s more than enough — and that’s with only the software Apple is providing. I fully expect third parties to make it even more awesome with their apps.

But the fact that she’s a student isn’t what makes her the ideal customer for this thing — it’s the fact that she has an aging laptop. The question isn’t, “Do you need an iPad today?,” because most of us don’t. Our MacBook Pros or Dell lappies are humming along just fine. The question is, “Would an iPad serve your needs when it’s time to replace your current laptop?” And the answer, for the vast majority of people, is a resounding “yes.”

Geeks are going to buy this thing. You’re going to see it in the wild. It’ll pop up in boardrooms, on planes, and in coffee shops. You’ll see it. You’ll admire it. And you’ll wonder, “Do I really need a laptop? Maybe that’s all I need.” And a year or two from now, you’re going to buy one. Resistance is futile.

This is the new PC. Sure, there are some things missing, and it’s not as capable as your HP netbook, but it really doesn’t matter: it does everything you need it to do, and it’s sexy as hell. Don’t pretend you didn’t ever buy a Britney record for exactly those reasons.

The really significant announcement today

To me, today’s biggest announcement wasn’t the tablet, or the iBookstore, or the fact that Steve Jobs wasn’t as skinny as last time we saw him. The really big announcement today is that Apple is making its own chips — and from all reports, fucking fast chips, to boot. If Apple is able to migrate it’s product line to their own silicon, it’s a huge win for their bottom line. Huge.

What’s missing

I’m an Apple fan. I’ve never made any bones about that. But I’m also a skeptic and a critic, and I’ve never been one to adore a product just because it has a fruit with a bite out of it on the back. With that in mind, I’ll be straight: this thing ain’t perfect. There are some missing bits that I wish were there.

First and foremost, I think it ought to be sold as a computing device, not as a peripheral to your computer. Why does it sync with iTunes? Why can’t it just be your computer, instead of something that connects to your computer?

Second, I wish there were a front-facing camera. A back-facing camera, like the iPhone, is silly and pointless. While it’s handy to be able to take a quick snapshot with your pocket device while out and about, no one is going to do that with a 10” device. They’re just not, so stop bitching about it. But, I could totally see myself sitting on the couch with this thing, having a video call with my Mom or daughter. A front-facing camera would have been nice. To be fair, I suspect including it was a tricker technical problem than you might expect — how do you get it to work well at all the various angles this this is intended to be used at (i.e. held out in front of you, sitting on a desk, propped up for video-watching, etc.)? It’s not as simple as it sounds. Still, it would have been a sweet feature.

Third, I think the storage is too small — for now. I fully expect personal computing to move into the cloud just as enterprise computing has, but for the moment, I need more than 64GB of storage to work with my files. My “Projects” directory, which holds all my work, is about 15GB. My iTunes library is 600GB. My iPhoto library is 107GB. Sorry, but 64GB doesn’t cut it. And 16GB is laughable. Here’s hoping Apple upgrades it’s cloud-based services before the iPad launches.

But even with these missing features, the thing is still more than capable for the average user — especially at the $499 price point they’re selling it at.

In comparison to other devices

The Amazon Kindle DX (the current model with a 9.7” screen) is $480. FOUR HUNDRED AND EIGHTY BUCKS. In other words, it’s a hopeless pile of shit that looks like joke next to an iPad.

Honestly, do I really need to go any further with comparisons? Love it or hate it, the iPad just made everything else that is even remotely similar look like an overpriced toy. Period.

But it’s not all roses

This thing was hailed in the media as a “savior for the periodical industry.” I’m not seeing that. In fact, I see absolutely nothing new this device provides to the newspaper and magazine publishing industry.

The New York Times showed off a new app that takes advantage of the bigger screen with a prettier design? Pssh. Who gives a shit? They could have built that same app for the iPhone 18 months ago. It’s not new, or interesting. In fact, my impression of the NYT app is that isn’t nothing more than a prettier layout. There’s no innovative new way to interact with the news, to communicate with others, to work with my local journalists, or to mash-up the data journalists are collecting for your own purposes. It’s visual design masturbation, with no consideration for interaction design whatsoever. It’s shit. And what’s more, it’s shit that could have been made for the iPhone. Don’t let them pretend it’s anything new, because it’s not.

I really, really, expected Apple to unveil a new service for periodical publishers to sell and distribute their wares to the masses with ease. I expected the equivalent of iBooks for magazines and newspapers. Instead, the plan for journalism appears to be “make an app for your publication.” In other words, exactly the same plan Apple had for newspaper publishers on the iPhone. There is nothing new to see here. Move along, folks.

Let’s talk about multitasking. For those of you who are bitching that there’s no multitasking, I have one thing to say: get over yourselves. You’re a fucking geek and regular people aren’t. Regular people don’t need multitasking. Shit, 95% of Windows user maximize every window, anyway. So quit your bitching about multitasking, and let’s talk about something that really matters: multi-user support.

There is no excuse for this thing not to have multi-user support. This could have been the world’s greatest coffee table device, if it only had support for multiple users. Think about it: the thing sits on the coffee table. Daddy logs in. He checks his e-mail and his sports scores. He logs out and puts it down. Little Timmy logs in. He IMs a friend and plays a game. He logs out and sets it down. Mom logs in. She get a recipe from her bookmarked Martha Stewart page and forwards some totally-not-funny cat video to her best friend. And so forth. This is the new PC. But it requires multi user support. If I can’t log in and have my own bookmarks, my own email accounts, my own IM lists, and my own Twitter feed, it’s useless as a family PC. And Apple, if you think a family is going to buy five of these things, you can dream the fuck on.

Multi-tasking is vastly overrated. But multi-user support is a killer app no one is talking about.

The bottom line

This thing is going to sell. It’s going to sell well this year, but it’s going to sell like fucking hotcakes next year. Multi-touch, tablet-form-factor devices are the future of personal computing. I’m convinced of it. It’s not perfect, but it’s a darn good device for the price point, and it’s the start of something big.

In some ways, today’s announcement was disappointing. It didn’t really live up to the hype — but what could have? The fact remains, this is a sweet device that does everything regular people need it to do, and with what is still the best UI on any device: the iPhone’s.

It’s not revolutionary, that’s true. Sure, it’s really nothing more than a big iPhone. But the iPhone is the greatest consumer electronics device ever made — so maybe that isn’t such a bad thing.

Authentic Jobs: Twenty + Ten

Jeff Croft — Fri, 08 Jan 2010 09:27:23 -0800

Cameron Moll’s Authentic Jobs, the best place for web professionals to find jobs and employers to find web professionals, has a long-standing tradition of giving back to the world. It also has a long-standing tradition of New Year’s promotions — and this year we’re tying the two together.

It’s called the Twenty Ten promotion,and it works like this: Post a job listing between now and January 22 and you’ll receive 20% off your listing. More importantly, 10% of your purchase will be donated to Charity:Water to help bring clean and safe drinking water to people in developing nations. All you gots to do is use promo code CROFT10 when you post your listing.

You may also join in and donate to the Charity:Water campaign without posting a listing. We’re hoping to raise $5,000 — enough to fund the development of a freshwater well in one village.

Twenty-ten, yo! Get ‘er done!

Ten things that annoy the fuck out of me on Twitter

Jeff Croft — Wed, 16 Dec 2009 13:53:07 -0800

God dammit, people. You suck at this social networking thing. Allow me to educate your asses on how to suck less by outlining ten things that annoy the fuck out of me on Twitter:

.@whoever — Twitter doesn’t show me your replies to people I don’t follow for a reason: because I don’t give a damn. Stop trying to circumvent it. It doesn’t matter if you use a dot, a tilde, or some fancy unicode character before the @ sign; in all cases, you’re not clever, and you deserve to be kicked squarely in the taint.
People modifying my message when they retweet it — Okay. Thank you for retweeting me. I appreciate that. But fucking hell, must you modify my tweet in order to squeeze in your wannabe-witty commentary? I go to great lengths to not look like a tween on Twitter, and you changing every instance of “your” to “ur” is not helping.
Follow Friday — I know you’re trying to do me a favor here, and I appreciate the thought, but fuck if every Friday my iPhone battery isn’t run down by noon thanks to all the notifications I get about #FollowFriday. Great, yet another list of people I don’t know.
People who don’t follow me DMing me — Okay, look. If you’re going to DM me, then please at least do me the courtesy of following me, lest I try to respond only to be bitch-slapped by bitter cold rejection.
People threatening to unfollow me — This may come as a huge surprise to your self-centered ass, but guess what? I don’t do this for you. Don’t waste any of your precious 140 characters telling me you’ll unfollow me if I don’t do this or that, because I. Don’t. Give. A. Fuck. Go ahead, unfollow. You won’t hurt my feelings. I promise.
When people link to their link to something — Okay, I’m going to go ahead and name names here. Andy Fucking Clarke, the next time I click a link in one of your tweets only to be taken to a page on For A Beautiful Web that is nothing more than another link, so help me God, I will hunt you down and shove my boot so far up your ass it’ll tickle your taste buds.
Auto-follow bots — Just because I said the word “photo” does not mean I’m interested in buying a camera from your shitty eBay store. At least take two minutes to read my tweets and see if I’m really a potential customer or not before you jizz another “So and so is now following you on Twitter” message into my e-mail inbox.
Hashtags used for anything but humor — This isn’t really your fault; it’s Twitter’s. Twitter has enough smart people to know that the right place to store metadata, like tags, about a piece of content is not in the same field as the content itself. Fuck, I already only have 140 characters to say my funny shit. I’ll be dammed if I’m going to waste them on whatever hashtag you came up with for your stupid little event.
@kennymeyers — I couldn’t think of a number nine, but this totally works.
Bitching about how other people use Twitter — As Wired Magazine so perfectly put it, Twitter pretty much laid a stick and a ball in the field and let its users invent baseball. That’s one of the things that makes Twitter awesome. People use it however they like; there are no rules. Nothing can make you a bigger asshat than trying to tell someone else how they should or shouldn’t use Twitter. Well, except maybe making a top 10 list about how people should or shouldn’t use Twitter.

Are web agencies design-heavy?

Jeff Croft — Tue, 15 Dec 2009 14:43:22 -0800

Since I couldn’t fit my thoughts in 140 characters, this is a short post prompted by a discussion on Twitter today about development resources at web agencies. First, let’s define “agency.” When I say “web agency,” I mean a company that does web work for clients. This does not include internal teams, such as the web staff at a newspaper or university, nor does it include companies that build apps for themselves, like 37 Signals or Alamofire.

My impression, which I’ll admit is entirely speculation and not backed up by any real facts, is that web agencies today may be under-staffed on the development side of things.

As I’m sure you know, web applications have become much more common over the past few years. There are still plenty of content-oriented websites to be made, but more and more, what clients come to us for is apps. Based on the rosters of several high profile firms out there, it seems that most of the “developers” on the team are focused on the front-end (HTML/CSS/JS), and/or are what I like to call “CMS wranglers.” A CMS wrangler is one of those folks who can make Wordpress (or EE, or MT, or whatever) do just about anything imaginable, given enough time to hack.

Now, don’t get me wrong. A good CMS wrangler is a very valuable thing. But these off-the-shelf CMSes are just that — content management systems. They’re appropriate for content oriented sites. They’re not designed to build apps like, say, Flickr, or Basecamp, or Gmail. But, more and more, these kinds of apps are what clients are looking for. These kinds of apps can only be built well if they’re built from scratch.

So, my question is: who builds these apps at Happy Cog? Or Clearleft? Or Blue Flavor? Or n’clud? In reading the rosters on their sites, it’s unclear to me that they have resources for this sort of thing.

Please understand: I love all these companies, and have many friends working at them — so I’m not calling them out at all. They all do great work. I’m just trying to get a handle on how they work. Do they simply not do these kinds of apps? Does someone on their team build them, and it’s just not clear from the bios they have posted? Do they outsource the backend development? Do they form partnerships with development shops?

More and more, clients are going to come to us looking for apps that can’t be handled by CMSes. I’m curious how agencies are handling this.

(For what it’s worth, at nGen Works, Fred and myself handle most of the app development. Fred’s great with CMSes like Expression Engine, but I appreciate that he knows when they’re not the right tool for the job and is more than capable of writing something from scratch. And although we’ve not done it since I’ve been working with nGen, we’re very willing to outsource, if need be.)

Authentic Jobs realigned

Jeff Croft — Wed, 04 Nov 2009 09:20:13 -0800

If you’ve been visiting this site for a while, you know that I’m a member of the Advisory Board for Cameron Moll’s Authentic Jobs — almost certainly the best place for web professionals to find and post job opportunities. In the name of transparency, this means, roughly, that I help Cameron out with advice and other little things in exchange for a small cut of the profits from the site.

Recently Cameron has been hard at work on the next version of Authentic Jobs, and it launched late last night. As you’d expect from Cameron, it’s a gorgeous site, with beautiful textures and type. But what’s more significant, from a job seeker’s perspective, is the entirely-rewritten backend. The listings’ metadata is now much more structured, which allows for more configurable searching and filtering. You’re also able to subscribe (via Twitter, RSS, or e-mail) to any search result.

For employers, the site now allows for more customized listings, including company logos, formatted text, and anonymous e-mail address. What’s more, full-time listings now stay posted for 60 days, instead of 30. Jobs still cost the same amount to post: $250 for a 60-day full-time job, and $75 for a 30-day freelance gig.

I did a very small amount of HTML/CSS development for the site, and it was definitely a fun one to work on. I think the end result is spectacular and a really big step forward for Authentic Jobs. If you’re a web designer, you’ll want to check it out — for the gorgeous design, even if you’re not currently in the job market.

Don’t tell me about your product

Jeff Croft — Mon, 19 Oct 2009 23:49:21 -0800

Tonight, an interesting thing happened. A guy I don’t know contacted me via the contact form on this very site. I’m not going to the name the guy, his company, or his product, but this is more or less what he said:

Hey Jeff! I just started following you on Twitter and I really like your site. I work at an interactive design and product company, myself. You tweeted tonight about something I haven’t heard of — what curious what that is. Thanks!

Intrigued by this guy, who seemed genuinely interested in me, my work, and my social life, I did what any self-respecting web geek would do: I Googled him.

What I found is that he’s a PR guy for an agency whose work I have a great deal of respect for. I found his bio on the company site, and it seems we share some interests. Nice! From there, I discovered that his company had recently released a very nice-looking product aimed at web designers. I checked it out, was suitably impressed, and considered signing up for the product, as it really did seem like it could be useful to me. “I’ll check it out more later,” I thought.

So I quickly responded to the dude, thanking him for following and his kind words about my work. I explained to him that “Little Red Hen” is a karaoke bar in Seattle. Then I headed off to my yoga class.

After yoga, I checked my e-mail — said new follower had e-mailed again. This time, he said, more or less:

Since you’re a web designer, I thought you might be interested in my company’s product! It’s new and has been covered by all the hot tech blogs and blah, blah, blah, blah.

Suddenly, I was completely disinterested in him and his company’s product.

Now, I’m not saying this guy did anything wrong. He wrote a nice e-mail, is probably a nice dude, and may well be someone I’d get along great with. His product is indeed something that could be useful for me, and does in fact look like it’s very well-made.

But what I realized was this: his first e-mail, which barely mentioned the product, but was personal, friendly, and genuine, spurred me to — without encouragement — go check out him and his product. His second e-mail, which was all about the product, did nothing but turn me off.

Now, I’m no marketer, but the lesson I take away is this: in today’s world, the best way to get people interested in what you’re up to is not to tell them about it, but simply to be cool and wait until they ask. Because if you’re cool, they will ask — or they’ll ask Google, like I did.

Special note to PR dude: If you’re reading, let me just say that I hope you take no offense to this. I think your style of PR was better than a lot of the sales e-mails I get, and you do genuinely seem like a nice guy. I just thought my reaction to your messages was interesting. I hope to buy you a beer one day.

DelveUI New York: Help me plan my talk in exchange for free tickets!

Jeff Croft — Wed, 22 Jul 2009 16:45:20 -0800

As I mentioned here before, I’ll be speaking in New York in a couple of weeks at DelveUI, a two-day event filled with sessions from some of the best UI designers on the planet, including Lou Rosenfeld, Jina Bolton, Scott Jehl, Andrew Maier, Jamey Kosoy, Jason Santa Maria, Ryan Stewart, Theresa Neil, Robert Hoekman, Joshua Porter, Anders Ramsay, and Todd Zaki Warfel. I think this is going to be a really, really great event.

My talk at the event will be about one of my favorite topics: web typography, specifically as it relates to CSS, and hopefully with plenty of new hotness from CSS3 thrown in. I’ve got the talk pretty well-prepared already, but I want to hear what it is you all would like to see addressed in a talk of this nature. So much so, in fact, that I’ve convinced the Delve crew to let me give 10 jeffcroft.com readers free registration for the event in exchange for your ideas. And if you’re too late to get one of the free registrations, I may still be able to hook you up with a juicy discount.

Here’s how it’ll work: the first 10 people to leave a comment here with both a good suggestion for CSS type-related topics and a serious interest in going to Devle will get added to my personal guest list for the event. You’re on your own for travel and accommodation, so please don’t waste a free ticket if you can’t make it to New York on August 5th and 6th. What qualifies as a “good” suggestion? I dunno. I’ll be the judge of that. :) If it’s thoughtful and sincere, I’m sure we’ll have no controversy.

After the 10 spots are gone, I can give another 15 people a 20% discount on their registration. So keep the suggestions coming! If you can’t make the event but have a suggestion for the talk anyway, go ahead and drop it here and mention that you don’t want to be considered for the free registrations or the discounts.

I can’t promise I’ll use every single good suggestion I get, but I’m sure I’ll be able to address many of them. Thanks in advance for all the suggestions, and I’ll see 25 of you at Delve!

Goodbye, Blue Flavor.

Jeff Croft — Thu, 09 Jul 2009 08:47:06 -0800

Today is my last day at Blue Flavor.

For the past couple of years (and then some) I’ve worked with some of the brightest minds in the web community on all sorts of exciting projects. I’ve learned a ton about myself, the way agencies work, dealing with clients, and developing web experiences in the real world — a world that has timelines and budgets and limited resources and other potential pitfalls. Blue Flavor has absolutely the most enjoyable job I’ve ever had, and I think joining them was exactly the right move for me two years ago. But now, it’s time to move on.

I’ve deliberated with myself for a few months about what’s next. There were a lot of factors influencing my decision. I have enjoyed the variety of work in the agency world a great deal, but I was also frustrated at times by not always getting to see a project through to completion. I enjoyed my role as a visual designer at Blue Flavor, but also wanted to get involved in the design process much earlier than I typically did. I loved my co-workers, and Blue Flavor’s office is terrific, but I really wanted to be free to work from home, from the road, or anywhere else I wanted (and sometimes at unusual hours, to boot). Also, I’d like to continue to spend more time writing, speaking, and doing other industry-related things outside of pure design and development work.

All of this initially led me to decide freelancing was for me. So I went on my way, planning that route. Then, I was approached by Carl Smith of nGen Works, a company for which I have long respected both the people and their work. Carl explained to me some changes going on at nGen, and I couldn’t help but get excited about the possibilities of working with his great team. Carl and I were able to work out an arrangement in which I can stay in Seattle, working from home (or wherever I may be), and am free to take on additional freelance jobs, as well. I believe I’ll be able to have a bit more involvement through the entire project, rather than just the visual design phase, with nGen’s team. This is kind of the best of both worlds, for me. It gives me some of the stability of a “regular” job, but a lot of the flexibility and freedom of freelancing. I’m really excited about it.

I don’t think it’s a secret there are changes happening at Blue Flavor. It’s important for me to note those changes have nothing to do with this move, other than timing. I’ve been thinking about going out on my own for quite a while — the transitions happening at Blue Flavor just helped make it clear that now was the right time. For the record, I believe with all sincerity that the changes Nick is making at Blue Flavor are for the best. Blue Flavor is going to go on, and — I’d be willing to bet — be stronger and more profitable than ever before.

So, if you have a project you’d like to work with me on, please don’t hesitate to get in touch, and if it’s a fit, I’ll figure out how to make it happen, be it through nGen Works, or just you and me.

Finally, I want to say a heartfelt goodbye to Keith, Brian, Nick, Cyndi, Tom, Kevin, Garrett, Tiff, Kenny, Martine, Will, Ben, Walter, and all the other great people I’ve worked with while at Blue Flavor. You guys are the best, and I love you all. Really.

Delve Conference, Brooklyn, August 5th and 6th

Jeff Croft — Wed, 08 Jul 2009 09:12:42 -0800

I’m excited to be speaking at the inaugural Delve workshops in Brooklyn August 5th and 6th. DelveUI is a 2-Day Masterclass on Designing (Web) User Interfaces. Think of Delve as the antidote to the bloated conference experience — small, affordable, and frequent versus overwhelming, occasional, and costly. Each Delve consists of a series of two-hour masterclasses. That’s just long enough to get deep into a topic and just short enough to avoid people falling asleep at their desks.

This first Delve has a pretty killer lineup of speakers, including Lou Rosenfeld, Jina Bolton, Scott Jehl, Andrew Maier, Jamey Kosoy, Jason Santa Maria, Ryan Stewart, Theresa Neil, Robert Hoekman, Joshua Porter, Anders Ramsay, and Todd Zaki Warfel.

You can register on the Delve site. Hope to see you there!

Seattle Karaoke Tour, take one

Jeff Croft — Mon, 01 Jun 2009 09:56:24 -0800

A couple months ago, one of the first couple times I hung out with my latest BFF @alixito, we jointly had the brilliant idea to do a week-long tour of Seattle plethora karaoke bars, hitting one each night for seven straight days. Today, Alix and I announce the first edition of Seattle Karaoke Tour, taking place from June 13th through 20th. Which is eight days, not seven. Because we’re badasses, that’s why. Sure, it’s no Whuffaoke (which you should totally try to attend, as well!), but we think it’ll be fun — not to mention challenging. Who has the stamina to make it eight straight nights? I guarantee I do. I believe Alix does. Do you? If so, we’ll see you at the following venues:

Saturday, June 13th: Boxcar Alehouse Magnolia/Interbay
Sunday, June 14th (My birthday!): Hula Hula Lower Queen Anne
Monday, June 15th: Little Red Hen Green Lake
Tuesday, June 16th: Purr Capitol Hill
Wednesday, June 17th: Kate’s Pub Wallingford
Thursday, June 18th: The Rickshaw Greenwood
Friday, June 19th: The Beacon Pub Beacon Hill
Saturday, June 20th: Boxcar Alehouse Magnolia/Interbay

I’ll try to flesh this page out with more details (times, addresses, etc.) over the next few days.

Come as many nights as you like! Let’s spread the karaoke love across Seattle!

On applying OOP concepts to CSS

Jeff Croft — Wed, 20 May 2009 12:34:38 -0800

Last night, while work on a very cool client project for Blue Flavor, I took a short break to make the following tweet: “It’s amazing what you can do in very little code when you apply object-oriented principles to CSS. Wish more front-end devs understood OOP.”

I got a surprising number of responses from people asking what I meant, exactly, and for examples. I also got several responses, and a few IMs, from people touting Compass and Sass, a pair of Ruby projects that provide useful language features and syntax to CSS and CSS frameworks, allowing you to do all sorts of fancy things.

The OOP concepts I was specifically referring too are mostly around inheritance, co-reuse, and the Don’t Repeat Yourself (DRY) principle. Think subclassing, mix-ins, etc. Clearly, CSS doesn’t provide this kind of syntactic sugar, and it’s very debatable whether it should or not. The W3 is strongly against even adding variables (or constants) to CSS. I personally am in favor of variables in CSS, but would be against adding much logic to the language. So it becomes a question of where to draw the line, and I strongly suspect the slippery slope is why Bert Bos is so vehemently opposed to variables.

So while CSS doesn’t offer real subclassing or mix-ins, it does allow for something that can (sort-of) replicate that functionality: multiple classes per element. For example, I can make a class of .box that defines some basic layout structure, and another class of .rounded that provides rounded corners, and classes of .wide and .narrow that define some widths, and then easily create boxes of varying widths and styles by assigning multiple classes to an element, without having to duplicate code in my CSS.

Of course, there are two big issues with this that are causing the Andy Clarke’s and Jeremy Keith’s of the world to throw up in their mouth a little bit as they read this: so-called “classits”, as well as so-called “non-semantic” class names. So allow me to address each…

“Classitis” is a popular terms for using too many classes. The first time I was warned against class over-use was way back when Zeldman first released Designing With Web Standards, and at the time, it made good sense to me. However, having learned about object-oriented programming over the past few years (through Python and Django), I’m not sure I still agree. If I have 100 “boxes” on a page, and 75 of them use rounded corners, and 20 of them are wide and 80 are narrow, I basically have two choices.

First, I can create a bunch of classes. For simplicity, let’s call them .box, .box-rounded, .box-rounded, .box-wide, .box-rounded-wide, and so forth. You can see that several of these would be required to cover all the possible box styles. And what's worse, each of them includes a lot of duplicate code. They all need the basic box structure. Several of them need the rounded corners. And so forth.

The other option, as I said above, is to use multiple class names on an element. So, you end up with <div class="box rounded wide">. The advantage here is around maintainability: in your CSS, you no longer have to repeat the code for the base box structure over and over again, which means when you change it, you only have to change it in one place. And I think we can all agree that the extra code that it takes us to use three class names is far less than the extra code it takes us to redefine a box three times in CSS. So I say get over your fear of multiple classes. Having five classes on one element is nothing to be ashamed of.

So on to those presentational class names: first, it’s worth noting that I’m only using them here because a box with rounded corners at varying widths is simple for us all to understand. These concepts certainly apply whether it’s called .box or .navigation. Second, I would (and have, several times in the past), question exactly what the reasons are for avoiding presentational class names. While I do advocate being as semantic as possible, it's important to note that presentational class names cause no real-world problems of note. So, I'm all for being semantic, right up to the point where doing so is disallowing me to stay DRY, making me less efficient, and bloating the hell out of my code. That having been said, I'd never actually use a class name like .box-rounded-wide, and I hope you wouldn't, either. It just makes for a good example. Bottom line: the only thing you really gain from using 100% semantic class names all the time is that Jeremy or Andy get a little tickle in their loins when they view your source. If that’s important to you, then by all means, be semantic.

Okay, so what about Compass, Sass, and similar projects? Before I tell you why I don’t think they’ll work in a lot of cases, let me be clear: these things are very cool. I’m very impressed by Sass, especially. It’s powerful as hell, offering elegant language features to CSS. No doubt using Sass produces cleaner results than using just piling on the class names, like I’m suggesting.

But the one big looming problem with these projects is this: they’re for programmers. Sass may seem pretty simple to you, but I guarantee you it would confuse the hell out of most of my co-workers — and my co-workers are all fucking brilliant designers and front-end developers. The problem is simply that most designers and CSS authors aren’t programmers. What’s more, most of them don’t want to be programmers. As soon as you start talking about mix-ins, subclassing, and passing arguments, their eyes roll into the back of their head. Applying multiple classes to an element, though? That, they can understand.

So, what was the impetus for my tweet? Basically, I meant not being afraid of multiple classes, even if they’re borderline presentational, and thinking of CSS classes as objects that can extend one another (even though they technically can’t). However, this is really only the tip of the iceberg as far as applying OOP concepts to CSS. Nicole Sullivan recently did a talk on Object Oriented CSS and touches on many other aspects, almost all of which make perfect sense to me. It’s a great place to start for more info on this sort of thing. If you don’t have some basic understanding of OOP concepts, the benefits of this stuff may still be lost on you a bit. That’s fine. You’ll come around. :)

For the record: I joke with puritans Jeremy and Andy because they’re friends and I know they can take a little ribbing. I love both those guys — nothing personal intended!

Update: My rounded box examples were shit. I should have taken the time to come up with some good, non-presentational examples, to avoid the semantic/non-semantic part of this post all together. Matthew Anderson posted a comment below in which he provided much, much better examples: “Messaging in applications is a great example. Your success, informational and error messages should have a similar look and feel. Using classes like “success message”, “info message” and “error message” are no less descriptive and no less communicative than “success-message”, “info-message” and “error-message”. However, they are a lot more maintainable and you accomplished it with less code.” Perfect!

On Twitshirt

Jeff Croft — Sat, 18 Apr 2009 19:22:57 -0800

On Thursday, my friends at Airbag launched Twitshirt, a simple but awesome service that lets you print the text of a Twitter posting on a tee-shirt. On Friday, the app was gone, replaced by a message stating, “we’re reversing the polarity.”

Why? Because some people — and notably some people who turn out to be very influential in the Twitter community — had a problem with Twitshirt. Apparently, they felt like it was “stealing their intellectual property.”

That seems fair enough at first glance. But, it turns out Airbag anticipated this could be an issue, and had several measures in place to deal with it. First, they provided an opt-out. If you didn’t want your tweets to be available as tee-shirts, they made it painless for you to say so. Second, they attributed the original author of the tweet in the tee-shirt design. There was no confusion here — it was very clear who wrote the message. And finally — here’s the kicker — they actually paid the original author of the tweet royalties!

But still, some people had a problem with it. And again, that’s fair enough. But here’s the thing I don’t understand: some of these same loud, influential people who objected to Twitshirt are huge fans and users of Favrd, a site which showcases great tweets (based on people’s use of the “favorite” feature), and is supported by advertisements. Favrd doesn’t allow you to opt-out if you don’t want your tweets shown (at least not that I can see), and it doesn’t pay you anything for having a tweet featured. It does, however, attribute the original author (as well it should).

Personally, I love both of these projects. I think they’re great, and I think they showcase what kind of awesome things can be done with great content and open APIs to it. But I’m really, really baffled about about someone could be okay with Favrd making money off their tweets, but not okay with Twitshirt doing the same, especially in light of the fact that Twitshirt provides opt-out and pays royalties. Maybe someone can, in the comments, explain to me what I’m missing. Why did Twitshirt cause a shitstorm, but everyone loves Favrd? Maybe there’s a good reason — but I can’t find it.