Remember the excitement you got when Cilla's Blind Date screen rolled back?
Why am I comparing scrolling down a parallax website to the singletons on both sides of the Blind Date screen?!
Anyone above the age of 25 will remember the highlight of Saturday night TV (which is high praise indeed when you had the likes of Gladiators, Big Break and The Generation Game on air) Cilla Black’s Blind Date. They don’t make them like that anymore!
Do you remember the excitement of waiting to see the reactions of the chosen date and the person who read the questions (e.g. if you were a fruit what would you be?). As the screen rolled back neither knew what to expect. Well, that’s how we felt when researching for this blog post about awesome parallax websites. As you scroll down a page you just don’t what’s going to appear!
“Mmmm, you’re gonna have to give me more info than just Blind Date analogies” I hear you mutter. Ok, we will…
It is widely believed that the first parallax website was built by Ian Coyle for the Nike Better World campaign (NB: Nike always seem to be at the forefront of innovative marketing techniques. See our blog post on Gamification). The term is derived from the Greek word “parallaxis” which means alteration.
Although parallax web design has only been extensively discussed in the last couple of years, especially this year, it first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay.
It is the web design technique of using CSS to make different layers on the web page move at different rates. When a user scrolls down a page they will be presented with content, such as photos, videos, text etc coming in from different angles and not just all moving down the screen together. It elevates the interaction a user has with a web page which of course can only be a good thing!
Like with all new web design techniques that become very popular some get it massively wrong. So for every really cool parallax site you are likely to see one that has clearly incorporated it because the web design agency know it is a hot topic. These sites are usually really complicated or make no sense as to why content is being shown when and where it is. Worse still, is when content overlaps content that should have moved!
We are not in this business to criticise other agencies so we are not going to show you a load of bad examples of parallax sites. We would much rather show you some excellent examples. Therefore, below are 4 websites we have seen recently seen that have applied parallax brilliantly:
This is probably the best use of parallax we have ever seen! The National Geographic website, http://www.kennedyandoswald.com, used for the Killing Kennedy TV programme is simply brilliant.
Of course it is helped by a fascinating story but the way in which the site expertly displays and communicates content is something to admire. There are links for photos, speeches, descriptions of people in photographs and many more cool features.
We really like the way the sound changes as you scroll down the screen. The attention to detail is remarkable such as the diner background noises used for the image below.
The Puma microsite for their running shoe Mobium is simply brilliant. As you scroll the athlete runs along a stage (shown above) with various content links appearing in the form of little green circles so let’s call them “content circles”.
The image below shows an example of what happens when you click on one of these content circles. In this particular instance a video appears.
Going back to the Blind Date analogy, our reaction to this website would similar to our reaction if the screen rolled back and Megan Fox was standing on the other side (wow, we really do love websites huh?).
This creative agency showcase their work brilliantly as the user scrolls down the page. There is also the functionality to open up a traditional menu screen for their work (see image below) and not use the parallax features.
Of course we are bias but to us web design in an art form and this website is akin to the Sistine Chapel. The artwork is simply stunning, especially the whale splashing into the sea (scroll down to the bottom of the page).
There is so much great content to look at with lots of videos, photos, text, stats about the film and loads more.
NB: The book is better than film.
What are the downsides?
There are downsides to a parallax site, even those as cool as the 4 above. The major problem is that a single page obviously reduces the SEO possibilities as only one set of meta information, one effective h1 tag and one URL are possible.
Although parallax can be applied for mobile the user experience often suffers. Out of all the sites that we have used for this article two are using parallax design for a mobile.
Madwell have no mobile site at all, just a static page with contact info and The Life of Pi website instructs you to open up the site on a tablet or desktop.
The Puma Mobium microsite still uses parallax but the user experience is massively diminished and it becomes very annoying as you click links that you don’t to click.
The Killing Kennedy website also uses parallax design for mobile but there is so much content on the page, loading times take a massive hit and when scrolling you are left hanging.
Bring back Blind Date!
So parallax sites have a few draw backs but when they look so cool they are more than worth it. If you go down this route just make sure that you are doing it for the right reasons and enhancing the user experience.
We hope that you like these websites as much as we do and Cilla, if you’re reading this which we assume you are as we know you are a big parallax fan, get Blind Date back on TV (but don’t sing!).