Making all sketches easier to use on mobile

[ksen0]

Topic

This issue is an invitation to discuss whether this is a problem - and if so, what should be done about it!

Two screenshots below show what is seen on mobile vs desktop for a sketch that is wider than it is longer (landscape rather than portrait) in the Getting Started tutorial. This means on mobile the sketch does not show the circle that should be there.

Though some sketches are not interactive on mobile (if they require keyboard presses for example), most should be viewable. One fix would be to ensure than on mobile all sketches are square. A more major fix would be to ensure that any interaction that aa sketch requires has both a desktop variant and mobile variant.

Should this extend to tutorials, examples, and references - or every sketch on the website?

Please feel free to jump in with your comments and ideas, but don't start any technical work or PRs just yet 🌱

Desktop	Mobile

Improvements

• Make sure that all sketches in examples, reference, and tutorials uniformly scale their iframe tag to fit the width (assigned to @webermayank)

[webermayank]

Hey @ksen0 , I tried some moderations in this example that you have provided like changing the position of object or size of canvas and it seems changing the canvas size in just code example wouldn't be enough, we have to position the object as well to appear in frame (in context to this example only), which gives us the idea that to fix these type issue we can try make the output frame square and along with that some example code moderation will require too , if i am not wrong ?
can we use dynamic window size with some maximum value, which helps in adjust according to user device width an height ?

[davepagurek]

We do something on community sketches that have a fixed canvas size to uniformly scale their <iframe> tags to fit the width:

That code lives here, maybe there's a way to adapt that for other embedded editors on the site?
https://github.com/processing/p5.js-website/blob/main/src/components/ScalingIframe/index.tsx

[ksen0]

Hi @webermayank what do you think about the iframe suggestion from @davepagurek ? It's not as extensive as it could be, but changing the content of individual sketches would be also a ton of work to both execute manually and review (including review for consistency). The iframe idea seems like a good middle ground.

[webermayank]

Sorry for delay, @ksen0 , yes absolutely, changing the code content of each sketches is unnecessary thing to do , i was just placing all the possibility that could resolve this issue on the table. The iframe solution seems very promising by this sketches will be completely visible on mobile devices.

[ksen0]

Thanks @webermayank ! Do you want to work on the iframe fix? It would be a nice to have so no particular rush!

[webermayank]

Yes sure @ksen0 , i would love to fix it. Would it be like as the above solution @davepagurek suggested or you wanted any modification ? i'd love to address those if there are any.

[ksen0]

Thanks @webermayank ! I think this solution is an intermediate one and possibly more changes could be done systematically later on, so it would be nice to keep this open as a discussion for ideas. But this part of it seems clearly helpful.

Please feel free to work on this and in the PR please use "addresses part of [###] (rather than 'fixes') so the issue is not autoclosed.

Thanks so much!

EDIT: I've added it to the issue: "Make sure that all sketches in examples, reference, and tutorials uniformly scale their iframe tag to fit the width (assigned to @webermayank)"