One Page Parallax Scrolling Website

Giraffe coming out of a tv screen

A widespread style trend is no proof that it’s the best or most intuitive idea for your UI

“UX and We Design Master Course” by Joe Natoli

What is Parallax Scrolling?

The one-page Parallax Scrolling web pages seems to be all the rage. On these sites the background appears to moves slower than the foreground when the visitor scrolls down the page. This effect gives the website a sense of depth.

The web site “Jess and Russ” is a good example where parallax scrolling adds interest to the site and tells a story as visitors scroll down the page. “Muffi” is a site with parallax scrolling that does not quite work. The scrolling effect is not smooth and the content seems to jump all over the place. “Ala” is an example of a site that should be fun but is just a bit too busy for my liking.

There is a place for parallax scrolling when it is done well and it fulfils purpose but when it is used just because it is the latest trend, there is a danger that the site will annoy visitors. “Whiteboard” is an example of a site that uses parallax scrolling in a tasteful way. Parallax scrolling websites are not necessarily one page sites but the effect is often used in one page sites.

Parallax Scrolling and Search Engine Optimisation

Using parallax scrolling on a single page creates search engine optimisation problems because one page cannot support the ranking of very many keywords. You will want to use your focus keyword in the URL of you page and if you have only one page you are restricted to using it in your primary domain name. You only have one set of meta data including one meta description. Your page may be penalised by google if it takes too long to load. You also may loose valuable clients that move on to another site before your page loads. There are no internal links, just anchor links leading to different parts of the page, and very few external links. Often the pages are rich in graphics and CSS transition effects but limited in content.

So what does Google really think about single page websites. You can watch the video to find out.

The problem isn’t parallax scrolling, it is having a single-page web site. There are ways around it though. You can use php or javascript to place several separate pages on your parallax scrolling home page or you can have your beautiful parallax scrolling home page and have links to other more mundane pages. Another way you can help your single-page web site rank well is to have a blog and contribute to it regularly. The fresh new content will attract search engines and help your rankings.

Mobile and Parallax Scrolling

Parallax scrolling does not work well with mobile devices which means that web designers often need to create two versions of the one site leading to an increase in the amount of work required to maintain the site.

 

Parallax scrolling web site on a big screen

Here is a picture of a parallax scrolling web site on a big screen

web site on mobile phone

Here is the same web site on a mobile phone

The Sweez site looks beautiful on the big screen but does not look so good on mobile. Although it passes the Google Mobile-Friendly test the writing is very difficult to read on a mobile device. Not much thought has been put in to how the site appears on mobile devices. One-page sites are often too heavy for mobile devices. The Sweez site fails the Google Pagespeed Test for mobile devices.

Parallax Scrolling and Usability

An experiment was conducted at Purdue University in Indiana to compare a parallax scrolling web site with a non-parallel scrolling web site for five aspects of usability. These included:

  • usability,
  • enjoyment,
  • fun,
  • satisfaction,
  • visual appeal.

There were no significant differences between four of the five variables but the Parallax scrolling web site was perceived to be more fun. You can read about this experiment at The Journal of Usability Study.

Parallax Scrolling and Accessibility

One page parallax scrolling web sites look good and they provide a sense of fun but how fun are they for people with visual impairments. Vision Australian estimated that there are approximately 360,000 people in Australia who are blind or are visually impaired. Many of these people use computers and access the web. A person who has been assessed as legally blind often has some vision but that vision is extremely limited. Many  only see bright light and high contrast.

A visitor with limited sight  landing on a site with parallax scrolling may use the navigation to access a something they are interested in. The effect of the page scrolling quickly to another section can cause disorientation and dizziness (this is not limited to people with visual impairments.)

Pages that are very long also provide problems for people who are visually impaired. Some blind people go to the bottom of the page and work up to find a section of a web page.

Conclusion

Parallax scrolling sites:

  • Look good,
  • Are fun,
  • Can tell a story.

But they also:

  • Reduce SEO opportunity,
  • Often lack good content,
  • Can be slow to load,
  • Not mobile friendly,
  • Difficult  for visitors who are visually impaired to navigate,
  • Make some visitors dizzy or disoriented if the difference between the speed of the scrolling is too great.

Use parallel scrolling when it adds meaning and value to your site but be considerate to visitors with visual impairment. Is your trendy site an obstacle for a screen reader? Trends  go out of fashion and in a couple of years your site will be dated and in need of a redesign.

Visual design should never be based on personal preference or on what “looks Cool.”

Joe Natoli – UX & Web Design Master Course

Leave a Comment

Redback Web Design 2004 - 2020