Interesting design concept - but a horrible implementation of it.
You can't just go and load a thousand divs and not expect a wide variety of performance issues across all the different platforms.
You need to have a tile manager or something behind the scenes the same way that Google maps does, especially when targetting smaller consumer devices with limited hardware specs like tablets and phones.
* iOS5 - with an iphone 3gs (laggy to the point of being unusable)
* iOS5 - with an iphone 4 (laggy to be the point of being unusable, unless your patient). I don't have an iphone 4gs to test on, but I suspect it might be more on par with ipad 2 performance. The differences could be to do with retina display vs non retina display as well I suppose.
* iOS5 - with an iPad 1 - roughly same performance as an iphone 3gs - crappy
* iOS5 - with an iPad 2 - not too bad (but thats because of the gpu tile rendering in safari going on behind the scenes i suspect.
* Firefox 15 on a quad core i7 imac - massive ram spike, and crazy lag with the scrolling
* Chrome on a quad core i7 imac - no problem.
I'm not even going to bother trying this out in IE!
edit: Latest version of Opera has provided the poorest results yet, it keeps lagging and pausing and reloading the images after they have already been loaded (didn't check to see if it was actually downloading them again though)
I understand that IE9 uses the GPU to render the DOM.
That would help vastly with things like this, unfortunately it does little for its JavaScript performance, but since this page doesn't seem to execute any JavaScript during scrolling (i think) i guess it's not relevant for this one edge case scenario :-)
Chrome on Android 4.0 (Galaxy Tab): Takes about 30 seconds and then I just get some text and a picture of the car. Chose 'Request Desktop Site' and it is fairly close to desktop experience. Sometimes you get bits of white page as it brings the images in.
Builtin browser on Android 4.1 (not Chrome): I had to request desktop site again. Almost usable. There are always images displayed, but drawing after using your finger may take a second or two.
Safari iPod Touch 4G iOS 5.1 - sporadically somewhat usable for one touch interaction.
Thats fascinating that Chrome on Android is capable of delivering the desktop experience of this concept even with the limited hardware specs of the Galaxy Tab.
I wonder whats so different under the hood of Safari Mobile on iOS 5 vs Chrome on Android 4 to deliver such different results, maybe its a hardware thing with tablets vs phones?
What do you mean by limited? It has 1GB of RAM, a dual core 1GHz ARM processor, and just shy of a megapixel screen. As someone else calculated there are around 30MB of images. Quite frankly this should work out okay. (To my knowledge the iPhone platform tends to be skimpier on the memory. But then again there is less multi-tasking going on to soak up the extra.)
IIRC there was some past differences in iOS versus Android. Something like iOS prerenders the page to series of tiles so that as you scroll around it is really just showing tiles (think of how Google Maps works) while Android has a display list that is culled to the viewport and then (re)drawn as appropriate. But both sides were updating and changing how they did things.
I tried loading this on my android tablet running chrome and it worked reasonably well. The initial load took a moment to load all those images but after that I did not have any real issues scrolling. I am honestly surprised by reports from others that this webpage brought their machines to a near crawl especially since it worked fine on my tablet.
I might just ditch Firefox because of this webpage. A fresh session of Ffx15 goes up to 1.5 GB memory usage, pushes everything into swap and brings my whole OS to a grinding halt until I kill it. In other words this link is basically a very effective DoS. In Chromium it works fine. Am I the only one having this problem?
(Edit: I have several Ffx addons running and no Chromium addons, so the comparison was unfair. Maybe I'll just ditch some of those addons...)
I doubt that the patch helps in this particular case as all images are present in the DOM, so Firefox will merrily load all of the images, independent of whether they are visible or not. This has been a longstanding architectural problem.
I use Firefox 15 on Ubuntu, with quite a lot of addons. I watched "top" whilst I opened the page, and I saw Firefox quickly consume 30% of my RAM (I have 8GB). Once the page finished loading, it dropped back down to 5%.
The page works fine for me, but I imagine it would suck if I had less RAM. I tried it in Chrome too and it never even got as high as 5% memory usage.
I'm willing to bet that the developers who made this page, and the managers who approved it, all have plenty of RAM in their machines.
I am using Firefox 15 on Windows XP. I had no problems whatsoever.
I opened up windows task manager, and watched the mem usage for firefox.exe. Before navigating to that webpage, it was using 150 MB of memory. I went to the webpage and scrolled down as expected, and saw the mem usage peak at around 430 MB when the page first loaded, then as I scrolled down and sat at the bottom of the page, it stabilized at around 300 MB.
After closing the tab and going back to leave this comment, firefox is back to about 150 MB of mem usage. I think there is a problem with your particular installation (or add-ons or drivers), not a general problem with Firefox itself.
FF 16 (Aurora channel), Windows 7 here: no noticeable issues. Memory usage showed about 350 MB, and that's not remarkably far from regular usage numbers anyway.
Memory usage jumped to about 2GB before the machine became totally unresponsive. I did something else for a few minutes while I waited for the kernel to kill anything using too much memory and get my machine back to a usable state.
Firefox 15 on Linux, I see 1.7-1.8G of memory use and the page is (unsurprisingly) significantly slower to load than in Chrome. It doesn't bring my OS to a halt because this machine has plenty of RAM, but clearly it's not good.
While that's not a great result for Firefox, I do think the people at Nissan who did that could have shown a little more restraint.
My Fx (15, on Vista) was using 700 MB with 20 tabs open, went up to 1GB with this page open, but there's no noticeable performance hit; the page scrolled smooth and snappy. It's probably your addons as you mention, most of us would benefit from periodic checking and removal of addons we no longer need.
I'm running FF 15 too, but I'm not seeing what you're seeing. 700MB working set with this page open, which drops to 650 (temporarily) if I close the page and do about:memory GC and CC.
(Mind you I have 24GB of memory on this machine. I wouldn't willingly choose to run Windows 7 on any less than 4GB.)
Which channel are you on? I'm running the latest beta and it works fine for me. If you're on stable then I can see how it would be causing you some issues, especially if you have FireBug installed.
Amazing visuals. I have no idea if the idea scales. Technically might be a bit PITA. The sensation of time. Passing. Wait, what? The modular decomposition. Birdseye flight sequnece. Functional redundancy. An innovation communication language? Dunno. Pity about the ad-part =D
People complaining about the scaffolding - oh well. It was probably built by someone who had a bright idea but knows nothing about webdesign and learned it on the fly. But the idea was great! I was delighted - I scrolled through the whole thing, shared it on facebook, then looked up the wiki for the car since the ad was Japanese. I had no performance issues, as I am using chrome on a fast ethernet connection. For someone who doesn't know web design, they did a great job!
Wow, this is atrocious on so many levels. 30mb of jpg files? The inner web development nerd in me believes there is a better more efficient way to do this. The length of the page is ridiculously long to scroll and unless you have a Mac with a Magic Mouse and smooth scrolling and not a Windows machine (like I use) the scrolling is super jerky.
We fell into the scroll trap with our website last year. I spent a long time figuring out how to get scrolling working smoothly in all the browsers (hint, don't rely on anyones libraries but your own).
Most of it is not that interesting but if you scroll down to Snapper and Twilert (about half way down) you can see how we did the animations ourselves instead of using lots of big jpgs. (actually, cudos to jquery.rotate for making it possible)
I don't think there is anything special about this "video" ad that lends itself to scrolling. You can take any video (infographic, music video, advertisement) and conceptually scroll through it using a mouse, but what does that gain you?
If you could interact with the elements and there was more than 1 dimension of scroll.. then that'd be going beyond.
A 29.3MB video runs multiple minutes - so long as your available bandwidth is above a relatively generous minimum, the experience will be smooth and uninterrupted.
I'd wager that the average person would burn through this 29.3MB faster than it can be downloaded, considering how fast you'd be scrolling.
Which isn't much seeing that Japanese broadband is CRAZY fast. My 100mb line costs me about $60/month. and I could upgrade to Gigabit for around 80/month.
interesting for me that's really jumpy, it looks like each frame is 120px high? so something like this is much smoother at the beginning for me:
var step = function() { $("#container").css({top: (parseInt($("#container").css("top"))-115)+'px'}); window.webkitRequestAnimationFrame(step); }; step();
but in the middle where it zooms into the people in the car, it get's out of sync...
+1 it's playing like this that inspires ideas in others - should it be so prominent, maybe not. Furthermore, it's going to get linked a ton which is great for Nissan's brand.
The actual scrolling is performed by a 'dummy' div, has the same overflow. Some javascript will be listening to scroll events on this div, and updating the position of the above div.
This is typically done as scrolling 'floating' images on most browsers isn't smooth, & to 'jump' the scroll the correct amount to achieve the effect.
It's not just an endless array of divs because then the grid lines would constantly be shifting (that is, unless your browser happens to scroll in increments that are exactly equal to the height of one of the cells).
They were constantly shifting to me. I was able to get it so that they were barely shifting, but the best I could do made it look like the images were ever so gradually drifting upwards due to a slight mismatch.
"Of all browsers and systems I tested, IE9 subjectively produced the best results. It seems to precisely synchronize JavaScript execution with the refresh rate: the benchmark runs at exactly 60 FPS on my machine, even though the timer is scheduled every 16 milliseconds, or 62.5 FPS."
An interesting exercise, but maybe not practical, considering how slow your average home internet connection is, and how much data you're trying to stuff through that pipe. It's IMO likely that most people will end up scrolling faster than the page can load.
Not to mention, this will murder any mobile device or weaker laptops.
Cool piece of marketing, but ultimately if the goal is to deliver a cool experience to as many people as possible, this implementation may not be ideal.
The goal is to deliver a cool experience first, and then reach many people second.
If the experience isn't cool, then it's not going to reach many people. I figured people would talk about usability despite the fact that it's a marketing page.
If I remember right, some apparel company used Pinterest's
"revolutionary" display (Masonry right?) to a similar effect. Perhaps a HN Search is in order! :)
I guess if you include dialup connections in the average? The page load seemed pretty much instantaneous to me on a standard 2Mbps Tata Indicom connection. At worst, I believe the average broadband connection these days would be 512 Kbps, and "more than ten minutes" is still too much of a stretch.
512 here, ten minutes just about fits the bill. I have been reading all these comments but have no idea what it is because it wont load for me at all. i cant load 30 mb. It's bsnl and it wont even give complete 512. more like 400.
Most of the indians use the traditional BSNL broadband.. of course my smartphone witha airtel 3g , docomo 3g it loads good..
but when i am on my PC,, with that BSNL, things are not so fine my friend..
That's exactly the point. It's an advertisement page, targeted to a specific demographic target that have access to a fast network connection. It's not something that should be always reliable and usable.
And we, the English, thank you for putting the indicator stalk on the right of the steering wheel. Seriously; that's a major factor in me buying a car.
I don't see how that is "better", it's just totally different. I think this VW version looks a total mess when scrolled. Nissan is much much simpler and smoother.
You can't just go and load a thousand divs and not expect a wide variety of performance issues across all the different platforms.
You need to have a tile manager or something behind the scenes the same way that Google maps does, especially when targetting smaller consumer devices with limited hardware specs like tablets and phones.
* iOS5 - with an iphone 3gs (laggy to the point of being unusable)
* iOS5 - with an iphone 4 (laggy to be the point of being unusable, unless your patient). I don't have an iphone 4gs to test on, but I suspect it might be more on par with ipad 2 performance. The differences could be to do with retina display vs non retina display as well I suppose.
* iOS5 - with an iPad 1 - roughly same performance as an iphone 3gs - crappy
* iOS5 - with an iPad 2 - not too bad (but thats because of the gpu tile rendering in safari going on behind the scenes i suspect.
* Firefox 15 on a quad core i7 imac - massive ram spike, and crazy lag with the scrolling
* Chrome on a quad core i7 imac - no problem.
I'm not even going to bother trying this out in IE!
edit: Latest version of Opera has provided the poorest results yet, it keeps lagging and pausing and reloading the images after they have already been loaded (didn't check to see if it was actually downloading them again though)