Tips on how to design your app

when viewing my app, it seems to look different depending on what tool I use to run it. If I use the testing web app it looks different from when I use the Pro Web App example. Controls move around when I click into text boxes and font sizes change. Right now I’m using the beta drag and drop interface. Is this just part of the current beta drag and drop interface right now? I’ve got a compiled app request in and should have a real app to view soon. This is cool but not a way to keep testing because it takes some time before the app is finished and emailed to me. What is the most true to real method of viewing and testing an app? Are there any tips I should be using when creating my app so that the UI looks correct?

1 Like

[Caveat/Aside: I’m mostly still working on the old snap to place interface because I like cloning way too much and because I want a bit more control than Drag and Drop provides.]

Thunkable is not perfectly cross-platform. It’s close, but there are some layout differences, platform-specific bugs (such as the Android can’t hide an absolutely positioned element bug), and other differences, including those caused by the aspect ratio being different. Even within iOS, I’ve got to think carefully to make things look good (not the same, but good) on a small phone and a large tablet.

My best advice would be to use Live testing on whatever platform(s) you’re designing for, and to build and download for all those platforms at least once in a while to make sure that what you’re seeing in Live reflects what happens on the download. If you’re not building for web, view the web preview with some skepticism – sometimes it looks exactly the same as the downloaded app, but often there are differences.

Example: This afternoon, I discovered that although the web app will let me used the advanced functions to put only a bottom border on a label, Live iOS doesn’t draw that bottom border. So I needed to change my plan a bit, and was glad to have discovered that early on, before I got really locked in on that bottom border rendering correctly.

3 Likes

Thank you very much for this advice. I was focusing on the new drag and drop UI because I just thought since that was where the product is going I would get used to it. Maybe I should focus on the old snap version if you feel it retains layouts better. I’ll have to test.

Gene, I’ve thought exactly the same thing a couple of times. What I like about snap to position is that you can do math and logic to decide exactly how big various elements should be. That can be sort of a nuisance, but it can work really well to get everything exactly the right size, for a wide range of screens. Right now, D&D doesn’t let you do that. You can’t use blocks to set some element to exactly the height you want it to be. It’s supposed to “just work” on a wide range of screens, and it’s certainly a whole lot easier than working out that a particular square label should always be 1/3rd of the screen height or 1/5th of the screen width, whatever is less. But when it doesn’t “just work”, your options for making it work with block logic are more limited.

1 Like

Thank you