Slow Down, Observe, and Improve Your Craftsmanship

It's basically an automatic response. Your brain senses idle mental cycles and your hand reaches for the phone in your pocket. Next time you're standing in line at Chipotle and tempted to palm your digital pacifier, try this instead: observe your surroundings. No, really see the things around you. Study them and engage your grey matter.

I've been trying to do this more often lately. It doesn't come naturally, but at least once a day, I try to practice my observation skills. I think it's an important and healthy skill to cultivate. I also believe it is crucial for improving the level of your professional craftsmanship.


When that terrifying drop in mental stimulation happens, simply look around and pick an object to think about. If you're in line at Chipotle, maybe you zero in on that metal fence that separates the people in line from the patrons at the burrito assembly line. Look closely and ask yourself every question you can think of. How many pieces of metal were welded together? Why is the paint more worn right here? How is it mounted to the floor? How many bolts are keeping it together. The hipster up ahead just leaned on it - did it give or flex at all? Why or why not? You get the picture.

David Foster Wallace was one the masters of hyper-descriptive writing. Neal Stephenson has also written some passages with near-comical levels of detail (the Cap 'N Crunch piece from Cryptonomicon comes to mind). 

The powers of observance of these guys, though, are dwarfed by a guy named Nicholson Baker. I recently read his book, The Mezzanine in which the main character simply recounts what he observed during a single lunch hour. That's the entire book. It's a quick read and much more amusing than it sounds. If nothing else, it shows how many things we look at every day and how little we actually see.


In our fast-paced industry, I think we're all guilty of keeping one eye on the firehose of today's new and shiny and the other on what might be coming tomorrow. We rarely slow down and take the time to learn from what's here right now.

I think Dribbble is a good example of this. It seems that most users see a great shot and immediately leave a "So sexy, I love it!" comment and move on. This isn't all that useful to the designer (unless they have an insatiable ego) and the commenter isn't taking anything away. 

When you come across something that you like, stop and try to figure out why you feel that way. If you're a designer, take a closer look at that Dribbble shot. Why did it grab your eye? Did you like the blue used on the button? Maybe that subtle highlight at the top gives just the right amount of contrast against the outer stroke? Maybe the stroke isn't a solid color, but a subtle gradient from top to bottom? Maybe the barely-perceptible drop shadow (or lack thereof) isn't something you wouldn't normally think to do, but here it's really working. Open up the loupe tool in xScope and study every little nuance. The designer spent time on all of those little details and they'll appreciate your feedback on something specific.

An example

I've noticed that the best designers never produce small icons with blurry line work. Most of us will never be great icon designers (myself included), but there are some techniques we can learn from them.

Pixel hinting is a small thing I learned about not too long ago and it has drastically improved the quality of my icon work. I'm no icon designer myself, but I often use glyphs from amazing sets like Pictos, Picons, and Geomicons. Making these vector icons look crisp at small sizes takes a little extra elbow grease.

I've known about Photoshop's Snap to Pixels setting for a long time, but this alone isn't enough. If you turn on the pixel grid, zoom in on your glyph, and see that some anchor points aren't sitting squarely on a pixel, you're going to have anti-aliased (blurry) edges. Take a few minutes to adjust these point and you'll end up with a much nicer looking icon. Phil Coffman has a great screencast on pixel hinting at Method & Craft. This is just one of a million small ways to level up your design chops.

Seeing: it's not just for designers

This type of OCD-level attention to detail shouldn't be practiced by designers alone. If you're a developer, pay attention to the technical attributes of software that you use. If you've found a great Rails plugin, don't just drop it into your project without a second thought. Open it up and see how the author solved the problem. Is it the same way you would have? No? Why not? Can you think of a better way? Yeah? Run it by the author. Win-win.

If you're an SEO expert, try to learn a thing or two about design. Ask your designers as many questions as possible.

Once you have all the details required, you can embark on the task of inproving client rankings. Remember that a great design will not only improve usr experience but also improve the site's speed. Check out review of the hoth seo for more information on how design and SEO go hand in hand.


Tumblr to Surgery and Everything In Between

I never intended for it to happen, but it did. This has become yet another blog that has been neglected for far too long and now it is time for the clichéd "sorry for the lack of updates!" post.

Well, that's the sort of post I initially set out to write. As I organized my thoughts, I realized that the core of this topic is quite a bit deeper.

Let's start with the mundane. Almost exactly a year ago, I got fed up with Tumblr's excessive downtime and moved this blog to Posterous. Instantly, I felt like I was on an island. Tumblr has a great community and, if you're careful with who you choose to follow, the social interaction is actually pretty great. I "met" a lot of new people and got involved in a few projects because of these relationships. On Posterous, there's a slightly less Internet-meme feel, but the social elements are almost nonexistent and it feels like a very lonely place (especially when you're starting from scratch).

Not too long after moving to Posterous, I also started to get frustrated with the their platform and the limited customization I could do to my site. I found a great micro-blogging engine called toto. I began migrating my old posts over to toto, but never began using it full-time because I was thinking through how (and if) I wanted to integrate my blog into my professional site. I put blogging on the back burner.

Before I knew it, it was autumn, I still hadn't updated my blog, and I'd been to busy to think about restructuring my site and/or blog. I was also falling into a rut. I've always been fortunate to work with great people, but I was starting to feel less interested in the projects I was involved in. Like everyone else, I have my ups and downs, but this time I just couldn't get back up.

After I ran a half marathon in October, I began having pain in my right knee. Knee pain and running often go hand in hand, but easing up on the running usually improves things. Not this time. I completely stopped running and the pain continued to get worse. Long story short: MRI revealed that I have an arthritic defect (not running-related) on the backside of my patella (big chunk of cartilage missing) and the best (but not guaranteed) way to fix it is with microfracture surgery (40 min. procedure, followed by 6-8 months of physical therapy.

While deciding if and when to do this, I was dealing with two other persistent issues: 1) a chronic cough and 2) chronic back pain. Every single time I get a common cold, I end up with post-nasal drip that keep my coughing for months. I've also had back pain that varies between tolerable and excruciating. Both of these have been issues for over 10 years. The cough remains unsolved by my doctor and I'm scheduled to see a back specialist this month.

Last week, I went for a physical (first time since 9th grade) and found out I have a hernia and need to get an opinion from a surgeon (to see when, not if, to have surgery). I didn't even know what a hernia was, but when I looked it up I found that they can be caused by persistent coughing. Bingo.

Needless to say, these health problems have compounded my funk and I've somewhat withdrawn from a social life (in the online and physical sense).

I'm not big on New Year's resolutions, but it does feel like a new beginning and I get to decide how all of this affects me. Getting my body repaired is my top priority, but I also need to rethink my career goals. My professional (though not professional-sounding) goal has always been to simply "make cool shit". Sometimes I truly get excited about a client project, but  more and more I'm feeling a need to zero in on a project that is mine (or partially mine) that I'm so excited about that I loose sleep. I've had these moments, but they are too few and far between. This is what people mean when they say "if you love what you do, you'll never work a day in your life". If I had a New Year's resolution, this would be it: to not "work" many days this year.

I'm sure this all sounds like I'm feeling sorry for myself and I probably am to some degree. But don't think for a moment that I don't know how lucky I am. I have an amazing wife and two beautiful kids. Unlike a lot of people, my wife and I have jobs and we can pay the mortgage. I have some health problems, but I know damn well that a lot of people are much worse off than I am. I didn't fear for my life waiting for a bone marrow donor like Amit Gupta did. My 8 year old daughter doesn't have leukemia like her classmate does. These sorts of things put a "funk" into perspective. 

We all have ups and downs. I've been in a gentle decent for a while, but it's time to start climbing again. I may be hobbling on one leg, holding my back, nursing my hernia stitches, and coughing the whole way, but I've always enjoyed a good challenge. Bring it on!


How Talented Designers Make Good Engineers Great

Design means different things to different people. I wholeheartedly endorse Steve Jobs' philosophy:

Most people make the mistake of thinking design is what it looks like. People think it's this veneer — that the designers are handed this box and told, "Make it look good!" That's not what we think design is. It's not just what it looks like and feels like. Design is how it works.

Design isn't the outer skin of the product. It's not the Photoshop layer effects, the trendy noise and linen textures, or WebKit CSS image masks. Those things are tactical tools that can be used to stylize a product, but design is a holistic concept that defines how the product works.

I don't think it's controversial these days to state that successful product development must begin with design first. The way the product looks, feels, and behaves is the product as far as the user is concerned. Defining these things is the role of the designer. Bringing them to life is (usually) the role of the engineer.

Like many people, I'm inspired by all sorts of physical objects — automobiles, watches, bicycles, mobile phones, etc. I'd wager that most or all of these things — the ones that have the most passionate and loyal customers — originated from a design-centric initial phase.

We can be pretty certain that Apple products aren't conceived by engineers initially. In fact, a recent Reddit comment by an ex-Apple employee sheds light on the fact that the Industrial Design department's decisions trump all other decisions by other divisions. In my head, I envision meetings between Jonathan Ive and the engineers going something like this:

Jonny Ive: Good afternoon, team. I wanted to get together with you guys today to show you the next iLust revision. We spent a lot of time on this design and we're really proud of what we've come up with. We're absolutely certain that our customers are going to love it. We had to invent a new manufacturing process for this new unibody design and we worked with twelve different companies before finding one that could build the switches within our stated tolerances. We spent a lot of money during this phase, but we feel that people are going to appreciate the weight savings and the refined styling.

You have [some minuscule measurement] for the primary logic board and [another absurd measurement] for the battery and various antennas. These things are non-negotiable. We have goals for battery life and overall weight. We may need to compromise here and there, but you folks are smart, we've been here before, and we're confident that you can see this thing through.

Then the engineers raise their eyebrows, let out a sigh, and get to work. The constraints that feel nearly crippling at the beginning gradually become challenging, but achievable goals.

Contrast this to my vision of product development at any PC manufacturer. Note that the meeting is now led by engineering:

Jonny Engineer: Hey guys, thanks for getting together. We've been working through some pricing models here for some various components and we think we've found a good combination for the Insipid, our iLust-killer. Finance has been riding us hard this quarter, but they've green-lighted these specs. We're going to one-up the iLust with quad core processors and user-upgradable memory. We negotiated with twelve different suppliers to make sure we're using the cheapest commodity components.

As usual, we need to display our full barrage of partner decals front and center. Product key decals, service tags, all that FCC shit on the bottom. These things are non-negotiable. Other than that, make 'em sexy fellas!

Ok, I know it's not really that segregated at either company, but I the point stands. Which company do you think has engineers that are getting pushed outside their comfort zones, solving incredibly challenging problems, and finishing a project with a huge sense of pride? Who do you think is attracting more high-caliber designers? Which engineers are disgruntled because they're making decisions based on constraints that having nothing to do with the user experience? This disgruntlement then trickles down to the designers who have to polish a turd and ship a compromised product.

That's great, you say, but I'm a web developer - what does this have to do with me? Generally speaking, engineers are not great at making decisions based on what's best for users. This isn't because they can't. It's just that engineers are usually completely focused on what they're good at - writing clean and elegant code, refactoring fugly code, building robust test suites, and growing neckbeards. A completely different mental calibration is needed for making design decisions that are in the best interest of the end user. And trust me, switching contexts on the fly is extremely challenging — I try all the time.

For example, it's great that your app exposes an elegant RESTful API interface, but is your site best served by the typical index/show/edit/update screens? A good designer (or a great developer) might realize that the use cases for the app's target audience would prefer a more efficient workflow. Perhaps some (or all) of app's functionality could be exposed on a single screen with AJAX calls handling the server requests. Sure, these sorts of design decisions will probably make for more dev work, but the designer's job is not to make life easy (or harder) for the engineer. It is to design the best product possible for the user.

Lousy engineers will get upset because they have an us-against-them attitude. Good engineers won't complain and will find a way to get the job done. Great engineers will appreciate the constraints and embrace the challenge. They'll also have a much more impressive technical toolbox and enviable portfolio to boot.

"Choose things in your life that will endure, that are a pleasure to use. Classic clothes never go out of style. Furniture should get better with age. Choose things because they delight you, not because they impress others."

- Marney Morris, founder and president of Animatrix

Styling Table Cells with jQuery.tablesorter

The plugin jQuery.tablesorter is handy for allowing users to dynamically sort tables by clicking the column headings. Out of the box, the plugin assigns a class to the <th> that is currently being sorted upon, but <td>s are not marked in any way. I wanted to add a subtle visual cue to the entire column on a recent project - something like this:


A few lines of Javascript will handle this scenario. If you find yourself needing a similar effect, you can use (and perhaps improve upon) the following code: