Building web and mobile app - best practices?

Hey all,

I’m really comfortable building web apps inside Bubble, but I’m undertaking a new challenge; building a mobile app (iOS and maybe Android).

I’ve read about using wrappers for the original web app, but can I build an iOS-only version with different pages built for ‘mobile first’ rather than squeezing the web version into a wrapper?

What are the best practices these days for converting a bubble app --> iOS app and potentially Android app?

I’ve searched the forum and have learned a lot, but I know the Bubble/tech landscape changes quite a bit, so the most up-to-date information would be great!

Thanks :slight_smile:

1 Like

In case you missed this forum post, there were a handful of good points made there just a week or so back.

1 Like

Thanks, I’m watching now!

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.

4 Likes

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.

2 Likes

If I use Phone Gap or any of the others, do I still need XCode?

Which would you say would be the best to make sure the picture uploader has access to the iphone camera?

This topic was automatically closed after 70 days. New replies are no longer allowed.