In case you haven’t heard we are planning another Tweed Ride on March 27th in Berkeley. I am really pleased with the design for the flyer. It plays off my earlier flyer for the second SF Tweed Ride with some similar elements and uses the same typeface, but the balance of the layout is different as is the color palette. Designing the promotional material is one of the more fun aspects of these events that I put on. Of course, the most fun is the smiles I see on the faces of the participants!

The photo is of the J.D. as the fabulous Twettle, the Tweed Beetle by the excellent photographer juicyrai.

East Bay Tweed Spring Ride

March 27th, 2 pm

2 pm — Sally forth from Ohlone Park (near North Berkeley Bart)

Midpoint — location TBA (games, contests, and a special performance)

End (5-6 pmish) — location TBA (libations)

Spring is the air and the rain has let up, so it’s time to dust off your smoking pipes and take your tweed out of mothballs! Put that dapper cap on your head, oil your chain, and get ready to pedal with panache!

Join us for the first SF Tweed Ride of 2010, this ride will take place in the lovely town of Berkeley, CA. The ride will be anywhere from 5-7 miles with a break midway through. We have plenty of enjoyment planned for you all including games, contests, and a special performance by the wondrous Corpus Callosum! As always, the tweed ride will end at an establishment that offers libations and cheer.

Photo of the J.D. as the fabulous Twettle, the Tweed Beetle by the excellent photographer juicyrai

Rob Foster’s recent post /the/path/of/most/resistance is a brilliant write up on the inherent lacking of the visual file system. as he says:

…for the average person, the file system is so complex that everything outside of the desktop and the documents folder appears to be a vast labyrinth which most likely hides booby traps and minotaurs.

I think this is even true for many advanced users—even if they refuse to admit it. Even I have come to realize the more I have begun to use my iPhone, the more I see that I don’t need a file system for most of my tasks. I consider myself an experienced user and even I would love for the file system on my main computer to if not disappear at least further hide itself. Do I need to always have the system folder visible? No. Nor do I really need to see the applications folder as long as I can search and see a list. Actually come to think of it nor do I need the music folder or photos folder. A dedicated music/photo app does a better job sorting those file types then the I would manually creating folders.

The last point says it best. The visual file system is a generalist tool (like the CLI). We’ve moved away from the concept of sitting down to use a computer; instead now, we are sitting down to do a specific task: i.e., write a report, listen to music, post a tweet, check out facebook, watch a show, build a website, etc. The computer itself needs to get out of the stinking way so we can just do what we sit down to do. Having a global visual file system is just more clutter and doesn’t really help any of those tasks—not even webdev.

Yes you heard me: I do not need access to my computer’s file system to do web development. All I need is access to the project’s files on the server and a local store of the same, both of which I really only need to see when I’m in my IDE. I don’t really need to even know where this local store is as long as I can just click on the name of the project and it loads (like Coda and other IDEs). The local store could for all intents just be archive that opens when I open my IDE. Well there is the photoshop graphic editor issue but that could be easily solved by having a list of web projects show up when I “save to web.” You know how much time I’d save if I could just select from a project list whenever I “save to web” rather than have to dig around in my folders for where ever the images folder is for a certain website?

Speaking of, Panic please make an iPad version of Coda!

p.s. this brings to mind one of my gripes about Windows—fonts. To install fonts on OS X you click on it and then click install font. On Windows, even the new Windows 7, you have to copy it in the font folder (usually C:\Windows\Fonts), which is a granted not too hard but it’s still annoying to have to manually dig into the system folder to install a font.

Compare Apple’s slick new iPad ad…

with the new HP Slate ad (warning: blaring techno)…

Seriously HP, Could you make the fingers and interface look even more fake? Even the blipvert editing, lens flares, and pounding retro techno can’t cover up this post-production hack job.  I mean I know Apple’s ad has some weird rotoscope moments—physically impossible zero-friction lap spin—but theirs at least seem deliberate choices for effect. Yours on the other hand seems like it was done by somebody’s cousin who just downloaded a pirated copy of After Effects.

And while we are at it, who is your target market here? Ya got a bit of a confusion going on here blaring old 90’s techno and user searching for modern indie rock. Though since the person using this device seems to need to search wikipedia to find out what “indie rock” is, maybe you are targeting people who are completely ignorant of music? Or maybe you are just targeting people who had horrible thumb surgery accidents as children?… that would explain the Tim Burton-ish font choice at the end.

Clued in by Daring Fireball about a recent NYTimes article on the Game changing nature of the iPhone App Store. There are a number of good quotes in the article, but the one Gruber pulled was the one that made me think:

“Our goal is very simple: We want to have the best platform for applications that there has ever been on any product,” notes Mr. Schiller, the marketing executive. “We know we’re not perfect, but we know we’re better than anything else that has been and we want to keep improving it.”

He’s right too. Of course the app store has issues—often of the highly annoying and stupid kind. However, it has succeeded to do something remarkable. In the article, Craig Moffett says “The iPhone will be remembered as the first true handheld computer.” However, he’s missing half the story:

The iPhone app store is amazing not because of all the things it allows a phone to do—just ask any iPhone hater and they’ll name a number of features that it’s missing. What is truly remarkable about the app store is how it’s normalized the process of searching for, finding, purchasing, installing, and even upgrading applications.

In the world of computers, it’s only the geek and the early adopter who even thinks about new software. Whereas, the average user seldom installs any new software. Your normal user will often use what’s already installed or what IT (or their son/daughter) installs for them, and they are also often terrified of upgrading anything. The iPhone app store has changed the all this. This is why the app store is a game changer. Suddenly the audience for shiny new applications isn’t just the computer know-it-all, it’s anyone.

Gruber posted today on Daring Fireball. That the The New York Times Skimmer prototype is still available. It’s rare fascinating look at the the process that likely went through to in development of this new site:

• The New York Times Skimmer (launch version)
• The New York Times Skimmer (prototype version)

Who knows how long the prototype will remain up so go now. I’ve also added screenshots below in case the prototype goes away.

Prototype - home page

Final Version - home page

Prototype - article

Final Version - article

First of all i gotta say that this is an excellent use of modern javascript techniques. They are using the awesome jquery framework to pull in their RSS feeds and populate the skimmer ad for the animation effects.

The two versions seem to be mostly different aesthetically. There are differences between the two javascript functions but I haven’t dug into them. The most obvious UI changes with the final version are:

• Moved the nav to the right
• Removed the dark top bar and lightened the palette as a whole
• Added raised dropshadow effect around main content area
• Use of the nyt font for headlines (using Typekit.com service)
• Altered the typography (all caps for nav, removed blue from headlines, increased line-height slightly for excerpt text)
• Addition of a byline with the journalist’s name
• Articles now load in a overlay popup with the skimmer remaining visible behind it, rather than a slidedown which covers everything except the nav.
• Home Page name changed to Top Stories

All in all it’s a excellent improvement between the prototype and the final version. They went from what was essentially a mock iTunes app to a more readable approach that focuses more on the content than the navigation.

The final design recalls more the feeling of a paper, while still maintaining the clean webified rss reader approach. I especially love the use of their typeface for the headlines and the removal of the blue link color which makes it feel less like a list of links to be clicked though immediately and more like a something that deserves to be read throughly.

Still however I do have two main critiques from a UI perspective…

First a small critique: The only way to close the popup are to use the “Back to Section” button or to hit the Esc key. Instead of this approach, they should have used a simple close button on the upper right. Also clicking on the background should close the popup as well (this is how most overlay popups work).

The biggest issue however is that clicking on an article loads iframe to load the entire page. It’s a shame really. They’ve gone through all this effort to create a clean ajax approach which makes the online version of their paper fun to use and then they ruin it by dragging the user back to their cluttered site. It would have been simple to use ajax to show only the article content in a clean easy to read manner. Maybe they did this because of advertising or maybe it was because they thought iframes would be easier to code—whatever their reason, it turns the Skimmer into nothing more than a gimmick.

So I’ve done a bit of cross-browser testing for my new CatCubed design:

• Safari, Chrome (i.e., Webkit): works perfect
• iPhone Mobile Safari (i.e., Webkit): works but any fixed attachment is ignored (this is due to how the iphone browser works)
• Firefox, Camino (i.e., Gecko): works except for multiple background images
• Internet Explorer 8: Works (after a small fix) but is ugly due to lack of CSS3 support
• Internet Explorer 7: fails dramatically because of IE float bugs
• Internet Explorer 6: fails dramatically because of IE float bugs and lack of CSS2 support
• Opera 10: fails somewhat due to a bug in how Opera handles floats. Also is ugly due to lack of CSS3 support

Also, thanks to Jason I found (and fixed) a bug that only occured on large monitors (24″  or more).

As I mentioned, I added a small fix for IE so it’s readable, but I’m not bothering to fix the IE6 or IE7 massive fails and I added a very basic stylesheet for IE6/7 so they could at least read the content. Also, I added a “why don’t you try another browser” warning to the site for IE users.

Just thought I’d mention that this redesign is meant as a means for me to experiment with new techniques and do so quickly, which is why I am no longer fully supporting IE with this site. There are workarounds for many of the techniques that I am using on this site, but it would take me at least twice as long to implement. All my real work projects will continue to be built with a graceful degradation / progressive enhancement process in mind.