Optimizing a web app for smaller screen devices

Just looking for some direction as to what others do here. My first web app is done (yay!). I designed the layout to fit with larger screen devices like computers and larger tablets. On a phone or smaller tablet, there is a ton of scrolling, some of the controls overlap, and it just doesn’t look great, so I’m looking for suggestions.

What do you do to get your web apps to look nice on both large screens as well as small screens? Do you make pages specifically for computers and then for phones? I’m not against doing this, but if it’s not the best use of my time, I’d like to explore other options. If it is the route, is there a way to detect the screen size and display that automatically? Or do you have an option for the user to “switch to phone mode”?

Since this is just a v1 of my app, I have an upfront message informing the user that for the time being, it’s best to use on a computer or larger iPad. But I would like to make a good looking app for the phone

If you take a look at Eddie’s Electronics you can see what Xojo did in this demo.

You can visit https://demos.xojo.com from a computer and phone to see the difference.

That is very helpful Alberto, thank you! Looks like they did make two variations, and I see how the app determines which variation to show. Thanks for the tip!

1 Like