One-page website for a photocopier company

This is a one-page site I created since Bricks 1.1.2. It’s my sister’s company.
—> www.lnemacs.com

Some of you might have seen this site before(as I shared it in the FB group months ago).

The site was built with Bricks 1.1.2, updated to 1.1.3 then stopped updating to the next version(busy with my works).

Now, I updated the site to 1.3.6
With the class system, it’s easier to control the entire site.

Any feedback is welcome. :wink:

*This site is yet to optimize.

How did you the animated Fade-In of the copiers?
There is an issue with the horizontal scrollbar, which you can see for a short time.
Try overflow-x: hidden in Custom CSS of the relevant containers.

When you go to the bottom end the content jumps a bit because of the animation. And the diagonally cut image at the bottom looks quite nice but at a lot resolutions the heads are cut off in a unpleasant way.

Your on page navigation on the right side has one dot to much. And the Top On Page Navigation Menu is in an unlogical order.

1 Like

Hi @flex
Thank you for your feedback!

By the way, I don’t get what you mean by “how did you the animated Fade-In of copiers?”
Were you asking why I use it or how I made it?

I have fixed the “jump up” as you mentioned. Thank you for your suggestion!

And the diagonally cut image at the bottom looks quite nice but at a lot resolutions the heads are cut off in an unpleasant way.

I am still thinking if I can do it in a nicer way.

I have also removed the on-page navigation. Since the header is sticky, this one is not necessary.

Only feedback I have is that it seems heavy on the animations at least on mobile (lots of slide-ins) which is a bit distracting. I’d either suggest easing them a bit to be more subtle or removing it on most of the elements (maybe keep it on the images only for example). Other than that, it’s great! Loads quickly. :slight_smile:

1 Like

@d19dotca

Thank you for your feedback!
I should remove the animate effect from some items. Maybe change another effect?

What do you think?

There is quite a lot of research on mobile animation best practices, too much in fact!

Here are some good ones:

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 (aim for 200-500ms)
Ground Rules for Web Animations - CSS-Tricks (2020, but transition information is pretty solid)

2 Likes

That’s great!

Thank you for sharing this! :slight_smile: