Non-responsive behaviour of all examples.

[riteshsp2000]

Actual Behaviour
None of the examples are optimized for the mobile view. Neither they provide any horizontal scroll to view the entire project.

Expected Behaviour
The example should scale down to the mobile size accordingly or a horizontal scroll should be added to the project display area to view the entire project.

Steps to reproduce it
Access any of the examples on the example page through a mobile or by setting the mobile view option through the developer tools.

Screenshots of the issue

The same is happening with all the examples.

Would you like to work on the issue?
Yes, I would like to work on the issue.

[limzykenneth]

I think for many of the examples, scaling them down would not work well, especially those with interactions. Horizontal scrolls however feels unintuitive and have seem broken as well to some users.

[riteshsp2000]

Yes, that seems right. The horizontal scroll would feel unintuitive. I'll try and look for some way to make them responsive.

[lmccart]

also see #284 and #72 for relevant comments

[ameybh]

Hello, here's some progress on the responsiveness issue.
Right now, the canvas #defaultCanvas0 drawn in examples has a custom style attribute, for e.g.: style="width: 640px; height: 360px;".
The parameters for a responsive canvas should be:

canvas {
  width: 100%;
  height: auto;
}

Here's the above Geometrics examples on iPhone X with abovewritten CSS properties:

We should change how the example code script is added to the DOM to control the canvas height.

https://github.com/processing/p5.js-website/blob/052bca317bd0d540b0fa0e8006e9158103fc2f6b/src/assets/js/examples.js#L176-L180

With p5js instance mode, it might be possible to render the canvas with the abovewritten CSS properties. Hence, more research is needed.

[Proeditor07]

is anyone working on this issue?

[akshatnema]

Hey @limzykenneth @montoyamoraga, I am working on this issue and have come up with a slightly good solution to solve this issue. You know that in every example, we are creating a canvas of width 720px and height 400px (using p5js code). This is what we can't change because it is an example. So, to protect the example properties, I think we should make it horizontal scroll only in mobile view, so as to provide good responsiveness in smaller devices. It is not looking ugly or awkward in my aspect. We can have this approach and it is used in many places. What's your opinion on this? Do you have any other implementation in your mind? I will like to know your views here 🙂.

[limzykenneth]

I think we should make it horizontal scroll only in mobile view

I'm not quite sure what this means. Do you perhaps have a link to somewhere doing what you are describing that we can see?

[akshatnema]

I'm not quite sure what this means. Do you perhaps have a link to somewhere doing what you are describing that we can see?

@limzykenneth I have implemented in our repository in my local dev. I am just trying to have a simple scroll of the examples shown in the website, in mobile view. Here's the preview of what I have implemented:

examples_scroll.mp4

[limzykenneth]

How would this solution work with examples that uses mouse interactions though? This one for example.

[akshatnema]

How would this solution work with examples that uses mouse interactions though? This one for example.

@limzykenneth Yes, you are right. I tried the above implementation on the above example and it can make the user quite confusing for him to check whether he is sliding the example window or moving inside the example. But, if someone notices it carefully when we scroll through the mouse, a thin scroll slides horizontally and it becomes visible specifying that we are scrolling through an example window, whereas it is not visible while scrolling inside example preview.

I know it is not a good solution 😄, but I am thinking 🤔 of a different approach now to show it correctly in mobile view.