Archive for ‘design’ category

Food for Thought

This is my favorite website. I visit it almost every day. It’s not responsive. It’s not optimized for iPhone. It looks blurry on a Retina display. It doesn’t use the latest HTML5/CSS3 framework. It doesn’t have a thoughtful vertical rhythm. The fonts are nothing special. It is neither skeumorphic nor flat. It doesn’t have its own favicon. It doesn’t have a native app or Twitter or Instagram. It doesn’t use AJAX or SCRUM or node.js or Sinatra. It doesn’t have an API or an RSS feed or VC funding. It hasn’t been featured on a prominent tech blog or won an award.

It tells me the soups of the day.

Freely distributed information that’s relevant to the person reading it. That’s web design.

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.

Bulletproof Web Design, Third Edition

book

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.

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.

Dribbble on the iPhone

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.

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

banjo

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.

New Work: Web Standards Sherpa

Yesterday, Web Standards Sherpa launched. A WaSP outreach project initiated by Aaron Gustafson and Easy! Designs and sponsored by Microsoft, Mozilla, Opera, W3C and several other companies.

screenshot

I had the pleasure of handling the initial design and art direction for the site and working with the fantastic team that put this project together. It’s exciting to see it alive and kicking.

Web Standards Sherpa will…

“…provide web professionals the opportunity to receive feedback, glean advice and learn best practices from experts in the field to help them improve the quality of their own work.”

Check out the first pool of articles from sherpas Jared Spool, Aaron Gustafson and Erin Kissane or read more from the Web Standards Project.

Evolution

One of the things I’ve tried to maintain with the branding around here is a building on top of what currently exists. Rather than completely toss out the visuals of designs and previous logos, I like to keep hints to the past. Part of that helps familiarity, but it also maintains a path of evolution rather than revolution.

evolution

Last week I rolled out an updated SimpleBits mark and simplified layout. I started tinkering a few months ago over on Dribbble and after some great feedback, settled on hex shape borrowed from the inner cube of the old mark, which was carried over from the original pixel art logo way back when. The new mark should work far better at smaller sizes and applications (which was the reason for the tweaking) and seemed fitting to bring back the original orange from the first (extremely dated) design from years ago (11px Verdana still looks good, no?).

Along with the new logo I made some adjustments to the template here as well. Most of those changes centered on a new typeface: FF Milo Web Pro which is versitle in various sizes, looks great in all caps and can be served up via Typekit (you need to purchase the font from FontFont first, which then unlocks it for use with Typekit).

Here’s to personal sites being a perpetual sandbox.

CSS3 For Web Designers

For the fourth time in my life, I’ve written a book. It’s titled, CSS3 For Web Designers and it’s available today in paperback and ebook formats from A Book Apart. I couldn’t be more excited, seeing this little green thing launch after months of planning, writing, editing, fretting. I certainly didn’t do it alone.

book cover Photo by Jason Santa Maria

I wouldn’t be writing books if it weren’t for Jeffrey Zeldman, so it’s especially fantastic to have CSS3 For Web Designers be the No. 2 offering from A Book Apart—a publishing house created by Jeffrey, Mandy Brown and Jason Santa Maria. Their focus on “brief books for people who make websites” was a perfect fit for the book I wanted to write: a practical guide to portions of CSS3 that work today, usable by anyone right now. I’ve been speaking about how CSS3 can be safely and easily utilized on the experience layer of well-crafted websites over the last year, and it’s wonderful to have that research packaged up in paper and pixel form.

Following up Jeremy Keith’s HTML5 For Web Designers masterpiece was an impossible task. His book was the right time, the right subject and the right author. It’s an instant classic. Daunting as it was, I set out on a similar task: show what can be done right now, no filler, and let people get back to work. The brief book format is rather brilliant for these types of subjects, and ABA already has several more titles in the works from the likes of Kissane and Marcotte. It’s an honor to be a part of this.

If anything sounds good in the book it’s because of Mandy Brown, the most detailed editor I’ve worked with. Mandy has a frightening grasp on the subject matter while at the same time mastering the editorial tone. That combination makes her some sort of supereditor (a word I’ve just invented). If anything looks good in the book it’s because of Jason Santa Maria, whose design system is one of the most clear and pleasant book layouts I’ve worked within (that’s Jason’s photo above as well). And if anything is accurate it’s because of Ethan Marcotte who handled tech editing like the gentleman-genius he is. As I mentioned earlier, I wouldn’t be writing books if it weren’t for Mr. Zeldman, so to have him publish this little book is a special thing.

So go grab a copy! I recommend the paperback + ebook bundle. You’ll get the beautiful book as well as inline video within the epub version. A great way to demonstrate those transitions, transforms and animations.

And check out Jeffrey’s blog post, Jason’s blog post, Mandy’s blog post, as well as a sample of chapter 2, Understanding CSS Transitions over at A List Apart which was also published today.

Introducing Dribbble

Let the games begin! Rich Thornett and I have been building Dribbble for what seems like years (oh wait, it has been that long). About a week ago, we quietly rolled back the curtain so the public could finally see what’s been happening in private beta. I’m pretty damned excited about this.

Firstly, what is Dribbble? From the FAQ:

Dribbble is show and tell for designers, developers and other creatives. Members share sneak peeks of their work as “shots” — small screenshots of the designs and applications they are working on. It’s also a place to talk design, give and receive feedback and iterate toward better work.

By posing the question, “What are you working on?“, Dribbble creates a 400 × 300 pixel window into the creative process that didn’t exist previously (many of you may remember Cameron Moll’s Screengrab Confab back in 2004, an early inspiration). A place to peek over the shoulder of those creating beautiful things, leaking works-in-progress or teasing with glimpses of unreleased projects. A place to discover new designers, illustrators, developers and other creatively-minded folks to give and receive feedback. And a place to iterate and play off the shots of others. What Rich and I have been actually creating is a community.

We’ve bootstrapped Dribbble 100%, working on it in our free time. I’ve been continuing the writing, speaking, client work, etc. that happens here at SimpleBits, while Rich is a full-time Ruby on Rails Developer at Cambridge-based PatientsLikeMe. I’m proud of what we’ve been able to create between the two of us, while juggling other responsibilities. Working on this with Rich has been one of the most exciting, challenging and enjoyable projects I’ve worked on to date, and I’m feeling very fortunate to have been able to collaborate with him right here in Salem (truly the next big web hub, yeah?)

I also couldn’t be happier with the path we’ve taken with developing Dribbble: a slow one. Building the community one member at time. Worrying about details. Iterating constantly. Listening to feedback. We’ve never been in a rush.

Quality has been one of our main priorities since opening up the beta some 9 months ago. It’s the reason Dribbble is still invitation only. Not because it’s an elite hangout, but that having the community draft new talent keeps the cat photos out (almost) and helps us scale the app as needed.

Much much more to write and talk about going forward. But for now, it’s great to have the court opened up to the public, and we’re looking forward to making the experience even better and growing the community. For now, get in there and check out some of the amazing things that people are working on. It’s truly inspiring.