Search Over 25 Million Graphics

 by Shutterstock

The Dark Side of The Most Successful Parallax Scrolling Sites

parallax-scrolling-websites

Parallax scrolling is cool. There's no argument about that. The unique experience created with such simple scrolling animations can be a powerful tool for engaging your audience. In fact, some of today's most successful websites employ parallax scrolling to varying degrees. If it can bring such great success to others, how could you go wrong with such a fun design method?

Unfortunately, the smooth effects of parallax scrolling mask some hidden pitfalls which, if not carefully navigated, can lead to disappointing results in even the most successful sites. In an effort to save you from these potential headaches, we've gathered a few of the most prevalent issues you should keep in mind when employing this trendy feature. You should also read this article by Webydo’s product manager Nir Barlev: 7 Parallax Scrolling Tips That Will Change The Way You Design Websites.

Humans Aren't the Only Ones Looking at Your Designs

1-parallax

You know what? For as slick as a well-designed parallax scrolling feature appears to us sentient beings, there's an awful lot that's lost on modern search engines. Google's web crawlers just don't appreciate the visual creativity parallax can offer. Not only that, but these search engines are built with a natural bias against the single page designs they typically embody!

The real cause of hostility between parallax heavy websites and the search engines they strive to appease boils down to metadata. What is metadata? It's the bite sized information that describes the sites you build. Unfortunately for proponents of the trending single-page design popular with parallax users, this meta data was created to describe a single page at a time.

With traditional, multi-page designs, each page contains very specific content that can be easily described in the metadata. Search engines love this. They know exactly what each section of your web site contains and therefore rank your site more accurately. The issue with single-page parallax designs is that they have to cram a whole site's worth of meta data into one header. Did we mention there's a size limit to the meta data too?

All of this creates a less than ideal environment for search engine crawlers. If the crawler has difficulty gathering good metadata, your page ranking can take a hit.

 A Great Design is an Accessible Design

2-parallax

In addition to search engine optimization woes, sites designed around parallax scrolling often take hits in the usability department. As a general rule, people browse the web to consume content. If a particular site makes consuming said content difficult, it's likely not going to be terribly successful.

In this sense, parallax scrolling's greatest strength can often times be it's greatest weakness. As users scroll through a parallax design, their attention can be easily guided as their eyes naturally follow movement on the page. While this method can be incredibly intuitive for the user, when overdone, it can quickly cross the line into sensory overload. Too much animation will distract from content rather than attract the user to it.

Yet another hit to accessibility when using parallax scrolling is the static nature of its content. Due to its strict dependence on positioning, content must conform to rigid parameters when used in parallax animations. This makes it very difficult to ensure dynamic content won't break the design.

Being Mobile Matters

3-parallax

At this point, we all know how important mobile browsing is to the web design industry. Users are consuming more online content than ever thanks to the increased connectivity offered by our mobile devices. As they transition from desktop browsing to mobile browsing throughout the day, they expect consistent experiences regardless of which device they're currently using.

Creating designs that provide such seamless transitions is difficult enough. Adding elements like parallax scrolling that rely so heavily on screen size and position only compounds the problem. Animations like parallax scrolling aren't lightweights either when it comes to load times. Despite the many benefits mobile browsing has introduced, increase patience isn't one of them. It's always important to weigh the benefits of high-maintenance features against any accessibility and mobility hits you might incur.

So what have you learned after reading through all these cautionary tales? Never use parallax scrolling right? Not at all! Parallax scrolling, when used effectively and for the right purpose, can be an incredibly powerful method of design. The entire point of this writing is to simply bring to light the very real "dark side" of this trendy web element. By keeping these potential pitfalls in mind, you'll be better equipped to use parallax scrolling to create designs that are both captivating and useful!

To put theory into practice sign up to Webydo and create a website with parallax animation.

4-parallax

Author bio: Tomer is an award-winning designer and a UX Manager at Webydo – the code-free website design platform for professional designers – where he manages the UX development team to push beyond the limits of creativity.

Sample news website on tablet computer
Blog authors writing articles. Freelance writers with laptops creating internet content. Vector illustration for online education, people of creative job, seo marketing concept
Set of outline icons related to  content creation, media. Linear icon collection. Editable stroke. Vector illustration
Blog Website Article Lifestyle Online Word
Online Shopping Website on Laptop. Easy E-commerce Website Shop by Smartphone, iPhone, iPad and Laptop. Close up Hands Using Smartphone Shopping Cart read Online Article, Blog. Digital Payment gateway
Reading news on mobile phone. Hand holding smartphone with newspaper, news website. Modern flat design graphic elements, thin line icons set for web banner, web site, infographics. Vector illustration
Corporate website links abstract concept vector illustration set. Follow us, blog articles, events, social media, subscribe for newsletter, publications, company page, notification abstract metaphor.
Landing page wireframe design for business. One page website layout template. Modern responsive design. Ux ui website: features, product, articles, statiscics, testimonials.
AI Rewriting, writing articles, SEO content generation using artificial intelligent and ai neural network models. AI generates new text by processing input using language model trained on vast corpus
Simple Set of Copywriting Related Vector Line Icons. 
Editable Stroke. 48x48 Pixel Perfect.
Articles, modern flat icon
Latest Article Webpage Advertising Announcement Concept
The concept of an isometric illustration of the development team is compiling a website and blogger article
Big infographics in flat style. Vector illustrations about digital projects, management, clients brief, design and communication. Use in website, corporate report, presentation, advertising, marketing
3D Isometric Flat Vector Conceptual Illustration of Digital Marketing.
Abstract seamless pattern with chaotic layering of newspaper text, illustrations, headlines in a grunge style. Black and white vector background. Suitable for wallpaper, wrapping paper, fabric design
Copywriter concept. Writing creative article in blog. Social media promotion. Freelance work. Flat vector illustration
Colorful pencil with wings vector illustration. Design for creative writing and creation, storytelling, blogging, education, book cover, article and website content writing, copywriting
Authors pen and typewriter to write articles, magnet to attract blog followers and feedback, new ideas for text thin black and red outline symbols, vector illustration. Copyright line icons set.
Concept News update. News webpage, information about events, activities, company information and announcements for web page. 3D Web Vector Illustrations.
Creative article writing, content creation and marketing or text editing service website concept. Tiny cartoon people around paper scroll on computer, vector illustration
3D Isometric Flat Vector Conceptual Illustration of Blog Content Creating, Effective Content Marketing Strategy for Business Blogging
Line icons set with flat design of website main elements and page features, web site mobile version, navigation pin, contact form and internet analytics. Modern vector pictogram collection concept.
Line icons with flat design elements of graphic design and web product development, UI and UX website making, A/B testing usability project. Modern infographic vector logo pictogram collection concept

Leave a Comment

Your email address will not be published. Required fields are marked *

Unlimited Access

68% Off