Parallax Scrolling
In recent years we’ve seen more sites appear that make use of parallax scrolling.
The parallax technique allows the foreground and background content to scroll at different speeds, creating an illusion of depth. It can be used to very good effect, but it’s debatable if it can be described as having good UX.
Parallax has a few potential issues:
- Bad for SEO. As sites that utilize parallax scrolling tend to be made up of one page, there’s usually little in the way of content that can be crawled by the search engines. This is especially true as text tends to be embedded in graphics.
- Can reduce performance. Due to the heavy use of graphics and JavaScript, a page can get clogged up on load. And it’s certainly a headache for mobile users. Load times on mobile tends to be very poor when parallax is used, due to the heavy use of JavaScript.
- Can affect users negatively. The Journal of Usability Studies carried out research on parallax which found that whilst the parallax site was considered to be more fun than non-parallax sites, some users experienced “motion sickness and experienced significant usability issues when interacting with the parallax website.”
However, parallax scrolling can add another dimension to a site and allow it to stand out. But as we listed, there are trade-offs if you want to create a site that works on both desktop and mobile, then parallax really isn’t for you.
And it is, even if it’s a little cartoon-like, it’s quite well done and tells a story as you move down the page. This is the strength of parallax scrolling; it allows you to effectively tell a story using mostly graphical elements. The page above has imagery, text and video embedded into it, so we put it into GT Metrix to see how it stood up to scrutiny when it came to speed.
As you can see, the page has a score of A from PageSpeed and C from YSlow. That’s not terrible, but take a look at the page load time … it’s 18.2 seconds, which is hugely slower than most commercial sites that you’ll come across (according the GT Metrix, the average is 6.6s).
According to GTMetrix, the site should also – amongst other things – avoid character sets in the meta tag,
“The following resources have a character set specified in a meta tag. Specifying a character set in a meta tag disables the lookahead downloader in IE8. To improve resource download parallelization, move the character set to the HTTP Content-Type response header.”
Other tips include:
- Defer parsing of JavaScript as in this instance, 313.6kb of JavaScript is parsed during the initial loading of the page and deferring this can help to reduce “blocking of page rendering.
- YSlow recommends that the site should minify CSS and JavaScript where possible.
- The site should use a CDN
So if you’re considering creating a parallax site, ask yourself if the story you want to tell is worth losing visitors due to a reduction in performance. Parallax has to be done well and it has to be a little different in order to capture and hold the attention of the user.
Article Provided By: AWWWARDS
If you would like to discuss Your Logo with Mojoe.net or your website’s analytics, custom logo designs, social media, website, web application, need custom programming, or IT consultant, please do not hesitate to call us at 864-859-9848 or you can email us at dwerne@mojoe.net.
Recent Comments