Hot on the heels of Kern Me is Shape Type—by the same people, incidentally. This type, you test your abilities to design type as well as the masters who made the fonts in the first place:

Compare your aesthetic sense with the masters of type

My mind is thoroughly blown by this. It’s another tour-de-force of HTML5 programming. Like Kern Me, Shape Type is an amazing use of the canvas element. Who knew that you’d be able to replicate Illustrator’s vector-editing environment in a web browser? Not me.

Type nerd? Appalled by keming? Then you will really love the Kern Me game.

Entirely too much fun

This is an inspired bit of coding, spectacularly well done. And not only do you use your left & right arrow keys to shift the letters, as in standard typesetting apps. To increase the amount of shift, and totally without thinking I held down the ‘shift’ key while using the arrow keys, and that works, too!

In my post about Steve Jobs’ death, I didn’t write about the effect he’s had on my life. I should do that, here.

I got my hands on my first computer, a Mac Classic, in 1990. The first thing I thought was: this is a new tool for art. I started creating 2-bit artwork in glorious MacPaint and, while it was silly, pretentious stuff, those pieces were the first tentative steps that got me to where I am today, illustrating & making websites. Thanks, Steve.

“Pillar”, from a series called “My Family & Other Dead Animals” (1990)

When starting up Photoshop today I received an error:

Could Not Initialize Photoshop Because the Disk Is Not Available

And then I was told that, specifically, my scratch disk wasn’t available. Huh? I have four of them! They’re right there!

It was all very peculiar, because I haven’t changed anything about my computer in the past several months. Other than to update to Adobe’s newest version of Camera RAW. I can’t say that this caused some problems, but I searched for the error message. Several people suggested checking out the scratch disk’s permissions.

Whilst doing that, I tried a little repair tip that’s useful for a lot of applications: I started up the app with the Command + Option keys held down. Voilà! I was asked to pick my scratch disks, and everything is sorted.

Serge Keller has compiled a series of screenshots of early websites. How far have we come?

Alta Vista, which used to be the search engine, 1996.

Alta Vista in 1996 wasn’t a million miles away from Google today. Visually speaking, that is. Apple in 1997, however, shows how much things have changed:

Apple, 1997, during its “beleaguered” phase.

It’s been a while since I’ve seen this. I think it interesting the lack of change for “harder” information gleaning, à la Alta Vista & Google. Only recently has Google been modifying its look. Information services is clearly a very conservative field.

Web designers who are interested in providing an optimal experience for viewports of widely-varying width—I’m looking at you, traditional computers, iPhone & iPad—will be very interested in responsive web design.

A term coined by Ethan Marcotte in a revolutionary article (and compelling read), responsive web design takes together a number of elements that have been rattling around recently—CSS3 media queries, fluid grids, flexible images, in particular—and Marcotte showed how they can interact with one another to provide a powerful web presence across widely varying viewports. Since then, he’s expanded upon the subject by publishing a book. It’s the single best place to go in order to get up-to-speed on the subject—although, like all “A Book Apart” titles, it’s woefully small & at best a very general introduction to the subject.

I’ve just completed the process of converting a site I’ve been working on to a responsive design. This site is an ideal candidate for a responsive web design approach in that it’s an academic site & the participants, the prime candidates to access its content, are all around the world. The site provides information about upcoming workshops, meaning that the target viewers (participants in the academic project) are very likely to access the site’s content while using handheld devices such as the iPhone or iPad. As such, I received a nice introduction into the subject, particularly with the real-world repercussions.

Janus Cascade

One thing that I didn’t notice in Marcotte’s article or book is that by wrapping our designs in media queries, a style’s cascade is now two-facing. There are massive implications with this approach, and if you take a pixel-based approach, as opposed to the percentage-based approach Marcotte takes, all hell breaks loose. Here’s an example to show what I mean:

Say you have a DIV & when the viewport is a desktop size, you want it to be 100 pixels & float left; but on an iPad’s portrait mode, you want it to remain the same size & float right; and finally, on an iPhone portrait mode, you want it to be 300 pixels & display as a block. Here’s how you might go about that:

  @media screen and (min-width: 1040px) { /* For Traditional Computers */
    div { width: 800px; float: left; }
  }
  
  @media screen and (min-width: 810px) { /* For iPad: Portrait Mode */
    div { float: right; }
  }
  
  @media screen and (min-width: 320px) { /* For iPhone: Portrait mode */
    div { width: 300px; display: block; }
  }
  

If you looked at the page with the DIV in question in your various viewports, everything would seem to be OK. But for the sake of experimentation, on your desktop machine, resize your browser window.

You’d be in for a shock if you resized your browser window. When the browser’s wide, then the DIV is big & floats left. Shrink the window & the DIV floats right. What happens when you make the browser really small? Well, actually, it’ll still float right because you haven’t overridden the iPad portrait mode declaration. Now refresh your tiny browser window & you’ll see that the DIV now displays as a block. That’s because it’s not cascading the iPad portrait mode’s float declarations, because that condition hasn’t been met in your refresh. As Keanu Reeves would say: Whoah!

Now start resizing the window from that tiny width. You’ll notice that your floats aren’t floating, but displaying as a block; and furthermore, your box has not jumped to 1000 pixels in width, but has remained at 300 pixels. Again, it’s because you’re inheriting the display: block from the iPhone portrait mode declaration. See? Cascades now work two ways, depending upon how you resize. Double whoah! The solution here is to explicitly state in your iPad portrait mode that you want the div at 800px & also declare in each case where you want the DIV to float & how it’s to be displayed in the document flow.

Go With Percentages, Not Pixels

The other implication that I’ve only grazed above: working in pixels is a bad, bad idea. This is the reason why Marcotte exclusively refers to items in percentages: it’s a more elastic approach & won’t fall apart quite as thoroughly as pixel-based approaches. And in my experience, when I switched from pixels to percentages, the site coalesced really quickly.

Go Forth Warily

Freaky deaky responsive web design: you probably have a lot more testing to do now. And for Internet Explorer (prior to version 9, which is very good), you’ll need some help for reading media queries.

Make no mistake: responsive design is the future of web design & with the explosion of handheld devices, it’s very much worth it: no longer will you have to design multiple sites for different classes of devices. In fact, the first non-personal site, the Boston Globe, has just launched as a responsive site, and the power of this unified approach is self-evident.

Nigel Thornberry: Keep Calm and Blarghargh

You’re welcome, Internet.

Before I started off on my own, I worked for what seemed like an eternity for a graphic design firm. The art director would give incredibly vague orders & was outraged when we didn’t read his mind. I think a four-year-old would have been a better boss.

Step forward, Tiny Art Director! Your commands are far clearer, and your criticism are more reasoned! Example:

The Brief: I want you to draw me a dinosaur! Not a scary one! He's taking a bath.

The Critique: I don’t like him.

Job Status: Rejected.

Uhh, no thanks, I’ve lost my appetite.

So, who thinks that the designers were pranking the client?

Graydon Carter, founder of Spy Magazine; and,

Bozo the Clown?

Oh, Graydon—how your children cannibalise you…

First of all, happy new year! Let’s hope that 2011 will be better than 2010.

Longtime visitors to the blog may possibly remember that Ian released a freeware time-tracker called MateWatch—software that helped track your time when using the text editor TextMate. As you might have guessed, it’s now pretty much abandonware, although with Nick’s advice you may well be able to get it up and running again. But you should question whether the effort is worth it: it really is dead, unless someone is interested in picking it up & maintaining it.

I’m mentioning this because I noted in the web stats a few days ago a visitor from a website that’s selling a new time-tracking app for the Mac. Lapsus takes a very novel approach, and from a user’s perspective, it’s a model of orderliness: it polls the currently-opened window every 3 seconds & logs it. You can “train” it to recognise open windows in a given directory as associated with a given project. This is a really nice take on the idea, since set-up/maintenance is usually one of the most frustrating aspects of time-tracking packages. And Lapsus’ programmer, John Gallagher, claims that people have a tendency to a) forget to turn on the time-tracking software; and b) forget to turn it off. I’m certainly guilty of this & I’m certainly not alone.

Being shiny new software, it’s got its share of bugs. At first I couldn’t create a project for love or money, as Lapsus kept crashing. However, today it has magically allowed me to create some projects, so I’m off on my evaluation. Also, it appears that an open document in Photoshop CS5 wasn’t being recognised as being, well, open. And it could do with the ability to sort one’s projects in alphabetical order, rather than in the order by which one arbitrarily created them.

But, as I said, it’s new. What’s important here is that Lapsus is a very refreshing take on a perpetual problem & may well help you be more careful with your time-tracking. I’ll be curious to see how it polls when I’m just playing about on the computer—perhaps I should have a project called “Faffing”. Well done, John!

Update (24 January 2011): I’ve just received a message from John that version 1.0 of Lapsus is out & it addresses all the bugs I mentioned here. It’s now time to evaluate it in earnest :)

The good people at Mule Design have presented a very good run-down of how clients can make great design feedback. It’s really worthwhile because, in part, it explains that the client is not supposed to decide whether she likes any given design but, rather, is supposed to decide whether it helps her sell her widgets. The full thing is worth a careful read.

It also begs us to stop thinking of designers as “creatives”—something I must admit I’ve (inchoately) thought for some time. “Creatives” don’t want, and don’t like, feedback: they’re prima donnas. Design is a business, and it must meet business needs: otherwise it’s a pointless exercise in spending money.

In any event, we tend to be a bit more informal about presentations & feedback at Argument from Design: we help our clients develop a visual vocabulary, but haven’t yet needed much formal “training”. If we do, we know where to send them for it!

A brilliant idea: take the wonderful photographs found on The Big Picture & add teh funneh. As The Big Caption’s mission statement says, it’s

A complement to The Big Picture wherein Jokes and Statements are made using Typography.

They’ve not been publishing much recently: I hope the Copyright Police haven’t shut them down. Here are two of my favourites:

Fuck you, flowers—how does it feel to get kicked right in the face?

And, equally strong:

Hipsters, Start Your Photocopiers

Heh—it’s funny 'cause it’s true!

This is a fantastically surreal archive of interactive Flash blobs. In Internet years, this stuff is like a million years old, but I keep coming back to it when I need a jolt of the seriously weird. Han Hoogerbrugge hasn’t given up this work, having created a somewhat more restrained ProStress & the seriously fun Hotel series.

A still from the wonderful Modern Living/Neurotica series

One of the perks of downtime—perhaps the perk—is that you have time to play games. I’m a casual and very infrequent gamer: before this past week, I’ve literally spent about 30 minutes playing games in the past two years total. I’m therefore about as skilled playing “Call of Duty 4” as you might imagine.

And yet: how thrilling that Valve & Steam was coming to the Mac; and even more so to hear that Half Life 2 was coming with it! Your average PC user might think my enthusiasm retro (really? I’m super thrilled to play a six year old game?), but I just never played it. I’d only seen screenshots. It looked good.

I’m not into this for the blood & gore. Much like Nicholson Baker in “Painkiller Deathstreak”, his article about gaming in this week’s New Yorker, I’m struck by the beauty the artists have imagined for their worlds. Even when the setting is a depressed industrial town, in ruins after the alien invasion, it can take my breath away.

But the following moments looked… familiar:

Looks a bit like the Park Hill Flats over the Train Station

This could be the block of flats across from the Arts Tower

Wait! How did the Ponderosa get flooded?

I just wish people would stop shooting at me so I could enjoy the scenery.