Captivating a website visitor’s attention is done using various design techniques. In this article, we look at specific B2B web design and development techniques that are implemented to draw the visitor’s eye when scrolling down the website page.
We’ll explore parallax scrolling, lazy-loading images, and animating-in elements on scroll down a web page.
Defining parallax, animation and lazy loading
What is parallax scrolling?
What are animating-in elements on a website?
What does lazy-loading images mean when scrolling?
Why are we discussing three different things in one article?
In this article, we are discussing these three design and development techniques as they all are relevant in terms of being triggered by a website visitor scrolling down a web page. That’s the only real connection – “scroll activated” if you will.
These techniques can be used together, separately, or not at all. However, while parallax and animations are design elements, lazy loading is a development technique that reduces page speed load time and improves the UX of the website.
Let’s look at each a little closer.
What is parallax and parallax scrolling?
If you search the term “parallax,” you’ll see everything from astronomy to photography to website design. In terms of B2B website design, parallax is defined in terms of “parallax scrolling” meaning that the visuals on a website are layered so that elements in the forefront appear to move at different rates than elements that are in the background.
Here is an example of a B2B website that shows parallax scrolling:
Essentially, parallax scrolling is a design effect that makes a website appear more dynamic – giving it 3D qualities to create visual interest and highlight certain webpage aspects. You can think of it in terms of creating visual depth – even on a flat screen.
What are animation elements in web design?
While parallax is a design element related more to visual depth and contrasted movement of foreground vs background, animated elements in web design cover a wider range of movements. Animations can be elements fading in from the bottom up to the top of the page, can be elements sliding in from the side or sliding out of the sides, or it can be individual icons or elements that illuminate, wiggle, shimmy, or expand as a visitor scrolls or hovers over it.
Below is an example of a B2B web design that has animated elements in the design:
In terms of scrolling, animations can be activated by the visitor scrolling up or down the screen – sending visuals in from the side, or bottom, or fading them out at the top. By having the animations coincide with the user’s scroll, it creates a flow down the page – moving along with the user as the user moves through the content.
The animation effect makes the site livelier and draws the visitor’s attention to highlights throughout the page – things like main points, important visuals, and calls-to action. When implemented, they provide seamless ease to the scroll – even if the animations are subtle.
What is lazy loading when scrolling?
As mentioned above, lazy loading is a development technique and not a design technique. It’s often implemented to lighten the size of the page load and to enhance the user experience (UX) by prioritizing loading what is visible on the webpage before loading non-visible elements (aka. anything the user has not scrolled down to yet).
Lazy loading is mainly to improve site performance but has the nice effect of saving the visitor’s bandwidth and reducing the load on the website’s server as well. This technique ensures that website elements (images, videos, content) are not loaded at the same time every time a user visits, but only loaded as needed (right before becoming visible on the page) to save server usage and internet bandwidth.
For example, if lazy loading is implemented on a B2B website that has four embedded videos on a page, but visitors only scroll half-way down the page to see one video before clicking to another page, then those other three videos don’t need to be loaded on every single visit. They will only be loaded if the visitor scrolls all the way down that section of the website page. It’s the best practice for web development as you only use the bandwidth you actually need, and the site loads faster – win/win.
Learn more about B2B websites and page speed optimization.
This is what lazy loading looks like on a B2B website:
Depending on the customization of your B2B website design, you may be able to use a plugin for page speed optimization (and therefore lazy loading to increase page speed). Several plugins that we use regularly on websites are WP Rocket and Autoptimize. These plugins offer exclusion options for images by class name and file name, so you can load certain images automatically (like your logo) without a visitor having to scroll down. Rarely, we are talking 1 out of 100 times, we have seen a complication between an optimization plugin and code updates where the code breaks the plugin. But 99% of the time, these plugins work just fine “out of the box.”
Pros of parallax and animations in scrolling
Parallax pros – Can be used for video elements and background images without using any JavaScript. It’s pure CSS, so no JavaScript is required unless you use JavaScript libraries for other visuals that are moving at different speeds as the visitor scrolls on the page.
Animation pros – basic CSS animations use pure CSS (for hover, click, animation, etc., effects), for a more advanced animations we use an animate.css library, together with a JavaScript library (wow.js or aos.js) to apply the type of the animation you want for that element. The CSS library has a variety of effects to select from, with a combination of additional customizations by JavaScript library (duration, delay, offset and iterations).
Common issues with parallax and animations
As with any design and development techniques, there are common issues. Working with an experienced B2B web development agency can help navigate or avoid these problems altogether.
Here are a few common issues we see with parallax and animations in B2B website designs:
- Challenges will depend on the type and scale of the animation. Often, simple animations are pretty easy. There will be some overhead for performance, but it should not have much of an impact on page speed or site bandwidth.
- The main issues we see are related to advanced animations with interactivity or being complex in general. We advise companies to be careful using heavy-activity animations. If these are not implemented properly the JavaScript execution may impact the overall site performance – dragging down page speed and negatively impacting the UX of the site. When moving from one section to another – it’s important to consider how heavy animations must be loaded. If the animations start to create a performance issue, it’s important to ask whether the animation feature is decorative or informative for the UX.
- Another challenge is how to implement interactive animations or videos that animate on the screen. For example, consider whether a user can pause the elements if they are on a loop. Another example is the hosting of videos. Hosting videos on YouTube or Vimeo, a third-party platform, affects performance either positively or negatively, but reduces the bandwidth your server has to serve. Locally stored videos are one of the biggest consumers of bandwidth. Using third-party services comes with a privacy cost though, as they tend to use cookies.
- Animations on the homepage – the most visited page on a website – can also cause website performance issues if not handled correctly. For example, having an animation visible right away in the hero section of the homepage can affect bandwidth as it’s loaded every time the page is viewed, as well as affecting the rendering of the rest of the site. It will often depend on the size of the animation asset – whether it’s small like 1 or 2 MB, or if it’s larger like 5MB and above. The larger the design asset, the bigger the drag on website performance.
Scrolling animations add visual interest and engage users
While scrolling animations and parallax features add interest and engagement to the B2B website design for visitors – they need to be implemented properly. If the elements aren’t loading properly or in a timely manner, they will negatively impact the visitor’s experience on the site and with your brand.
