search

captainbrosset / file-handling-demo

A demo app showing all of the ways files can be opened or saved on the web
https://cranky-shaw-fe95e8.netlify.app/
12 stars 3 forks source link

How could this app be made responsive (RWD)? #4

Open simevidas opened 2 years ago

simevidas commented 2 years ago

I’ve used this app in various browsers on Android and iOS. I haven’t noticed any issues with using the app on mobile. The only problem is the desktop layout.

I thought of a simple way to make this app responsive, but I’m not sure if it would work. The idea is to turn the three columns (import, textarea, export) into three items of a horizontally scrollable scroll snap container. So you would perform simple swipes to move between the different parts of the app, just like swiping between images in a carousel. I think I’d prefer that over tapping on menu icons.

captainbrosset commented 2 years ago

Thanks @simevidas for filing this. Indeed the experience is really not that great on mobile viewports. I'll think about this. Thanks for the suggestion.

simevidas commented 2 years ago

I gave it a go in devtools. I used CSS grid and scroll snap, based on @5t3ph’s recent slide deck demo. It could definitely work.

https://user-images.githubusercontent.com/716405/157708984-6b3a213e-9796-47c5-a805-1c2bd1255165.mp4

captainbrosset commented 2 years ago

Oh that seems really cool. Then only other approach I could think of was using menus (which you mentioned before). I'm on the fence to be honest. I like both, but both are a bit hard to discover too.