Parallax design and usability

Discussion continued from https://www.sitepoint.com/community/t/parallax-jitters-or-not/297570.

thanx for testing.
“Fortunately, it doesn’t do that when minimized”
I think the problem is in the buggy script of main parallax scene (first screen with stars). But anyway there is absolutely no alternatives for Adobe Muse, it is a widget.

So, except this technical issues, how do you evaluate the site in overall score?

Hi @b3rsus, in short I’d say the site looks cool… (if it works). However if you take into account accessibility the score would not be so high… as others have mentioned there are a few technical issues that have to do with usability and accessibility e.g. the site does not work at all without JavaScript enabled and mobile devices seem to be suffering the heavy load and parallax effect. Parallax websites tend to load all at once and feature very large images, which if not handled for mobile devices there are going to be some serious performance issues…

You could ignore this feedback and think anyway most sites nowadays do not work with JavaScript disabled… and you don’t care about mobile users… this is very bad thinking as there are some very important reasons why you would want to make your site as accessible as possible, mainly increase your reach… but also ease development… JavaScript is a brittle thing and if while someone is developing a website (that completely relies in JavaScript) something fails… they will be left with a black screen and no accessibility at all, which can be quite frustrating if you are a developer, or even more if your’e paying that developer.

Unfortunately I see a current trend with modern websites that seem to absolutely ignore the most basic best practices in web development that have been established for the last couple of decades like progressive enhancement… If you want good feedback for your website you should probably look somewhere else as in here there are a lot of old school folk that is well aware of those best practices… which unfortunately your site does not follow…

In short I’d say it is better to look alright to 80% of the visitors than to look super cool to 15% and none at all to the other 85%

5 Likes

thanx for you reply.

In fact, mobile version does not use the parallax effect at all, but it uses some other JS scripts which load mobiles cpu very high (for example screens listings in mobiles mockups).

Otherwise there are some sites with good parallax JS which loads cpu very low and looks perfect in mobile and desktop versions both. But due to my low coding skills I do not know ways to make it work on my site=) I’ve tried to solve this problem on Fiverr or Upwork, but none of ppl who tried could really make it work.

And about JS philosophy… it is hard to explain, but I don’t think that Lamborghini developers care much how their cars will ride on heavy mud or rocky mountains. And it is not correct to reproach them how do they think users will carry in luggage bags full of potatoes and go to ranches =) Because their cars very first purpose is to joy their owners by style, quality and speed.

So above the site above - the only content it has is a design. And I do not know many ways to do some interesting animated things completely without using JavaScript.

You are missing the point of “progressive enhancement”.
It is not about banishing or removing javascript altogether in favour some something simpler.
You can still have js and all the fancy effects. But you put in safeguards so that when it’s not available, the user does not see just a blank screen or a broken layout. The site is still usable, accessible and readable, just without the “whistles and bells”.

4 Likes

Maybe, but the cpu problem happens also when scrolled to the bottom of the page where no effects are on the screen.

The site design is okay, personally I’m not a fan of graphics only designs like that but I understand this is the intended goal and for your audience it may work so that’s fine. However, the technical issues are more important to deal with than using fancy effects like parallax and these problems make the site bad in my opinion.

There’s nothing wrong with having no coding skills but then if you don’t know how to make certain effects work well across browsers and devices then you simply shouldn’t be using them. It’s not nice to visit a web site which is slow to scroll, has abnormal skips and jumps, or drains the battery of my laptop or other device. Making a good parallax effect that looks well, works fast, is compatible everywhere and does not degrade user experience is an advanced task. Otherwise, it’s better to get rid of the parallax altogether, people will still appreciate all the nice graphics on your site but no one will complain about usability problems.

3 Likes

I have never been a fan of smoke and mirrors sites where it takes eight seconds before the black screen actually shows content and that’s using a 50Mbps connection!

Try searching for “ampproject parallax” and investigate how numerous clever JavaScript kiddies have collaborated to overcome slow rendering sites.

Please take note of the first paragraph of this blog:

W3.org validation is showing numerous errors and warnings which will no doubt affect rendering because each browser uses their own solution at guessing the desired result.

Many of the errors and warnings are trivial but overall must contribute to the final result. Far better to have a validated site before investigating browser inconsistencies.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fbersusdesign.com%2F

2 Likes

the BERSUS site was rebuilt totally from a clean sheet.

Could you have a look at the new version?

The site works with JavaScript disabled, which is an awesome step forward towards accessibility, well done! As for the JavaScript bells and whistles I quite like them too… not a fan of parallax websites as they tend to be overly heavy but yours seem alright. It did load in my phone quite fast.

2 Likes

thanx for reply.

You’re missing

<!doctype html>

at the beginning of your page.

1 Like

Is it still necessary?

Yes. Try running your web page through the validator without it. I think there were over 100 errors.

I don’t know any well made web sites without errors in validators.
For example, google.com has >30 errors, this forum has ~60 errors.
Other words does it affect on anything except browsing through very old browsers?

That’s not an excuse for not trying to get your site to validate. However, if you’re happy with 100+ errors, knock yourself out. It’s not a good advertisement for a web designer IMO.

Validation errors are where different browsers may interpret your code in different ways - and the site may break in some browsers.

As far as the forum is concerned, it uses Discourse over which Sitepoint has no control.

3 Likes

Your “hamburger” menu is inaccessible to anybody using keyboard navigation.

It may effect more than you are aware of assuming this is correct https://ohgm.co.uk/breaking-head-quietly/

had this discussion with previous developer who put <noscript> tags in the head with an image for tracking. Which is not where an image should ever be, script or not.

Does a spider assume it is in the correct place and the head has ended or that it is in the wrong place and ignore it? I certainly don’t know for sure, i’d rather not take the gamble

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.