Adaptive Responsive Layouts

So when we set the mobile version of a page

It is transparent to the user

I’ve been using this feature a lot - because of the WYSIWYG editor, in my experience, it’s typically just easier/faster to rebuild the layout.

First, is it possible to be told the viewport pixel width that forces the mobile page? I just build on 320px to be safe - but I’d like to add some margins without losing the forced view.

Second, I think it would be pretty cool if this feature was iterated upon - I prefer my layouts to be mostly adaptive rather than fluid, which is totally doable with the responsive engine and hiding groups at breakpoints, it just tends to be a bit messy. (Lots of overlapping groups on a single page)

I really like how I can just design my mobile layout on it’s own page. Would it be useful to anyone else if, like the mobile view option, there was a tablet option and potentially more? (Landscape mobile and 4k come to mind)

I’ve been thinking of the same challenge, but about a slightly different implementation. Mentally, I’ve been toying with the concept of a single “Page” having multiple views. You’d set the conditions on when each “view” would be used. For example, when browser width is more than 1920, show this view. It’s all the same page, with the same logic and workflows, but you can manipulate the groups and elements and stuff in each view independently. Of course, I have no idea how insanely complicated/impossible this would be to implement, but showing/hiding tons of groups is a tough solution when the page is complicated.

TL;DR a new iteration would be neat to see!

1 Like

I wonder if wrapping a view in a max-width breakpoint specific size group would work well.

So a group at 320px, throw your mobile elements into that group and add a hiding rule, moving up through the breakpoints.

I guess I just defaulted to adding hiding rules to a bunch of elements, which got complicated fast, but if I just did the one group…hmmm

I’ve done that on several pages, but for complex things, you run into the same overlapping-group thing. It’s not impossible, just inconvenient. I def recommend throwing it all in a group, tho

For sure…what would a “view” look like, though? Wouldn’t it be something like what we have currently when we show/hide groups in the editor panel?

I’m kind of doing the five why’s here and keep arriving at the group panel/tree is kind of a pain to manage.

Yeah, I have no clue. That’s why I’m not a designer :stuck_out_tongue:

The Mobile Version page was a feature before the responsive engine was implemented. In my opinion, you’re better off building one page and hiding/showing sections of the page based on width. Most of the time, if you create containers (groups) for the different sections, it’s relatively easy to hide a section (group) rather than trying to build a whole new page for a specific viewport.

Additionally, you’ll find some discussions on the internet about Google giving higher ranking to a responsive page versus a separate mobile page.

To be honest, I typically do just enough responsive to pass the google check. Also, beyond my public facing pages - FAQ, About, Landing etc, I don’t stress much about google.

Traditionally, I’ll build mobile width up. With bubble, my stream of thought wysiwyg building is done in desktop widths first, then I work down.

It’s not a dire need - it would potentially make my life easier if I could force pages to specific viewports though.

The more I think about it, however, the more I’d just rather see a more user friendly group tree. Some of my FAQs have 100+ groups. Setting hide rules for each group is a HUGE pain, so even though I’d prefer a certain layout for specific view ports, I end up compromising and building for mobile only, adding some “fluff” that can be easily hidden when the layout breaks.