Design trends and their caveats (part 1) - From parallax to vertigo

Jan Persiel -

By popular demand I would love to share a few thoughts which keep moving me for quite some time now. Actually It is not by popular demand that I am writing but I am writing about popular design trends/decisions/patterns. Many of these are so extremely common and popular that it makes me wonder why so many people do not reflect whether these actually do make sense or whether there is a better solution at hand. But let me get into my little top 5 in the upcoming blog posts. We start with a popular effect which is present in oh so many websites and themes: The parallax effect.

Hold tight, we are moving your world in 3, 2, 1 …

We all know these websites where a page starts of with a huge image, a hero, and as soon as we scroll down the page this image starts moving in the background. It often times moves at a slower speed than the foreground, or in an opposite direction, in oder to reveal a bit more than the part of the image which was initially visible. The effect is a smart idea and nothing new, but in combination with responsive design being a de facto standard they have turned into little horror shows in many implementations.

Smart phone or big screen?

The hard thing to figure out is to find the right image and combine it with the proper movement (i.e. speed and direction). This technique relies on the fact that the image in the background is partially covered up. We can only make best guesses which part of this image will be visible since visitors will use all different kinds of browser window proportions (smartphone vertical at 9:16, tablet vertical 3:4 or 4:3, netbook at 16:9 or your desktop at anything from a 1:1/square to 16:9). In case you do not choose different images for different breakpoints you have to find a picture which brings across your idea with lots of excess pixels that can be cropped away later on. Basically you will have to limit yourself to the center of the image area, everything else might be cropped.

Now in a parallax scenario this becomes even harder since you have to deal with yet another dimension, i.e. time and which part of the image can be seen at certain times. You guessed it, often times this goes wrong. Unfortunately the images chosen, by an untrained Wordpress user for instance, seldom work as well as the demo images from the sales demo. Often times the effect is being tested on one breakpoint and optimised for that very one. In case that is the main breakpoint where most of the traffic is happening that is fine. But who can honestly say that this is the case in an era of more mobile devices on the web than desktop machines or laptops?

Last but not least the parallax is often times not properly implemented causing it to jerk around when one scrolls. The nice effect goes down the drain because the CPU or GPU is completely overloaded with handling the movement and rendering everything properly. By the way: A bad implementation even drains a mobiles battery faster!

How to fix parallax effects from hell?

Now let us take a look how we can make Parallax great again ;)

  • Check whether there is a better way of implementing the effect. A smart front-end developer will be able to help you to fix this. They might be able to get things from the CPU onto the GPU for example. That might help a lot already.

  • Do you need the effect on all breakpoints? Is there really enough space on the smaller mobile devices? Do people actually see what is going on? Or is all the fancy image transitioning happening behind teaser texts and headlines anyway? In that case it is worth considering to disable it on small screens, to a save the visitors of the site some battery power and improve their download speeds.

  • Choosing the images with large bleed and crop zones helps to keep the important things in perspective. In addition to that it makes sense to define a focal point on the images or at least consider making use of background positioning properties in CSS.

  • Last but definitely not least: Do you really need the effect? Does it contribute to the story you are telling or does it help to bring your point across any better? If it does not you might consider dropping it all together. I am partially guilty of having done things like this in the past: SysEleven wanted to have parallax effects and never got the proper images for it. And now 15 hot-fixes later by at least 20 different people the effect is a perfect example of what you are NOT supposed to do. I should have prevented this in the first place. Luckily a new version of the site is planned and the current site will hopefully be a thing of the past very soon.

Be responsible and verify that you design with the proper outcome on all devices. If you cannot control the effect properly see whether it is better to disable the effect instead of having it go balistic on you.

Up next: Fonts that make you go mmmhmhm.

In this series

  1. Parallax until you vertigo
  2. Bad font decisions
  3. Frameworks which break design
  4. Boring responsive design
  5. Adopting UX flaws
  6. Icons without cause