Issue with Image Overlapping on Processing.org Examples Page

[Lavanyaa09]

Increasing access

Addressing the issue of image overlap on the Examples page of the Processing.org website contributes to enhancing the overall user experience. By ensuring that images do not obstruct or overlap with each other while scrolling, users can more easily navigate through the page's content. This improvement promotes a smoother browsing experience, making it easier for users to discover and engage with the various examples and resources available on the platform.

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

Feature enhancement details

I hope this message finds you well. I wanted to bring to your attention an issue I encountered while browsing the Examples page on the Processing.org website.

Upon visiting the page, I noticed an image situated at the top right corner, intended for contributions and donations. While the page content scrolls, this particular image remains static, causing it to overlap with other images and elements as I navigate down the page.

Given the prominence of this page as a showcase of Processing examples and resources, ensuring a seamless and unobstructed browsing experience is paramount. Therefore, addressing this issue of image overlap would contribute to enhancing user engagement and satisfaction with the platform.

I believe resolving this matter would significantly improve the overall user experience and maintain the professionalism associated with the Processing.org website.

Thank you for your attention to this matter. I am available to provide further help if needed. @limzykenneth Examplesp5.pdf

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[praveen-rikhari]

@Lavanyaa09 Hey, Can you please share any approach on this, how can we implement that, maybe we could come up with a better solution.Though, I have one approach for this:

• we can remove the static/fixed nature of the image What's your views on this? Kindly share.

[SableRaf]

Hi @Lavanyaa09 and @praveen-rikhari,

Thank you for your feedback and my apologies for the delayed response.

The Call to Action (CTA) at the top right is designed to stay visible to encourage donations, which are essential for supporting the platform.

To make it less disruptive, we could use 4 columns instead of 5 at the largest width on the examples page, leaving space on the right. At smaller responsive breakpoints, I suggest keeping it as is, like a floating action button in the bottom right.

Feel free to submit a Pull Request to implement this change.

[Lavanyaa09]

Hello @SableRaf,

Thank you for your feedback on the above issue.

I appreciate the suggestion regarding the Call to Action (CTA) and agree that optimizing its placement could enhance user experience while maintaining its visibility. I propose implementing a 4-column layout instead of 5 at the largest width on the examples page, leaving space on the right for the CTA. For smaller responsive breakpoints, we can keep the CTA as a floating action button in the bottom right corner to ensure it remains accessible without being disruptive.

I am interested in working on this issue further and will submit a Pull Request to implement this change.

Thank you.

[praveen-rikhari]

Hi @SableRaf,

Thank you for your response. I believe @Lavanyaa09 will be making a pull request and should be able to assist you. However, if you need any further help, I am available to support as well.