Shared publicly  - 
 
I redesigned my website and pulled out all the stops.
260
113
Chris Venus's profile photoAndre Molnar's profile photoBeen Woo's profile photoAlexander Johne's profile photo
66 comments
 
"pulled out all the stops"
That's an understatement...
 
As usual, you've raised a bar most of us would have to crane our necks to even see.
 
man that turned out really well. you deserve a beer. a good one, too.
 
i'm going to give jekyl a look. been dreading upgrading to d7.
 
I need to complete my migration project as well. As always, great way to push yourself to the limits, Steven -- nice work.
 
Holy shit, I almost fell out of my chair! I noticed there's no public repository for this on your github. Where do I go to submit issues and is there a possibility to get a chance at fixing them myself? :D
 
As I said in the post, it'll happen soon. Pieces like the CSS 3D renderer can continue on their own. But I'd prefer to keep the site private. It's a unique identity, and people who wish to learn can do so from the live site. I've had designs ripped off before, and it's just not fun.
 
Looks great in safari. Thought you should know it really doesn't work properly in Chrome 18.0.1003.1 dev-m on WinXP
 
I think gobsmacking is the right word. Also love the impressionist version, and the navigation behaviour is excellent: I almost can't believe the site is static.
 
It all sounds interesting but for me looking at it in chrome (on windows XP) I seem to be getting the fallback. Is this just not supported by your magic or is there a bug somewhere?
 
Beautiful concept and implementation; and thanks as well for the blog post.
 
Wow! I didn't know this was already possible! Well done. :) I had to refrain from using Page Down as I usually do, because it doesn't do your site justice.
 
Now THIS is what I call a redesign... This is really well done, you're crazy ! Fantastic work...
 
Everything about this is rad. Awesome work pushing the boundary of what's possible in the browser
 
thanks for implementing an RSS feed. sorry to be missing out on so much of the UX. :)
 
Very impressive and rather cool, really nice work!
 
Definitely get the gold star for experimental goodness!
 
It's nice - but doesn't work so well on my version of Chrome, took me a while to figure out that I had to scroll down to see anything... Would be cool if the header crossfaded into the content :)
 
Marking the time / date I first saw this - it's great to witness the future.
 
i once bookmarked your site header, the one i perspective 1-2 year back i guess (discovered via smashing magazine post), and with this new post.. i am book marking the <2012> post
:-D
 
Did you hear that sound? That was my jaw dropping. Well done, Sir. Well done.

I was stumbling over "losing momentum scrolling" though and this needs some clarification, I think.

Since iOS5, there's a property called -webkit-overflow-scrolling: touch which makes momentum scrolling in overflowing elements perfectly possible (in theory). I'm pretty sure +Steven Wittens even played with it. The unfortunate truth, though, is that this property obviously has more than one bug aka side effect. One of them I was able to demonstrate in this testcase: http://halfbyte.github.com/webkit-ios-bugs/touchscroll.html, another one is that Steven's site completely breaks down when adding the property to the scroll container. I just tried it with the iOS Simulator and iWebInspector (cool tool to debug iOS webkit issues, btw.)

I'm pretty sure this can and will be fixed soon, but until now, momentum scrolling on iOS webkit in overflowing elements is something that pretty much works on a random basis.
 
+Jan Krutisch I didn't know about this feature until today, but yeah, I discovered the same incompatibility.
 
very impressive! quite an inspiration to push the boundaries further
 
Amazing stuff, as if enough people are not already saying that ^_^

You also mentioned switching your site to jekyll. Static generation is totally the way to go for virtually any type of site that does not actually need dynamic content. I actually played with jekyll quite a bit but ended up writing my own python alternative (http://github.com/lrvick/rant).

For commenting on my site (http://lrvick.net) I ended up going with disqus which works quite nicely within my jinja2 template implementation. Should be trivial to do similar in jekyll.

Anyway, keep up the amazing work :-)
 
Wow, nice website. I would love to use the slide effect (when clicking on a link) for my own site if thats ok.
I can imagine how to do that with ajax. Click on link, get content, put it in a conatiner and do some transitions (css and/or javascript). But this would mean the Url stays the same, which it doesnt at your site. Could you post a short comment how you do this ?without? ajax.

Thanks and awesome work!!
 
You win the internet. That is awesome.
 
nicely integrated, smooth transition, i like it.
 
amazing trick!
plus very good article, i was excited like a child all long how the story will end. although from another perspective ;) it just starts.
 
Your pushState loading system reminded me of the pjax lib by defunkt (http://pjax.heroku.com/), however, looking at the network traffic, it has one clear advantage. Pjax does not work with a full HTML page download, merely html content. If you're using Jekyll (or octopress, which is a fork of jekyll i like), then its useless.

You have already said that these things will work their way to Github, which i eagerly anticipate.
 
i'd love to see the scene editor you've put together on github. mashing up such a thing myself would take me a decade.
 
this is very visually appealing and attractive. keep up the great work!
 
Latest version (as in installed it just to look at the site!) in Vista - get the fallback. :(
 
Looks cool. Seems to break home/end keys to scroll to top/bottom of document, in all of Safari (5.1), Chrome (17), and my WebKit-based RSS reader (Gruml, which otherwise seems to deal just fine). Scroll events seem pretty badly broken in Chrome, but work fine in Safari and Gruml. As you no doubt expect, it overall works best in Safari.

Oh, and I like the font, except strings of successive capitals (esp. acronyms like CSS 3D, VRML, DOM) look strange to my eyes, which I think is because the capital letters are not as tall as some of the ascenders on nearby lowercase letters. The initial caps don't have this effect; at a glance I don't know why not.
 
+Matt Ginzton It's a deliberate typographic effect that simulates small caps. Long strings of regular capitals are quite visually disruptive. Once OpenType-features are more supported, I can use real small caps, but not today.

I imagine it depends on the quality of your font renderer, though Klavika is supposed to be screen optimized. I admit I didn't test closely on non-Macs.
 
Dude, this is insane. Congratulations and excellent work!
 
Insanely great, thanks a lot for inspiration :) And special thanks for covering the site in black for protest!
 
Well done.... works perfect, smooth as in chrome on Ubuntu 10.10 ....
 
This is an insane hack!!
Translate
 
HTML5 + CSS3 is SO AWESOME. Welcome to the new era of WEB 3.0.
 
Your blog is awesome, it's the most coooooooool i've ever saw.
Add a comment...