Making Love to Webkit
acko.net
acko.net
The end-result is a terrible experience for me. The scrolling is extremely jaggy even after the 3d-fluff has scrolled out of the viewport.
And the initial view with the skewed text is about as functional as those flash websites that were famous in the 90s...
And I really like it... but....
It's style over substance and reminds me of the bad old days when Flash polluted every website with something snazzy but superfluous.
I don't really know how to phrase what I'm thinking. It's good to try new things, especially with stuff like CSS3 and WebGL on the horizon. But it's bad to just shoot things down. While I don't think for a second that you're promoting 3d transforms as something that everyone should be using for everything... some people out there really will latch onto it as a "cool thing" and abuse it. Which isn't your fault, it's just the way the world works.
So in summary. Awesome, love it! But I hope CSS3 doesn't become the new Flash.
In a way, it mimicks what Tim O'Reilly wrote on piracy earlier today: "History shows us, again and again, that frontiers are lawless places, but that as they get richer and more settled, they join in the rule of law."
For example, Facebook with its terrible URLs and JavaScript everywhere is very fragile. Hard to cache, hard to archive, but who cares? If the whole site went bankrupt in ten years, would many people actually export their data? Or a blog on Rails, where every article becomes obsolete after a year. Or a restaurant website. Those sites can use all the magic they want.
But if you write about mathematics or art or other things that should pass the test of time, please make it bare-bones, semantic HTML. If I really like it, I can just archive it and show it to my children later. It's like using hover for menus, who'd guessed that this would break for millions of devices one day?
If I had been coming up with examples of sites where people would want to export their data in such an event, Facebook would have been number 2 or 3 on my list, after an email or a document site (eg. Gmail or Google Docs).
It's like everyone assumes nobody but them knows how to make websites.
But in the sense in which HTML5 is going to replace Flash, I am pessimistic that many websites will go to the same lengths. And where there is more code, there are more possibilities to break in the future.
To be nitpicky about usability of newfangled stuff: Using web fonts disables the built-in dictionary on OS X, both in Safari and in Chrome. (I am so happy that this is one thing Facebook has not yet embraced.)
The beauty about HTML/CSS over Flash is that we can fix bad design.
Think about things like Readability that can transform horrifying websites into clean, readable articles. This is what happens when you give the entire stack to everyone, instead of hiding things behind a proprietary runtime (that crashes... and crashes... and gets hacked... and then crashes).
I'm convinced that we will always be unfortunately afflicted with some poorly-considered design/engineering fad or another. Before Flash websites, we had Java applet reflections, animated GIFs, fluorescent green on black... the list goes on. But thankfully, with HTML/CSS the client can choose to mitigate this a great deal.
Comparing this to flash, or arguing why it doesn't work in X browser, or why it's bad UX or - is completely off base.
It's "cool". He's experimenting. That's it.
Description of the working page/site:
The top half of the page is a series of colored streamers and the site title, giving a feel of the old "pipes" screensaver on MS Windows. A regular page view is presented towards the bottom right of the initial screen-area but tilted in perspective with the top-left corner away and the right edge towards the viewport. As one scrolls down the perspective view of the streamers alters and the page view moves in perspective until it is flat, square-on, to the viewport. It gives the feeling, to me, of moving underneath the title area in a more 3D way.
Hope that helps anyone, who was perhaps searching around to get a look at this thing, to decide if they want to see it or not. There's probably a screencap on YouTube ...
My only issue with css transforms is how unfamiliar the world of transforming/scaling/rotating/animating/etc is to the average web developer despite studying the basics of computer graphics. Whenever I look at the source, I feel like it has been written to never be read or understood again.
- _why the lucky stiff
Ah the days when the web was standardized.. were.. really, really short.
The author mentions he wrote it to be forward compatible as Firefox and IE10 add support, but it plainly isn't doing anything in Firefox right now...I'm curious if there's a reason or just a bug.
[1] http://hacks.mozilla.org/2011/10/css-3d-transformations-in-f...
Btw You are pushing limits and turning people off by it. To me that are usually good signs, looks you are on to something with this approach.
I am pretty sure you just sparked a series of creative ideas coming up the next weeks. Thanks for that!
Crazy thing is that it doesnt do the smooth bounce scrolling.
...Uncool.
But whenever you do something like this you have to be sure to test it on enough browsers and devices to be sure the vast majority of your audience won't be left with a bad taste in their mouth. Either that testing didn't happen or it was decided that the negatives were worth it in this case. The experience isn't good on iOS (iPhone and iPad) and just a little better in non-Webkit browsers. The scrolling is the big problem. It's okay for a minute but soon it's annoyance become more and more prominent in your mind.
Anyway, this is really really awesome! Having the js backup was good thinking. I hope it works out for the site. It's not something I'd use on a site with an audience that was really important to me but not everyone has the same priorities. In any case, besides the practical considerations, the effect itself is very impressive. Kudos.
Oh, wait.