A Typographic Refresh

A little over five years ago, Greg Storey suggested Whitney for the SimpleBits logotype that went along with a previous brand update. I’m thankful he did, because since then it’s become a favorite typeface around these parts, eventually becoming the base for the current ‘SB’ mark. Over the next few years, Hoefler & Frere-Jones catalog became my standard go-to font choices for presentation slides. I was hooked.

Over the weekend I made some subtle design tweaks here, and some not-so-subtle type refreshing. I’m honored to be beta testing H&FJ’s forthcoming webfonts offering. You’ll now see Whitney and Tungsten being used throughout the site. I’m amazed at the level of detail H&FJ have been putting into the screen versions of their famous fonts. Whitney ScreenSmart, in particular, looks downright glorious on a Retina display. You might’ve seen Whitney in use over at Kottke.org as well.

So, many thanks to H&FJ for giving me an excuse to spruce up the place a bit. Perhaps it’ll inspire to write a bit more here.

Pears

Yesterday, on stage at An Event Apart Atlanta, I announced Pears: an open source WordPress theme for creating your own markup & style pattern library.

I wanted to create my own database repository of commonly used patterns and figured the tool might be useful for others as well. Breaking interfaces down into patterns has been immensely helpful in learning and re-evaluating the best possible code to implement them. I’ve just gotten started and will be adding more as I create them.

But Pears isn’t about how I code these patterns—it’s a tool for creating your own.

The theme is available on GitHub for those that want to chip in and make it even better. Admittedly, the code is a little rough here and there, but it works.

Looking forward to seeing others’ takes on the patterns that power flexible web interfaces.

Bulletproof Web Design, Third Edition

Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design. The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book.

If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. I’m most happy that the book has been updated for those that haven’t read it before. And as always, I think it’s a great book for those getting started in building flexible websites with semantic markup and style.

The final chapter was rewritten from scratch to include a new fictional case study that follows a very simple example of Responsive Web Design, which I think is a natural extension of the previous chapters.

If you haven’t read the previous editions, I hope you enjoy it. It should be available by the end of the week.

My New Ride

A month ago I made one of the best purchases I’ve made in a long time. I bought a kick scooter. Not one of those aluminum things with rollerblade wheels where the handle is so short you have to hunch over—but a scooter built for adults.

After a fair amount of research I found the KickPed, which is a custom model designed by NYCEWheels. It’s not cheap, but it’s built for the streets of New York and is supposedly maintenance free. The wheels are wide, solid rubber, the birch footboard is trimmed skinny to avoid hitting it with your kicking foot. The handlebars are fixed height (they come in two sizes) and the whole thing folds by pulling up the spring-loaded metal sleeve at the bottom, exposing a single hinge. A strap goes around the back fender and can be held over your shoulder.

Now I may not be riding on the streets of New York, but the streets here in Salem, Mass. have a fair amount of brick and old cobblestone. The KickPed can handle it all with ease. It’s a tank.

I use it to make the short trip from the house to the office, but the primary reason this was a successful purchase is that I can scoot with my son to school along a bike path (until it starts snowing). Me scooting at full blast happens to be the same speed as him biking. For now, the synergy is palpable.

Oh, and I’m not being paid to post this little review, but rather posting for the benefit of future kick scooter researchers. And yes I likely look absurd riding it.

New Work: Instapaper 4 Icon

I had the honor of creating the new Instapaper icon thanks to Jason Santa Maria and his art direction. The new app is superb, and it’s out today! Read all about it from creator Marco Arment and Jason.

Adapted

There’s no doubt that employing a mobile first, responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of paper that happen to be on screen.

So yes, for new projects under the right circumstances a responsive plan is often the ideal. But what about existing sites? The ones that were designed before browsers supported media queries and before smart people started stitching things together into cohesive battle plans for building flexible websites? Ideally, the move to responsive design with device-agnostic-layout-hotness is one that starts from scratch. That is, it’s likely best to rethink it all.

For existing sites (particularly ones that are also businesses) teams don’t always have the luxury of tossing everything aside and building anew. We found ourselves in this position with Dribbble, a bootstrapped operation still run by 1.5 people (Rich Thornett and half of myself, plus wonderkid intern Bruce Spang).

Up until now we haven’t had an official offering that made the experience of using Dribbble bearable on small screens. If time was plentiful, we’d have a few options:

• We could’ve created a separate mobile version of the site. This would’ve been a lot of work up front, and even more work to maintain. Not to mention loss of full functionality. There are times when I welcome a stripped-down UI for quick tasks, but more often than not, I’m missing the features found in the “full” versions of sites when I’m browsing on the phone.
• We could’ve tossed everything aside and redesigned the entire app with responsive design in mind. Fun! But with a growing to-do list, the day-to-day work of managing a large, thriving community, and the business of generating enough money so that everything can keep humming along, it wasn’t an option for us right now.

That left a third option, and it was after a few (decaf) lattes and advice from Ethan, that I decided the best thing to do was compromise for now. Let’s keep the same content and code that’s been powering the large-screened version that Dribbble has always been, and then let’s do something adaptive to it—using media queries to effectively make the site fluid and as vertical as possible when rendered at 480px wide and smaller. In other words, let’s take a step towards a responsive design by crafting an adaptive stylesheet that overrides the master to make things usable and readable on phones and small-screened things. Our tiny team can continue to maintain just one codebase.

And so that’s what we did. Baby steps.

The process in making this a reality turned out to be very interesting. Much is written and talked about in terms of ideals when it comes to designing for any-and-all screen sizes, but not a lot is talked about in regards to the decisions one has to make when retro-fitting existing fixed-width sites. Sites with loads of interaction elements that need to adapt when it’s squeezed down skinny.

What happens to wide, horizontal navigation? Does search have to take up all that room? What about our form patterns? Where does advertising fit? How can we avoid modifying the markup for this section? I did my best to avoid using display: none; to simply hide things that didn’t quite fit. And not much is hidden, thankfully. But you do need to get creative in terms of how certain UI patterns are handled. Items that were previously rendered horizontally may possibly be stacked vertically. Items that were stacked vertically in tight spaces (short tag names) may be set side-by-side in columns to save vertical space (CSS3′s mutli-column layout proves very useful for spreading out lists of short links). We’re all still figuring this stuff out of course, and there’s so much more I want to write and talk about regarding these (sometimes) ad-hoc solutions. More soon, hopefully.

For now, I’m happy with this initial stab at a small screen experience for Dribbble. When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving. And that’s the priority.

New in the Shop: Amp Tee

I’m happy to announce the release of the latest shirt to hit the SimpleBits Shop… the Amp Tee is available for purchase, like right now.

The creative brief for this shirt would’ve gone something like this: Draw an ampersand. Make it musical. Refine its shape, but leave it imperfect for a handcrafted finish. Print it big on a heather black, super-soft, 50/50 shirt from American Apparel. Wear it with pride.

Responsive Web Design: The Book

Today! Ethan Marcotte‘s brilliant book for A Book Apart is available for purchase. You need to go buy it. Responsive Web Design is not just an assembly of technologies, but rather a new way of approaching designing for the web. To say this book is important would be an understatement.

I had the pleasure of doing the technical review of the book. Doing a technical review of anything Ethan writes is bit like trying to find an out-of-place note on Sgt. Pepper. Lots of nodding, belly laughing and, well, learning. (What, you don’t belly laugh to Being For  the Benefit of Mr. Kite? Ahem.) I can’t think of a writer I admire more when it comes to the wonderful combination of humor, humility, command of the topic at hand, and a way of explaining it all that makes this stuff fun. That’s not an easy task.

We’re at an exciting moment in web design and development. At times it can feel a bit overwhelming with the amount of relearning one must do to stay on top of best practices. Fortunately, these little books from A Book Apart help us get up to speed quickly, with a quality you’d expect from the folks involved. Ethan’s book raises the bar, and pushes the industry foward to a newly-flexible way of constructing the web.

“@abookapart is the Pixar of web design publishing“, says @dirtystylus. I think Ethan just wrote the next box office blockbuster.

Imitation, Repetition, Innovation

So I’ve been learning the banjo. At the beginning of 2011, I set out to learn something new—something that had nothing to do with pixels, browser bugs, typing, or angle brackets. I’m not calling it a resolution, as I can’t think of another resolution I’ve ever followed through on completely. But I’ve fallen through on the banjo. Specifically, clawhammer banjo, which is an old time style of playing without finger picks.

I’ve been playing music most of my life, starting with drums at age 8, then later guitar, but the banjo has always fascinated me. It’s a peculiar, misunderstood instrument. And it’s difficult to play. Or so I initially thought.

The banjo’s been around for hundreds of years and was a very popular instrument prior to World War II. A guy named Earl Scruggs came along and revolutionized the way it was played: three finger style with syncopated rolls and virtuostic finger acrobatics. It’s the style you’ll hear in most bluegrass band setups. It’s wonderful. But it’s damn hard to learn how to play—especially if you have previous experience with the guitar or other stringed instruments. That high barrier to entry arguably led to the dwindling of banjo players over the last half-century.

Clawhammer (or frailing) on the other hand, is a method I’ve found far easier to pick up. It’s the way most folks played before the Scruggs style became popular: right hand in a fixed, claw-like position with a single finger nail hammering down on the strings, while the thumb plucks the drone string. Although I’ve found it easier, more natural and simpler, there’s still an amazing variety in the sounds you can get out of the banjo, not to mention it sounds great on its own (where three-finger style sounds best accompanied by a band).

Fortunately, there’s a real clawhammer banjo master right here in Salem, Tom Collins, and I’ve been taking lessons from him once a month or so. It’s been invaluble to sit down in person in order to figure out what you’re doing right, and what you’re doing wrong.

Over the course of these lessons, it struck me that learning this wacky instrument comes down to three main stages:

• Imitation
• Repetition
• Innovation

I’ve been learning by being taught to play various tunes. Most of the songs are old time classics that have been passed down from generations of banjo players. When we begin learning something new, we imitate. We learn to mimic people who know what they’re doing. This is OK. We’re not stealing from them (yet) but rather learning by immersion and observation.

Another crucial part of learning the banjo (or any instrument for that matter) is repetition. You learn patterns and exercises that are mastered by repeating them over and over and over again. “Muscle memory” kicks in eventually and these patterns become second nature, developing into a vocabulary of sorts. When learning new tunes, having that vocabulary to tap into becomes essential and speeds up the retention of new songs.

Lastly, we innovate. By taking the things learned by first mimicking the songs and styles of other players, then piecing patterns together that have been mastered through repetition (Mr. Miyagi knew what he was doing), we’re then ready to add our own details and subtlty. It’s then that we’ve created something unique of our own. Many of the old time standard tunes have countless variations. A single title might sound completely different depending on who you originally learned it from, the geographic region you’re in, etc. Even though the tune is foundationally the same, the creative “top coat” makes it stand on its own, giving it character based on where and who it came from.

I’ve been thinking a lot about how you can apply this creative progression to learning just about anything. Including … wait for it … web design. I’m hoping to write a bit more about those connections in the future. Getting this post out was the first step to help me think through it all a bit more. For now, I have tunes to learn and strings to hammer.

Dribbble Pro

Yesterday was the biggest launch I’ve yet to be a part of. Not big as in size, but big as in importance, being a major milestone, etc. We launched Dribbble Pro after months of hard work: a suite of extra features for just $19 bucks a year. I couldn’t be prouder of our little team. Rich and our fearless intern, Bruce, have worked their butts off to get this working.

The response over the last 20 hours has been overwhelmingly positive. Dribbble members seem excited by the new features, but even more so happy to help support the community. The paid Pro accounts will hopefully help us to continue to bootstrap the business, grow the community gracefully, and spend more time doing so.

Those that have already purchased Pro accounts, I can’t thank you all enough.