Edit: Follow-up – I’ve watched the video and I understand the concepts. This is the logic I wanted:
• Web app that scales down to mobile sizes - when loaded on a mobile, still looks like a website (e.g sandwich icon etc., all which I can do inside Bubble).
• Mobile app that has a lower nav commonly found in mobile applications, maybe a slightly different header
Instead, it looks like the video points towards creating a mobile version which loads dependant of whether or not you’re opening the web app from a mobile device, but if I create this mobile version to look like a smartphone application, it may look weird in the browser, not sure!
I have built quite a few mobile apps and have learned a lot as I have gone a long… I don’t think my approach is normal for bubble but I have found it to provide the best results.
I build my apps as hybrids where I have full native navigations and headers and only the content is being loaded in as a webview.
With this technique I can make use of much better looking native transitions and also access native functionality like Bluetooth and direct camera access. I have played around with Thunkable, Dropsource, and several other low-code native app builders and have found most of them provide the features that I need for this technique. However some stuff (like Bluetooth on iOS) I have had to use other tools. Recently I have really enjoyed building on Creo. Another great tool is to build with is jasonette.
That being said, I create custom pages for my mobile apps that contain the content I need. Going this way I also rarely rely on using custom states for pages. I either base pages on a url parameter (and I change the url parameter with my native navigation) or I just build individual pages on bubble and load them all at once, then cache the pages so it loads quicker the next time around.
The biggest issue you’ll run into in making a website that effectively scales down from desktop proportions to mobile is information density and features.
For instance, Netflix’s app is remarkably consistent in design across mobile and web. However, this is pretty easy because the overall feature set is limited and scalable.
For example: can you effectively have a repeating group with 6 columns of data look good at 400px wide - likely not. So you either hide certain data fields as the page gets smaller or have a mobile-friendly version of the group). (In Netflix’s case, they only show the image of the movie and the title, then you click in for supplemental detail).
When you don’t want to have mobile versions of pages, you can create “breakpoints” using the page width. (Ie. when current page’s width is 400px, then reduce the text size to X). More context in the forum post below.