Share this post:
Luckily (for us), the days when web design agencies had to explain the benefits of having a website are gone. We are going on a new level now – how do you crete a website that is innovative and memorable, a website that support your brand.
Meet Parallax Web Design – our favourite this month.
What is Parallax Web Design?
Parallax web design (or parallax scrolling) is a design technique that places images in the background of a website, and displays them moving at a slower rate than the foreground content when scrolling down a page. The intended effect gives the content on the website a feeling of depth, and simulates a 3D environment. The degree of the parallax effect on the page can vary from very subtle, to the basis of an entire web design.
An quick example of this trend can be seen on this Mini of Australia website, which was launched this summer. Despite having only subtle background clues throughout the page, the effect is achieved beautifully.
Seem familiar? The effect itself is nothing new. Parallax scrolling largely dates back to the early 1980s when video game designers employed this effect to make 2D video games seem more three dimensional. Only then, the effect was on the horizontal axis. By showing the background layers moving at slower speeds than the characters and foreground elements, a completely 2D side-scrolling game began to feel 3D when in motion. There are countless classic examples, but any of the Super Mario games are likely ones that most people have personally experienced.
We don’t know what Mario had on his mind here, but we bet it wasn’t his impact on web design trends this year.
What’s so great about Parallax?
Parallax can help tell a story
Consumers love interaction, and a more interactive approach to your content may help with engagement on your website. In particular, parallax design is great for telling a story. Think pages about product development, case studies, or the story behind a brand. Particularly for businesses that want to feature a single product or service, parallax scrolling can be used to communicate a lot of new information very quickly, within an enjoyable experience.
As designers we’re always looking for new ways to capture people’s attention, and as online marketers we’re looking for ways to make online interactions result in sales. Parallax design is interactive and engaging, and can help set your business apart by balancing these needs on your website.
The technology is also in a place to sustainably support it
You may remember when interactive flash websites were trendy and ‘everyone was using them’. It’s easy to draw comparisons, but the case with parallax is different. Flash websites are getting harder to find because not all browsers support flash, and search engines can’t properly index their content (so people literally can’t find them). Neither of these are significant issues with parallax design when done correctly in JavaScript, which is supported natively on all major browsers. Parallax can also be implemented to be search engine friendly (more on that below).
When it works best
You’ll find many parallax websites online that feel like the example we just shared from Mini of Australia. It’s important to note that these more visual examples are often microsites, and not an actual homepage. As with any design trend, it’s easy to overdo it, and a completely parallax designed website may not be optimal for your business (as it isn’t for Mini of Australia’s homepage.)
When used sparingly though, the effect can introduce a subtle interactive element that makes using pages on your website that much more enjoyable. Many of the projects we work on feature large images, and parallax scrolling is a great way to blend these normally attention grabbing visual elements with on-page text.
Alternatively, you can have only certain pages designed in this style, and pages with parallax elements will play nicely with the rest of your HTML website.
What about SEO (Search Engine Optimization)?
Some sources suggest that parallax design has a negative effect on search engine optimization and ranking. This statement, on its own, is untrue. While there are reasons why a parallax website may not rank as well as a traditional website, it is not a matter of the design itself.
As mentioned, unlike flash, pages with parallax are readily coded in a way that search engines can easily index content from. The main potential issue has to do with the site’s structure, rather than the design.
If the parallax effect is used to place a lot of content on a single page (that would otherwise be spread out over several pages), there will be fewer pages on your website for a search engine to index, which would likely have a negative effect on overall ranking. This would be true of any website online a single or small number of URLs, regardless of the design. Similarly, fewer pages mean fewer opportunities for internal links, and potentially fewer links from external sources as well.
For this reason, regardless of designs, it’s important to consider what makes for a high-ranking website and maintain a logical URL structure.
Curious about your own website?
Want to find out how your business can use parallax web design? Get in touch – we love talking about marketing >>!
We are conveniently located on Robson Street, Vancouver. And we always have chocolate…