Just Scroll(www2.nissan.co.jp) |
Just Scroll(www2.nissan.co.jp) |
tl;dr
;)
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)
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.
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?
(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...)
Edit: pls, though. not in the wrong hands.
>> Functional redundancy.
What?
Sure there is, it's called a video.
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)
It works in IE7+ (though the js engine in IE7+8 is slooooow).
With a lot of work you can get something that looks pretty but at the expense of a lot of other things (like usability).
If you could interact with the elements and there was more than 1 dimension of scroll.. then that'd be going beyond.
Which, in the age of video, isn't really that much.
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.
run:
setInterval(function(){$(window).scrollTop($(window).scrollTop()+10)},10);
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...Cool to look at? You betcha
Not everything needs to be a technological marvel
edit: Uniqlo, that was it. not on their Pinterest anymore. Video for same effect - http://youtu.be/e5FM-VcE7UA
There is an endless array of divs which is absolutely positioned, ie:
<div id="container" style="top: -2920px"> <!-- endless array of divs --> </div>
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.
(disclaimer: I don't actually know any html, just how to click 'view source' in Chrome)
That's a bit strange for someone that visits hacker news!
Rather scarily, it also works fine on a Lumia 710 as well!
I don't care what anyone says - IE is not a stinking heap of poop.
http://www.phoboslab.org/log/2011/08/are-we-fast-yet
"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."
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.
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! :)
Memory issues apart,This is pretty cool!
Edit: Akamai reports that the average Internet speed in India is 0.9 Mbps: http://www.businesswireindia.com/PressRelease.asp?b2mid=3042....
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 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.
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.
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.
(Mind you I have 24GB of memory on this machine. I wouldn't willingly choose to run Windows 7 on any less than 4GB.)
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.
As I mentioned above, our internet speeds are crazy fast. I downloaded the whole thing in about 3 seconds on my home internet, 10 on my 3g ipad.
The only issue with the ipad was that you couldn't flick and have it just scroll down.
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.
