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

I’ve been inspired… and I have a long weekend, which means that I’ve spent the last couple days buried in my laptop. My back aches, my eyes are screen burned, but nothing stops the freight train called inspiration.

I give you the new and improved CatCubed.com! Also, I’m releasing Mr. Cube the Cat as an adorable papercraft doll that you can make yourself! Like the new version of the site, he’s still in beta but he’s stable and I’m releasing him into the world anyway!

Download the Cube the Cat, papercraft PDF (version 0.6 beta).

Yep, I’ve gone and scratched that designer itch that has been bugging me for a while. I’ve decided to use CatCubed as a means to experiment with new web techniques. Besides the cute little paper Cube the Cat, the new site includes:

• HTML5 semantic structural elements – minimizing the use of divs except where appropriate. I’m still not perfectly happy with the semantic structure of the HTML. Some limitations were due to the layout particulars and the wordpress CMS. I will revisit this at a later point so that it is more in line with proper HTML5 semantics.
• Extensive use of new CSS3 styles – multiple background images, rounded corners, rgba, box shadows, etc.
• CSS built using SASS
• Simplified navigation – Got rid of the sidebar modules clutter. Also, post categories have been reorganized with a focus on the three main things I write about art, code, design.
• Coming Soon – more robust art, code, and design sections with highlights of my various projects. Mobile version of the site (it’s a image heavy site now, so I think a mobile version is in order.)

The site works best in webkit browsers (e.g., Safari, Chrome, or Internet Explorer with Chrome Frame). If you are on a gecko browser (Firefox, Camino) everything works but you are missing a few design elements due to lack of Firefox’s ability to use multiple background images (this is supposed to be added in Firefox 3.6). I have not tested the site in Opera, but Opera is decent so it should work (except for some of the CSS3 styles). I also haven’t tested in any version of Internet Explorer, and I don’t plan on it. I’ve added the HTML5  shiv so that IE will recognize the HTML5 elements, but considering the fancy things I’m doing with floats, it likely fails pretty bad.

I’ve kicked this whole thing out fairly quickly and I’m experimenting with a few things so there are likely a few issues here or there. If you are running webkit (Safari, Chrome) or gecko (Firefox) and run across any bugs let me know.

I have a few additional things I want to do to this site over the coming weeks and months. So expect to see more changes.