Mobile Optimization - Which Viewport size?

Questions
1

I am going through my site that is nearly ready to launch and optimizing it for mobile viewing - since that’s probably what 90% of my user’s would use to view the site anyway.

When optimizing the size for mobile, what is the best viewport size to optimize for? If I optimize to work with one size, it looks like crap on another. Should I just optimize it for the most common viewport size?

According to data I’ve found for both North America and World Wide, It looks like 414x896(NA) and 360x640(WW)…

image
image1203×359 12.3 KB

My phone is 428x926 (iPhone 13 Pro Max) so how do I know what to optimize for? Do I need to put a condition on nearly everything to change its size based on screen size? This seems like it would take longer than it did to even develop the site itself.

2

I don’t know that I have a specific vp size for you. However I’ve always developed my apps to be responsive. The new responsive engine makes it so much easier to develop a responsive app to even the smallest phone sizes.

3

but if I make it responsive to the smallest VP size, then on a much larger one, it would look like everything is crammed towards the center. I guess I’ll make a couple settings to resize at a couple of the most popular sized screens.

4

That’s not actually responsive…

Responsive means it stretches and condenses based on screen size to look balanced no matter what screen.

You can show or hide things based on screen size too.

Once you get the hang of it you basically just build it in as you go and it really doesn’t take much extra time.

2 Likes
5

hmm. Maybe I’m using the responsive wrong?

6

I think so :slight_smile:

You are trying to ‘fit’ content to the minimum screen size rather than have it be ‘responsive’ to the screen size :slight_smile:

7

I think your issue will be more on the vertical side than it is on the horizontal one.

Responsive in width is doable in Bubble but I run into issues trying to get vertical responsiveness.

What you do not want is that on your phone with lots of vertical pixels the whole “app” is only on the first half of your screen leaving lots of white space on the second half of the screen.

At this very moment I am dealing with that issue, how to make it responsive vertically like an app. Still no idea how to that so any tips are welcome

8

Do you have any recommendations to show how to get all this content to work via responsive? Right now I just have conditionals that say “if screen is < thisSize.px then width=XXXpx” etc.

If there is a faster way to make my site responsive I’d love to know. Thanks!

9

I’d recommend doing some tutorials on responsiveness - try and find ones for the new responsive editor as it’s better to learn that than learn the old one and have to go back to the beginning and learn the new one :slight_smile:

1 Like
10

Okay so I realize I never built my pages to be responsive. I’ll have to comb through the pages and modify them quite a bit but then they will all be good to go.

1 Like