Parallax in Web Design
Parallax originated in side-scrolling videos games in which the background moves at an independent rate from the foreground image. This same principle is used in many modern web designs, allowing multiple elements to move at different speeds giving a rich and robust user experience. Nike was one of the first major brands to utilize parallax web design.
The “Fold” is dead! (And was never alive)
When it came to web designs of the past, people would often what to jam as much web content above the “fold,” or the scroll line (meaning the content that is visible when you enter a site is “above the fold” while everything under that was referred to as “below the fold”). This term originated from newspaper advertisements and layouts. So when you open a newspaper, the big fold at the bottom bisects the paper into two sections.
It was always an odd term to me because it tried to take an established media term and use it in a new media(the web). While it is important to have pertinent information and branding immediately visible upon page load, some of the best information and stories can be told through scrolling. Because of this, the term and its antiquated principals are often disregarded by designers and developers.
Pros of Parallax web design
This engaging technology is great for making a fun and memorable experience within a website. It can help tell a story or products, services or company history using layered graphics and text. These effects generally help lower bounce rates—an important metric that determines how long a person stays on web pages without leaving to a new site. Some of the larger benefits of parallax include:
- Unique experience
- Greater User Interaction
- Engaging Content
- Storytelling by leading a visitor through a branded process, history, or idea
- Lower Bounce Rates
- Layered Graphics improve aesthetics
- Improved brand exposure via word of mouth and social sharing
Cons of Parallax web design
While the benefits can largely outweigh the downsides of Parallax design, there are still some factors to take into account. These may include:
- Slower load times
- Some effects do not work on mobile
- Single page sites can kill SEO efforts
Let’s see some Parallax sites!
Here is a short list of some fantastic parallax websites.
Seattle Space Needle
If parallax design seems like a strong vehicle for your brand or products, give us a call and we’ll be happy to answer all your questions and show you some of our work.