fhrf / fhrf.github.io Goto Github PK

Clearly, there's room for improvement in homepage design. We can revamp the landing page with some another minimalist UI that helps stakeholders (volunteers, donators, activists, etc) better navigate the website from the landing page.

We can add better backdrop images, better call to action buttons, and links to other pages.

A message about what is Human Rights and why they (users) should fight and protect the same will also be helpful.

Please comment with your thoughts on what and how we can improve. Also, feel free to raise PR :)

Where?

https://fhrf.in/index.html

Issues:

1. on load, the backdrop image is repeating in tiles
2. the transition between images is not smooth
3. there is unintended grey space

Possible Solution:

1. fix the bug
2. try new UX altogether (comment your idea once)

Image:

There is unused CSS that can be removed

All stylesheets are inside \style dir

On events page, there are more than 150 event images.

They are all loaded at once; amounting to a size of 17MB.

There should be some lady loading mechanism, by which images are fetched as and when a user scrolls near to image.

In case you are unfamiliar, here's a css-tricks' guide to lazy loading.

Feel free to try and experiment with a solution that you think will work :)