Notebook

Being a compendium of thoughts, notions, and ideas about design. And sometimes bacon.

When the future feels like The Future Thursday, August 19th, 2010

I bought a nook.

I can’t tell you specifically why I did this, except that I enjoy reading and gadgets and this helps me with both. It’s actually a pretty nifty little piece of technology. And in some weird way it feels more like “The Future” than the thing I should have bought. I’ll try to explain.

When I was a kid, they tried to tell us all how eventually paper books would be replaced by digital paper. I remember seeing pictures of these “e-books” with their hopelessly arcane user interfaces and clumsy, picture frame aesthetics. When the Kindle came out, it felt right. If felt like “The Future”. The iPad, on the other hand, feels like the future. Notice the subtle difference? The iPad really does feel magical. Using one is totally effortless, and makes you feel like the first Neanderthal to wield a rock axe; when I first picked one up I was struck by the sense of being in the midst of a whirling vertex of evolution. Perhaps this is a bit hyperbolic.

The nook and Kindle, on the other hand, don’t feel that way. They feel, instead, like using a marketer’s version of the future. The nook and Kindle are a way for two massive companies to leverage warehouse upon warehouse of content that increasingly no one wants to consume in its current format. These devices allow those companies to pour old wine into new bottles. Are they still fun to use? Of course. The nook has some incredibly well conceived features. It enables you to buy any one of millions of books instantly, to mark them up, even lend them out. It’s light, the battery lasts for what seems an eternity, and it’s dirt cheap.

The iPad isn’t a lever or a new bottle, nor was it designed by any committee looking to repurpose a warehouse full of books. It isn’t cheap, and it has a huge bright (glass) screen that challenges its battery life. Still, it seems so far-fetched and so futuristic that I can’t even imagine it being mentioned in Stentorian tones on a news reel in 1951. The nook and Kindle have that feel. They are single-use devices—digital books, with trimmings—and as such they feel exactly like the sort of sci-fi widget you’d see at a World’s Fair next to the car of the future. And in a way, I kind of like it.

Lose weight like a web nerd Saturday, July 31st, 2010

I was always a big kid. I recently found a picture of myself from when I was about nine, shirtless and “mowing” the lawn. I actually looked like a normal nine year old kid, and probably for one of the last times. I wasn’t into sports and I hated the heat, so in the southern summers I would stay inside watching Monty Python episodes and snacking on who knows what. By fourteen I was, charitably, husky. It wasn’t until I met my wife that I ever considered losing weight or working out; she was always running around outside or doing yoga or something, and she had a diet that I would consider both healthy but tasty—something I had always thought wasn’t possible.

In a nutshell, I started going to a gym and walking constantly. For one thing, both are a way of life in Washington, DC, where we lived at the time; and the walking is not only culturally and civically encouraged, but necessary as well. I went from really large to basically normal in the span of about two years. But it’s hard to keep off that kind of weight. Doctors love to remind us that most of the weight lost during dieting will come back. And even though I wasn’t actually dieting, I was making drastic changes that weren’t necessarily second nature to me. I did a good bit of backsliding in the following years. We moved to a place that was almost openly hostile towards walking and public transportation, I got an office job and I picked up a two hour car commute. Countless Starbucks lattes and in-office Chinese lunches later I was getting bigger again.

I decided some weeks ago to get back on the proverbial wagon, to get back into the gym and change my eating habits again. Honestly, the eating has been the easiest. I always thought of myself as a food appreciator, someone who loves fresh and in-season foods and their preparation; I realized that my diet was in fact much closer to the average American one. Basically I came up with a few hard and fast rules that have really seemed to work for whatever reason.

Don’t eat things out of season. There’s just no point. Don’t buy tomatoes in January. Don’t eat oysters out of a jar in June. This isn’t going to help you lose any weight, but it certainly made me feel like I had more energy and that I was more connected to my food in a meaningful way.

Eating is not an event. Not for me anyway. As a wannabe food blogger, it’s easy for me to get caught up in believing that every trip is an excuse to gorge on weird food like the world may end tomorrow. It won’t, and it’s not. Give yourself fewer “special occasions” on which to eat and you’ll feel much better, and your caloric intake on weekends and holidays can be reduced dramatically.

Drink water constantly. I read something about hydrosis years ago, and convinced myself that these people drinking water all the time were putting themselves in harm’s way. This was dumb. Since I was drinking most of my calories in the form of soda, what did I know anyway? I had to turn drinking water into a bit of a show at first, so get yourself one of these aluminum canteens and walk around with it full at all times. You get a nice prop that way, and an excuse to get up from your desk and refill it from time to time.

Get in touch with your body’s fullness response. I used to eat until well past full. It was not uncommon at all for me to need naps after these crazy meals I’d eat, and I always felt slow and uncomfortable. I took after a good friend of mine who would routinely push away half of his food when we went out to eat, full or not. He’d take the rest home, and felt better the rest of the day. Along the same lines I started to listen to my body when it was full, a signal I had ignored for years. “After all,” I’d tell myself, “eating is an event and you deserve this.” Slowly, I’ve started to push that though away and just stop eating. Even if it’s only a small portion, every time I have to break out the tupperware after a meal I feel victorious. I don’t always win, but I’m getting better and better.

Go to the gym. The cheaper the better. I go to a YMCA, and it’s fantastic. I know a lot of people prefer expensive gyms, and that’s fine. I like a sort of working-class gym, mostly because the people are friendly and there are lots of families there. Also, people seem more realistic there; no one goes to the Y because their agent just called and told them they got the part in the new Christopher Nolan movie. Also…

Understand that going to the gym at first sucks. At least for me, it felt like more work after my work. I was uncoordinated and unsure of myself. Now, I enjoy it as a break from the norm and a chance to listen to a podcast or some punk or hardcore and feel really good. And while you’re there…

Run and walk as much as possible. If you ask me, this is ninety percent of what’s wrong with America. As a society we’re enraged when there’s no parking ten feet from the door of the Haagen Daaz. We’ve built our cities in such a way that walking is impossible, maybe even looked down on by drivers. So, you need to hack your routine a bit to get some walking in. Park a few blocks from the office. Use your lunch to walk around your building. Take walks with your kids in the stroller or in carrier. If you eat well and go to the gym every day without doing any cardio, you may look great but your heart will still hate you.

By trying hard ninety-five percent o the time to follow these rules I’ve lost about nineteen or twenty pounds, enough to go down a pant size and start to fit into some clothes I’ve been ignoring for a year or so. I’m not a fitness expert or a doctor, but that’s sort of the point: these things are tricks that make sense to me, so they’re easier for me to take to heart and follow. If you’re borrowing wisdom from a book you’ll probably lose weight, but what happens when you give that book away?

A list of things that I have no interest in, which are therefore the cancer that is killing the interwebs Wednesday, May 26th, 2010

Apple and Google, Part 2 Friday, May 21st, 2010

This post is tangentially about Apple and Google. It’s also about tech journalism and how it’s run by a bunch of nineteen year olds.

Google made some announcements today at their I/O conference. Among them is a new version of Android and a new initiative called “Google TV”, which is yet another attempt at shoving the internet into your TV. Gizmodo—the tech site operated by fanboys so zealous that they paid for stolen merchandise just to get a prototype iPhone—had this to say about the Google TV stuff:

Apple TV withered not for lack of potential, but for lack of ambition. It’s as if Apple decided to invade our living rooms, built the box they need to do it, then gave up when it wasn’t a wild, immediate success. In doing so, they squandered a multi-year head start.

From “omg you guise Apple rules we bought stolen thingies” to “Apple SUX” in less than three weeks. Staggering, even by Gawker standards. I’m tempted to break the entire quote down, but the gist of any rebuttal would be that Apple TV failed because one company can only make the television, movie and music industries play nice so many times in one decade. Apple did it with iTunes, and attempted to leverage all of that content in a familiar way for the broadest range of customers. It wasn’t intended to be an application platform. Apple didn’t want to wrangle any corporate partners like Sony or Logitech. They simply built a bridge from iTunes to the TV. And that’s what really gets me about the vast majority of technology “journalism” I read: it’s full of bizarrely twisted straw men. Gizmodo in this piece estimates that the Apple TV is a failure using a yard stick of their own devising. They might as well say that Microsoft is also a failure because they don’t make electric cars, and those are going to be really popular.

Besides, these are just announcements. With the exception of Android “Froyo” (the installation of which seems fraught with peril) none of these things are shipping yet. Even when they do, who can say if they’ll make any difference at all? Television manufacturers have been shoe-horning apps and internet widgets into sets for several years now, and the world has responded with a yawn.

The lesson here is to consider the source when it comes to tech news reporting. And when the source is Gizmodo, consider twice as hard.

Thankless tasks Tuesday, May 11th, 2010

Adobe seems to be the favorite whipping boy of designers and developers everywhere right now. Hell, I’ve even whipped up on them a bit. Some of the abuse is unwarranted; still other gripes are totally in line with some of Adobe’s confusing decisions. I wanted to use this quickie post to talk about two such gripes.

My workflow often has me taking screenshots of pieces of a design to sample colors from. I use Photoshop’s color picker to mix a color and get its hex code, which I paste into TextMate. The problem arises when I’ve left the picker open from selecting a previous color, and I drag a screenshot to Photoshop’s dock icon to open it. What happens? Nothing. The modal color picker is blocking the file from opening, and Photoshop gives no warning or indication of what’s going on. The easy solution is just to make the color picker a standard window that gets out of the way when file/open/save activities are going on. In a little bit of back and forth on Twitter with Jeffrey Tranberry, I’ve gotten some pointers to some third party pickers that kind of fix this. None are as good as a slightly spiffed up Adobe control would be. If I enable the Web sliders in the color palette I can sample and mix hex colors, but they’re split up between three inputs. The only way to copy the hex value out is either segment by segment or with a menu command (which has no keyboard equivalent.)

My other gripe involves open/save dialogs in Photoshop—and all of CS4 and 5. By default Adobe uses the expanded open/save dialog boxes in their floating variety rather than save sheets, and it just makes no sense to me. Jeffrey tells me that Adobe tried save sheets but beta testers hated them. I have absolutely no doubt this is true, but as designers we know how people feel about change. Adobe still has a lot of customers who are holding over from old versions and who don’t upgrade very often; if you’ve been looking at the combo box for ten years, the sheet is probably pretty jarring. But on a dual monitor setup with windows littered all over your workspace, sheets just work.

I’m going to stop kicking Adobe now. For all intents and purposes, CS5 is very good. Adobe doesn’t have the luxury of ushering in new paradigms of coolness with its UI anymore. They’re supporting repeat and corporate customers now, and have been for a long time. That goes a long way towards explaining the somewhat stale appearance of Photoshop and most all else in CS5. Still, these are those rarest of tools that it would be almost impossible for me to work without. I’ve tried Pixelmator and some of the other less expensive image editors out there; Pixelmator even solves the color picker issue. But for content creation, Photoshop’s toolset is the best. Attention competitors: make better content creation tools! Ignore all the workflow/pro-photog/whiz-bang jibber jabber. If you have the toolset and the key commands for quick content creation, people will flock.

Gratitude Thursday, May 6th, 2010

When I was a young whippersnapper, first deciding that code and design would be my life, I wrote an email to Sally Grisedale. At the time, she was the manager of the Apple Advanced Technology Group. The ATG was sort of the R&D arm of Apple, working on things that are now considered the crown jewels of Apple’s intellectual property; things like QuickTime, content searches, QuickDraw—we have the ATG to thank for them.

When I wrote her, the ATG was shutting down. I asked her opinion on what I should be reading and thinking about as someone obsessed with human interface and design. To my shock, she wrote back. That response introduced me to Edward Tufte, and encouraged me to seek out design in places other than the ones I’d been looking. It opened my eyes to the reality that design was everywhere, and that it’s more than veneer. I was so excited about her response that I kept it for years (filename, “Grisedale’s Reply!”), finally losing it in some pre-Time Machine hard drive calamity. I was compelled to write her again last night to thank her for that nudge all those years ago.

True to form, she graciously responded again. I’ll keep her response private, but suffice it to say I have at least another decade’s worth of inspiration. And if you’re ever in need of color and interior redesign consulting on the west coast, look her up. It’s no secret that design is a business of heroes and influences; it’s not, however, one where you get to converse with your heroes all that often. My advice is to reach out to the people who’ve made an impact on your design and your way of seeing the world. The response might surprise you, make your day, or both.

The credibility gap Wednesday, May 5th, 2010

Pre-1984 U2 couldn’t be any better, except possibly for the lyrics. Post-1984, Bono had given up any pretense of distance or irony about his lyrics and persona, and decided to become the Irish Jim Morrison or something. But before that, man. Best rhythm section in the business, killer Rickenbacker bass tone, amazing Vox-AC30-and-echo-and-Stratocaster guitar leads. In a lot of ways, when you remove the politics, they were just a great new-wave band. The first three records don’t sound all that different than the DBs, early REM, Altered Images or The Pretenders.

When I’m confronted with some new bombastic, overproduced U2 single in a supermarket for yuppies, it makes me mourn this old U2 who just made good tunes. It also forces me to consider the irony of being in a yuppie supermarket (ok, Trader Joe’s) and complaining about all the other yuppies. Maybe that’s the kind of thing that finally made Bono crack and buy Big Sunglasses.

Apple, Adobe, and closed platforms Thursday, April 22nd, 2010

There’s a lot of talk lately about the newly forming battle lines in computing. Microsoft has been rendered mostly inert. The future belongs to Google and Apple, and Adobe still wants a piece of the pie. Namely, they want Flash on every device everywhere, and Apple has made it clear from the moment the iPhone became available that they want no part of it. This decision has created a lot of hurt feelings, some grumbling amongst users, and turned some (few, but some) developers away. Still, I think it’s a decision that makes sense as long as you understand what Apple has at play—and could make sense for other device vendors who want control over the perception of their platform.

First of all, why does perception matter? Well, to see why you have to understand where the Mac came from. I recently overheard someone say that to understand how Apple thinks you just need a Mac; not necessarily a new Intel Mac either. Whether it’s in a stark aluminum enclosure or a beige box, the “soul” of the machine is what matters to Apple, and it’s always been the same. And really the soul is just a set of rules (the HIG), some ideas about human interaction, and a reverence (or fanaticism) for design. These things tend to pervade everything Apple does. You know an Apple product when you see it or use it. This philosophy starts at the logic board and radiates outward to the packaging, the marketing, the stores. This kind of reverence tends to be contagious, and as a testament just look at some of the best Mac and iPhone apps. They seek to emulate and elevate the indefinable experience of using a Mac, for better or worse. Does this mean there aren’t lots of copycat apps on both of those platforms? No. Every platform will have its share of “me too” developers, and no pay wall will ever keep them all out. But the stuff that rises to the top is often very good. It makes the host platform look like the best place to be for developers, and makes the devices on the platform seem like the best choice for consumers. This is the ecosystem of the Mac and the iPhone. This is how it’s always been. It’s never going to change, and if anything these characteristics will only get stronger and more pronounced over time.

Adobe has always been a part of Apple’s success. They produced apps that designers needed to do their work, that seemed to have reverence for their work flow, and that made their lives easier. But over the years, along with all those great apps, Adobe was subtly introducing a whole lot of lock-in of their own. Things like SVG, the PDF file format and legions of other Adobe file formats—these were all designed to keep designers in the Adobe garden. And in many cases they were designed to bring end-users into the Adobe garden, too. There is no such thing as a fully open source PDF reader, after all. And the same goes for Flash.

When web standards were just something Jeffrey Zeldman was ranting about on a mailing list and no two browsers did anything alike, the only way to build apps that would behave predictably on the web was to make everyone download the Flash plugin. Flash was relatively easy to learn, simple to deploy, and pretty soon was everywhere. Advertisers discovered the rich media ad unit, and web browsing was never the same. A billion “punch the monkey” ads later, and here we are: in a world where HTML5, canvas and javascript (and much faster processors and internet connections) can do almost everything Flash once did. And the historically poor performance of the Flash Player and Flash plugin on the Mac platform made it an easy choice for exclusion from the iPhone OS. In short, Adobe is losing its edge. The old pay to play days of interactive design are coming to a close, and Adobe needs someone or something to hitch its wagon to. This is where Flash CS5 and its ability to publish apps in an iPhone executable wrapper was supposed to save the day.

There are really two ways of looking at the situation. On the one hand, this ability would allow developers who already know the Flash toolkit to build apps for the most popular handheld platform in the world. On the other hand, have you ever used a Flash app that felt as good as a native app? This, I suspect, is the core of Apple’s argument: Flash apps on the iPhone muddy the perception of the platform. They would be easy and fast to create, they would likely flood the market as a result, and they would uniformly be pretty crummy. Pretty soon, the perception of the iPhone App Store could be (brace for troll) like the Android Marketplace: full of junk with endlessly variable user interfaces and hobbyist-level performance. As the owners of the platform, Apple has a right to say ‘no thanks.’ As a developer, are you locked in to Apple’s toolchain if you want to build iPhone apps? Yep, you sure are. However, if the toolchain for developing native apps may be a lock-in, the platform as a whole is not. Things like h.264, HTML5 and JavaScript are very open and are being positioned by Apple as the lingua franca of the web, data storage, and video. In fact, that’s the very opposite of Adobe’s Flash platform, which is encumbered by patents at every level. And Apple’s is not a lousy toolchain, either. There’s more power lurking inside it than even many developers realize. It’s produced some incredible apps, and will go on producing them even though there are some limitations on who can develop them and how.

Frankly, the limitations are what keep people coming back. When you remove these limitations you get a totally different experience, one that just doesn’t have the fit and polish Apple wants for itself and wants to try and espouse to those who develop for its platforms. Having used some Android phones, and spent time trying to get my daily work done on a completely patent- and lawyer-free Linux box, I can tell you I’m happy for those limitations.

Tonight we’re gonna mockup like it’s 1929 Thursday, April 8th, 2010

There are lots of ways to wireframe a design. I sometimes will use grid paper, or just sketch on whatever’s handy. Other times I don’t do much of a sketch at all if I’ve been thinking about a design for days or weeks beforehand. But for a project I’m working on now, I needed a more constrained method. I whipped up a quick sheet you can use to mockup screens for your iPhone apps. Each page has four separate boxes designed to mimic the iPhone’s proportions, with labels and a page title. It helped me out. Maybe it’ll help you, too. (And don’t worry: as soon as I have an iPad I’ll make one for that, too.)

iPhone Template Sheet (85k ZIP Archive) – Download

Stupid input tricks Wednesday, March 24th, 2010

One of the things you “get for free” when designing or coding for a WebKit-based browser (and unless you’re from the past, you probably are) are “bezels” around active form inputs. It’s a useful effect, but it’s a bit limited. On the Mac, the color used for these highlights is controlled by the overall look and feel you’ve selected in System Preferences > Appearance.

In my case, it happens to be the default “Graphite” look, which is sort of a dull purplish-blue. It gets the job done, but it does nothing for the design of my site. Chances are, unless your site follows Apple’s HIG to the letter, it won’t match yours either. So, here’s how to turn it off and replace it with something that works in other browsers (yes, you too Firefox) and matches your site a bit better. First thing to do is hide it. We’ll use the following rule to do just that.


input[type=text]:focus,
textarea:focus {
	outline: none;
}

There’s a lot we could do from here. The outline property is really useful in and of itself; it does just what you’d expect; it draws an outline around an object that extends beyond any border you’ve set. It’s nice because it allows you to create three dimensional effects like insets and bezels, or simply call attention to something on the page—like form fields. One side note though: outline doesn’t respect -webkit-border-radius or any prefixed border-radius variant, so it’s a no-go if you’re looking to do fancy bevels or effects on elements you’ve radiused this way.

Next, we’ll need some sort of method for controlling what happens when the input has focus. Ah, you say, what about using :focus for that. After all, that’s what it was designed for! Well, you’re right. You also don’t do much with IE6. Yes, I’ve vowed never to code for IE6 again. That doesn’t mean I don’t have a past littered with attempts to placate it. A lack of faith in :focus is a casualty of just such placation. Instead, we’ll use jQuery to do the heavy lifting. First, we’ll create a class that will change the look of inputs on focus.


input[type=text].active,
textarea.active {
	-webkit-box-shadow: 0 0 3px #0072ac;
	-moz-box-shadow: 0 0 3px #0072ac;
	box-shadow: 0 0 3px #0072ac;
}

Now, we’ll need some code that applies that class (or removes it) when the user changes focus. The following does the trick.


// Add the effect
$('input,textarea').focus(function(){
    $(this).addClass('active');
});
// Remove the effect
$('input,textarea').blur(function(){
    $(this).removeClass('active');
});

So, instead of the default outline treatment users will see a soft shadow, about three pixels in width, that’s a much nicer shade of blue. On the light background of my site, I think it looks quite nice. For yours you can change it to anything you like.

Bonus – now with 100% more old schoolness

If you want to do this with pure CSS and you haven’t been bitten by IE6, use this rule in your CSS and skip the jQuery.


input[type=text]:focus,
textarea:focus {
	-webkit-box-shadow: 0 0 3px #0072ac;
	-moz-box-shadow: 0 0 3px #0072ac;
	box-shadow: 0 0 3px #0072ac;
}

You can see the jQuery method working on my contact page. Hey, you should fill it out and hire me!

Me

Know your robot.

Nick Jones is a web developer, graphic designer and CSS nut living and working in the Outer Banks region of North Carolina. He's married to a wonderful college professor, has two dogs and a beautiful daughter born in October 2009.

As a graphic designer he has worked with everyone from car dealerships to record labels. As a web developer he's helped everyone from the Taiwanese embassy to large news organizations. Maybe you're next?

As seen elsewhere.

Oops. I tweeted

Older Posts »