Derived from the Greek word parallaxis – meaning “alteration” – parallax web design is quickly becoming one of the most exciting and visually enticing web trends to date. Through the use of HTML5 and CSS3, parallax uses multiple backgrounds which move at different speeds to create depth and a dynamic browsing experience. Parallax can range from the very simple: a background moving at a slightly slower rate than the foreground, or the very complex: a series of scrolling and moving images that look like a streaming video as the user moves their mouse wheel.
Parallax can be used as the main driving force behind a website, or as that one extra design element which gives the site that extra push. Websites for films/entertainment, cars and clothing companies are often more conceptual and visual, rather than textual. Therefore, they rely heavily on the parallax technique. An example of this can be found on the website for the Academy-award winning film, Life of Pi. The user is able to scroll through both Pi’s epic journey, and the epic journey of director Ang Lee when he set out to make the film. As you make your way down the page the tiger in the film is shown lunging onto the screen, and if you continue to scroll down his colors are stripped off revealing the initial CGI character sketch. This is all done through the parallax technique, although it appears as if it’s flash or video.
Websites that are more informational and text-driven – advertising agencies, event and expo sites, or corporations – will tend to use a small amount of parallax. Just enough to make the website stand out, but not enough to distract from the site’s overall message. EVR Advertising recently launched its new site which features this method of parallax. The background and foreground move at different speeds, catching the users eye and forcing them to view our informative headers.
Of course, this new method of web design does not come without its flaws. The biggest issue with parallax is that it is not SEO-friendly. Parallax forces all site content to exist on a single page, the opportunity to use title tags and multiple headers is limited – two key ranking factors in getting a website crawled. Furthermore, having a bulk of images all appearing on one page can slow a website’s load time, and limit the fluidity of its navigational experience.
These issues can be fixed by breaking up the site into multiple pages within the traditional sense, allowing for faster load times and a more fluid navigation for better user experience. Each of these pages can include an important header tag and various keywords for SEO purposes. The main parallax page is more of a wow factor and should only hold small amounts of information driving users to other, more informative, pages.
Despite the minor limitations of parallax, this new style of site design is certainly one of the freshest and most innovative web trends of 2013.
Another example is Spotify