(Web app) Possible to design multiple interfaces for the same page?

Say, I have a web app with a profile page with vertical ad banners on the sides. This doesn’t work so well for the mobile responsive approach to the same profile page as it compresses all the visual elements and just breaks the whole setup. With something like Webflow, you could jump to the mobile view and completely redesign the page to be mobile-friendly, even hiding some content and spawning in others (e.g. horizontal stacked ad boxes), and then just connect the appropriate data points and, theoretically, it would work just fine.

I’m curious if a similar approach exists for Appgyver. Then, I could “simply” build a desktop page exactly how the originally plans had it, build a mobile-friendly version, and connect them up appropriately. Any advice?

Much obliged. :slight_smile:

Hi!

There are a couple of ways of doing this. The navigation options we have in 1.9.X client do not support having different options for web/mobile, but 2.X advanced navigation editor will provide choosing different types of menus etc. Other than that, when I want to have differences in the page layout etc. in my app, I use system variables in formulas to customize what to show / hide and how to style it. I have e.g. made separate containers for desktop and mobile, but more often I just use different types of margins or I wrap containers etc. to adjust for the differences between desktop and mobile.

You can read more about system variables here!

Hey, thank you, Mevi! From what I’ve read, it sounds like variables and formulas are the solution to almost all problems here. Time to dip my toe in there. For me, I imagine this as one container filled with the text and images representing the desktop view and another built in a mobile-responsive manner, and then using variables to trigger the visibility of one container or the other… if I understand that correctly.

Question is, wouldn’t that suck up memory and cause a (subtle) slowdown, technically, as it would still be calculating the hidden containers as well – just not actively rendering it on-screen?

Thank you!

Hi!

I understand that when the Container is not visible it’s not mounted, and as such it’s no further strain on the app than the calculation of whether or not it’s visible. This is different compared to when the Container is hidden from the styles using e.g. opacity or something similar, in which case the Container is still rendered.