Forum Academy Marketplace Showcase Pricing Features

Prototype Mobile Frames in Bubble

Hi Folks,
Bubble appears to be a very powerful coders platform to quickly build web applications. I noticed that you can even build native apps. One question I have though is regarding the prototyping phase. You can basically create prototypes through bubble, but you really can’t view them unless you test on your mobile device or as a web page with responsive screens. My question is, is there a way to create mobile frames that can be used when previewing your app on a PC web browser? I’d like to be able to see the screen resolution for iPhones and Androids in side mock frames for these devices, and then be able to turn around and share that same preview with other collaborators.

Thanks

Hi @wcl and welcome to Bubble,

Are you creating mobile-only screens? Or are you creating both desktop/mobile and having them be responsive?

If you are creating mobile screens (for example 375px wide) clicking preview will show you basically how it looks on mobile.

Thank you for the reply.

I can see the screen resolution, but I am looking more for the presentation of the content in a mobile looking frame.

Here is a screen shot of what it looks like from a prototyping tool.

Essentially, I want to only have one tool to build my mobile apps and prototype them.

Oh I see,

Unfortunately you can’t do that :frowning:. A solution would be to take screenshots and then upload them to a prototyping tool.

You mentioned that if I create a mobile screen, preview will show me basically what it would look like. It doesn’t seem to do this. If I create a screen and set the canvas size to say 375px, and then preview it in my PC web browser, it goes to the full width of the browser screen (it doesn’t stay at 375px). I have also tried checking the Native App check box for the page (this doesn’t appear to do anything) and I have also attempted to set the Mobile Version of the page to itself and that doesn’t seem to allow preview to use the size constraints either. Is there something else I am missing?

This is not possible at the moment. There are some plugins that will allow you to access core features from your mobile but your bubble app will still be a website. Then you can decide to use wrappers to package them into an app. But it’s definitely not native.

Make sure on the page settings, you set the page to fixed width.

Bingo Bango, I missed that check box. Thank you for the help.

Hi @wcl, welcome to Bubble! Looks like you already you got your answer, but thought I’d throw this out there since you’re looking for a ‘native’ solution. As these two gentlemen mentioned, creating a true native app isn’t possible with Bubble, however a good amount of users have successfully ‘wrapped’ their app into a ‘native-like’ solution. There are quite a few ways to do this, but thought I’d throw this thread your way for future use:

3 Likes

Hi, wcl. Recently I read article about similar topic. It may be helpful for you.