In the past year or so there has been a trend in web design towards the use of scrolling, which can help to engage visitors and provides a feeling of movement and animation.
These web pages are entirely static, and rely on the visitor to interact in order to generate the ‘movement’. Back in the day if you asked for this a developer would reach for Flash, but nowadays HTML5 (which has a <ParallaxScroll> tag), CSS3 and JQuery are usually employed to achieve scrolling effects.
I’ve collected a bunch of scrolling websites that are built with the arrow keys in mind. Some of these are more 'animated' than others, and some scrolling websites feel a little bit clunky, but all of them are interesting and creative web experiences.
I’m not yet convinced that scrolling is something that e-commerce companies should be embracing en masse, but it can certainly be used to support brand and product campaigns, given that the best examples are inherently narrative. Portfolio-based websites (such as the two agency sites I've featured) are another area where scrolling could come into play.
Scrolling, scrolling, scrolling, keep those websites scrolling…
Volkswagen’s amazing non-animated animation
The VW Beetle website invites you to scroll down a very long page. When doing so it appears as if the page is animated, when in fact it consists of lots of stills. Hold down the bottom arrow key when you visit the page to kickstart the experience.
Smart USA
Like the Beetle’s website, this invites you to press the arrow key to scroll down the page. Try it…
Activate Drinks
A compelling one page, product-focused website that employs parallax scrolling to full effect.
Dangers Of Fracking
This anti-fracking website works like an infographic. The long page encourages scrolling to provide a narrative, learning experience for the visitor. Scroll down deep into the ground…
Nike Air Jordan
Nike has form in this area, using parallax scrolling as a conduit for storytelling. Check out the Jumpman site…
Inception Explained
Personally I figured out Inception in a dream but if you need help then aim here, and – I think you’ve got the idea by now – hold down that bottom arrow key.
Nintendo Australia
This is more of a horizontal scrolling experience that plays on the theme of Mario Kart…
‘Hero’ Wordpress Theme
Not a full-on scrollfest but a charming use of the header area, which makes use of parallax scrolling, to highlight the messaging in this area as the visitor naturally scrolls down the page.
World’s Highest Website
Perhaps a better description would be the world’s craziest website, this experiment in CSS revealed that the Firefox browser doesn’t know how to deal with a website that is almost 19 kilometres high! That’s right, 19 kilometres. There is an elevator should you not feel like scrolling all the way down.
One Design Company
A web development company that encourages left and right scrolling to access its various ‘pages’. The whole site is like one big single page canvas, which can be explored horizontally and vertically.
Bagigia
Is it a hot water bottle? Is it a bag? It’s both! I love a product with a story and this kind of scrolling website is a good way of engaging the visitor to find out all about it.
Apologie Paris
I see your scrolling and I raise you a barrel roll…
Carnation Group
An interesting web experience from this creative agency which combines scrolling with drag and drop image functionality.
Smart Argentina’s delightful Twitter account
I’ve featured Smart already but this is a brilliantly creative use of Twitter, as opposed to a standalone website. Visit the company’s Twitter page and then hold down the ‘J’ button on your keyboard (or ‘K’ if you feel like reversing). Amaze!
There are a bunch of other scrolltastic websites out in the wild, so let us know what you see. I’m particularly interested in product-focused websites, especially ones that include e-commerce functionality.
Reader comments (44)
9:05AM on 13th April 2012
Take a look at this too: http://yslexperience.com/fr-FR/explorez-ysl
9:07AM on 13th April 2012
Some wonderful examples, not only of design and execution, but of storytelling as well.
Particularly like the Dangers Of Fracking
9:33AM on 13th April 2012
I'm sorry, but IMHO its like Back to the Future......a spinning thing saying LOADING and nothing much happening while its LOADING.
As Nielsen says, in 15 years, all we've done is gone from slow sites with big images on a dialup to slow sites with fancy widgets on broadband.
Sure, clever and visually interesting, but slow response times and a poor user experience. I bet the bounce rate on these sites is massive.
Now, if they were as clever as they thought they were, they would auto-detect my 2Mb linespeed and serve up something more appropriate.
lecturer / researcher at University of Sunderland
10:16AM on 13th April 2012
Some very clever stuff - and reasonably entertaining to look at, but ...
... although I can see aspects of 'branding' in some of these, do any of these sites have real marketing objectives? If so what are they and how are they measured for ROI? And what customers/consumers needs are being met by these sites?
More style over substance?
Founder at True Radicals Limited
11:25AM on 13th April 2012
Another for your list - which I've admired for a while:
http://www.hegartyonadvertising.com/
Marketing and Communications Manager at Intellect
12:37PM on 13th April 2012
'The Connected Home - A Reality'is another great example of a scrolling site - http://www.intellectuk.org/connectedhome/
12:40PM on 13th April 2012
Yep, shocking load times. As Mark said "back to the future" not worth the wait and dodgy navigation, I've never had a scroll wheel mouse. And some of them have won awards...haha
Senior Ecommerce Manager at Gatwick Airport
1:51PM on 13th April 2012
@Mark interesting view point. I have personally always believed that the web was about pages that scroll. If you don't want it to scroll buy a book. Just look at the way tablet and mobile design encourage the user to scroll through things. Sure these examples are on the edge of some usability best practise, but you have to admire the way they work and then imagine this on your TV with a kinect interface. Sometimes we have to push design to progress and these are some great examples.
Business Development Manager at Evolving
1:59PM on 13th April 2012
Great selection of examples - I love the concept for brochure style sites - products that tell a story. You've missed a fantastic example though, the new Mercedes A Class site. Check it out as well.
Load times is an interesting debate. You have to consider the fact that broadband is getting quicker and quicker though. Look at Virgin Media doubling speeds like that. BT Infinity etc with the rest to follow presumably as infrastructure improves. Slow connections shouldn't limit imagination on this.
I do however disagree with VW's mobile scrolling page. Do I want to waste several MB of data on your site - no!
2:13PM on 13th April 2012
@Matt - my problem's not with pages that scroll, its about the sluggish response times that most of these sites exhibit.
You're right - tablet and mobile design do encourage scrolling through things, but generally not at the expense of usability.....they can't afford to as the next site is just a click away.
beetle.com may be really great....I don't know though as I gave up after about 20 seconds.
Nielsen "A snappy user experience beats a glamorous one" and "A 10-second delay will often make users leave a site immediately".
2:16PM on 13th April 2012
Some very clever stuff on show in these, and quite entertaining but …
I do wonder what the objectives of these sites are? And how do you measure ROI?
And what customer/consumer needs are being met?
A triumph of style over substance?
Marketing and Communications Manager at Intellect
2:35PM on 13th April 2012
Agreed Nielsen "A snappy user experience beats a glamorous one" and "A 10-second delay will often make users leave a site immediately".
Business Development Manager at Evolving
2:49PM on 13th April 2012
There's two counterpoints to Nielsen's facts and figures;
1) No one talks of a snappy user experience. 'Glamorous' campaigns (i.e. innovative and creative) get the bulk of PR. Also, this post was made and is getting quite a lot of responses. I don't think a post '14 best snappy response websites' would go down as well.
2) Wouldn't users wait 10 seconds if it's hyped to be a new online experience - backed up the PR? Surely this stat just applies to booking a hotel or buying a book, or something other mundane task that could be done elsewhere. Then you wouldn't wait.
Senior Ecommerce Manager at Gatwick Airport
2:58PM on 13th April 2012
@Philip totally agree with point 2! well, I would like to think users would be prepared to wait for something more engaging/creative.. but that's the designer inside me speaking ;-)
Business Development Manager at Evolving
3:23PM on 13th April 2012
Matt I totally agree.
I suppose what we're all getting at is the perfect mix of the two. User experience 'snappy' but keeping creative teams happy!
3:46PM on 13th April 2012
"Wouldn't users wait 10 seconds if it's hyped to be a new online experience - backed up the PR?". Dunno, but sounds like a great #econmsc research project.
Senior Ecommerce Manager at Gatwick Airport
3:55PM on 13th April 2012
So where do we reckon the new (and much talked about) www.fourseasons.com website sits in this debate.. its scrolls (not as creatively as examples above) but functionally and for speed it ticks a few boxs??
2:53AM on 14th April 2012
I have to agree with Mark and Tony, most of these sites are shockingly bad.
I thought we were all past mystery meat navigation but I see it's back with a vengeance.
Pity the poor web user.
The VW in particular is an absolute dog's breakfast.
There were a few exceptions, the Hero and Carnation sites were actually better thought out.
And in regards to Phillip and Matt's assertion that users will wait 10 seconds, I'm sorry but the latest research shows that you are dead wrong.
Users will wait less time than it takes to blink an eye before abandoning a page. That's nowhere near enough time for these pages to even get started.
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=3&pagewanted=1
Digital Commerce Consultant at neoworks
10:57AM on 16th April 2012
As a user, I waited 10 seconds without any problem, just because I was curious about the new online experience. Maybe these websites get hype only for a few hours (while it's new) but in the end of the day what really matters is the ROI.
Turning customers into advocates (Because brands are a group of individuals that share knowledge and not a result of an enlightened team anymore) is a question of delivering value and support along with an excellent service. These websites are trying to deliver entertainment, which is a valid way of giving value I think.
Business Development Manager at Evolving
11:20AM on 16th April 2012
I agree with Maria. Mark - your view is quite strong against it. The research cited mentions 'The two-second rule is still often cited as a standard for Web commerce sites.'
These are examples of creative digital advertising. If it's going to be an engaging experience, people will wait. Did you hear of the 'Take This Lollipop' Facebook experience? At least 14 million worldwide have. Videos on Youtube, you wait for them to load to get the experience.
I agree if it's a commerce site it has to be quick and to the point, no flash and simple nav, 1-2 clicks to get where you want to go. For creative ad campaigns though, these examples should push the boundaries of digital tech capabilities. Otherwise we'll just be putting bland into brand.
On a separate note, VW and Merc no doubt have some of the best marketing talent and agencies on-board, so they'll have thought things like this through well. For an online brochure that otherwise I'd never have read (through mail or dusty showroom shelf), it works for me. I don't even like the A Class but had a good look at it through this;
http://a-class.mercedes-benz.com/
Business Development Manager at Evolving
11:22AM on 16th April 2012
^^ Matt - that Four Seasons '$18m' site is definitely a great example - must be the industry benchmark now for hotels!
Digital Marketing Executive at Koozai
9:44AM on 17th April 2012
I love the Nike Air Jordan website, it is done so well and I'm sure it will inspire a few more sites as well. Nike seem to be at the forefront with their web designs.
2:20PM on 17th April 2012
Another example of this concept, to presente the team from Portugal´s digital marketing agency comOn.
http://team.comon.pt
3:39PM on 19th April 2012
Also see Art Of Flight Movie (Webby Nominated) http://artofflightmovie.com/
And this interactive infographic: True cost of an iPhone http://www.mbaonline.com/cost-of-iphone/
Business Development Manager at Evolving
5:54PM on 23rd April 2012
another recent example, only live at the weekend;
https://victoriabeckham.landrover.com/INT
9:35AM on 24th April 2012
Great post! I'm interested to discover how such sites can be flagged up to search engines. Reading it as straight html the only clue is in the title tag and possibly the url at a pinch.
Checking it in 'Rankchecker' #4 for 'Fracking' it clearly is achieving visibility. When I looked at the backlinks they where modest and mostly from blogs. The strength of this site, and why we see it at all is based on good old social media.
So it's not just the technology of the websites that is changing, the way that we get to know of its existence is in this case due to our love of being social. Together with coupled Google's recent changes in it's algorithms to reflect this sea change.
6:03PM on 25th August 2012
Greetings! Very useful advice in this particular article!
It is the little changes that will make the greatest changes.
Many thanks for sharing!
Online Marketing Manager at Debenhams
9:42AM on 4th September 2012
I don't like them. I want to click, I want to navigate, I want to read more.
Perhaps I'll get used to them but apart from looking pretty I don't really get them.
3:31PM on 10th September 2012
How do they perform in user testing? Are real users doing as the designers assumed/hoped? Answer may be "yes," but question work asking.
8:17AM on 11th September 2012
These are amazing websites. I really liked the concept of Inception. Thanks for coming up with them!
personal at personal
7:56AM on 12th September 2012
really such a useful information and i liked this site there is huge information.....like to come again
2:49PM on 19th September 2012
Interesting article. I like the anti-fracking website. It is very original.
7:35AM on 29th September 2012
Great job on this! You made something that is usually pretty confusing very simple and easy to understand. I LOVE your tutorials!
Digital Marketing Executive at Koozai
5:06PM on 22nd October 2012
Some great examples there! Creative thinking like this can really help a company stand out form the crowd and stick in people's memory. Hopefully that will help the brand and make people more likely to share and revisit should they or a friend require such services as they offer.
8:47AM on 26th October 2012
Website design can work or completely suck - so we chose the Parallax effect to go on our website re- design for October 2012. So we went the "scrolled pixels" route and the result is cool. Oh by the way this is the ONLY fully responsive web design based on Parallax that I have seen so far - its on http://www.goldtree.co.za
4:04AM on 29th October 2012
I'd be impressed if there was a review on how 'good' these sites are from the point of view of the Google bots.
12:56PM on 2nd November 2012
this whole trend is a flashback to . . . the grave abusive years of Flash websites. a true Flashback:). i.e. developers and UX designers abusing the audience with a lot of strut, but overall pretty awful usability. My brand new MacBook Air can barely play some of these sites. And I saw the Smart Car site gave up already
There will be some types of sites that this kind of scroll UX is appropriate for, but I guarantee the Red Bull and Anthropologi hipsters that buy in to these painful UX's will drop them in a year when too many customers complain, or they see their analytics dropoff rates. I think virtually every hip online retail store has already gone through this with Flash we've gone through all this before in the first half of the 2000s.
Note that the most powerful consumer websites on earth have deplorably boring UX and UI. But thats what the masses can handle. Mobile is puhing us backwards a bit right now, but thats the moment we are in. All my clients are asking for UX/UI that is "mobile friendly" and thus, responsive, adaptive or just so 5 years ago.
3:17AM on 13th November 2012
Since when does HTML5 include the ParallaxScroll tag?
(Hint: It doesn't)
Digital Marketing Consultant at Maverick Digital Media
3:53PM on 13th December 2012
Great examples, the fracking example particularly relevant, linking to the news at the moment!
Sputnik Agency
1:36AM on 16th February 2013
I too am interested (from a non-techy POV): How does setting up a website using the scrolling technique impact SEM, tracking and analytics...? E.g Beetle, with so many separate sections, product information etc etc
7:46PM on 26th February 2013
Some good examples in here, thanks for sharing this. Ive been looking for some unique and clean and simple ways to use the parallax effect.
3:13AM on 29th April 2013
What about Life of PI?
2:10AM on 6th May 2013
I am surprised nobody else has mentioned this in the discussion - but clearly you're all designers and none of you have to do new business for your agencies.
These sites are USELESS for directing readers to one specific part of the site because the whole page loads off one URL.
IMO they are beautiful and easy to read but they're hopeless for social sharing, SEO and hence, new business.
By co-incidence I wrote about this on April 23rd - Your One Page Website does not help your Biz Dev.
http://creativeagencysecrets.com/your-one-page-website-does-not-help-your-biz-dev/
5:29PM on 7th May 2013
Our's just went live:
http://www.ki-media.co.uk
I'd love feedback on it
Log in to post a comment