Creating Mobile versions of pages

I’d like to experiment with making our site mobile friendly. After doing some research, it seems that cloning a page (which I assume is just copying say the ‘index’ page) and specifying it as mobile version and curating it as such. I’ve tried right clicking on the index page but nothing happens.

Any more specific advice? Thank you

Click on your pages “menu” > Create page > give it a name > from the drop down, choose the page you want to clone

1 Like

@micah then go to your index page’s settings and choose mobile version from the drop down (you’ll be selecting a page). When I first started with bubble I did this, and the more advanced I got I stopped and just focused on making the pages fully responsive. That way it looks great on any device and you don’t have to create two pages. Little more work, but worth it.

3 Likes

@lantzgould That’s exactly what I’ve been trying to do, but I’ve been struggling a lot! Do you have any tip on making the pages fully responsive (like repeating groups, inputs, textboxes, buttons and… images)? I would really appreciate some advice there, since you’ve already been through it. I’m ready to do the “little more work”, but I’m afraid I’m currently going in the wrong direction. Thanks in advance!

I’d suggest watching these short clips that @J805 created for Responsive Design. Although short, they were enough for me to understand how Bubble interprets responsive settings. E.x. spacing, alignment, etc. To be honest, it’s a ton of trial and error. What I did, was create my app, then clone it and just named it (App 2 Sandbox) or something. That way I could play around with a copied version of my application without messing up the one i’ve worked hard on.

Feel free to reach out if you need help.

3 Likes

can I ask please, do I need any plugin so user is redirected if om mobile or does it happen automaticlaly?

2 Likes

Hello!

If you are asking that once you designate a page as mobile the answer is yes. Bubble allows you to designate one page as mobile and will detect when a user is on a mobile device. If on mobile the user will not be shown the index page but the mobile page that you designate as so.

2 Likes

Awesome! Do I need to do a workflow so it redirects to mobile? Like when page is loaded or smth like this?

also what do you think is better, 2 pages or one that is well reponsive?

As I said, it is automatic. You have to choose.

Depends on the type of app. If it is a tool used by a team or company and you do not need to sell the features of your app to anyone then go with a mobile designed page instead of a responsive index page.

2 Likes

Thank you very much for your help! :slightly_smiling_face:

1 Like

What would you recommend for mobile page dimensions? I know 320 is standard, is that what you would suggest?

Yeap because it is the size of the smallest smartphone … the iPhone SE

And do you find that 320 also accommodates for the large phones? Say the 12 pro max?

@bowtieben15

The approach is to build responsiveness for the smallest viewport.

This may be worth your while. Long but full of gold nuggets:

3 Likes

Thanks for sharing!