Feedback on mobile responsive pages/components version 10

I have started to see the benefits of the “unified builder”. I am having an inconsistent experience, though. I didn’t think the mobile reconfiguration of things like tables wasnt working at all, but I have found that it does get triggered sometimes and it is great in certain ways. For example, I have a page that has s lot of tabs,sub tabs, and page includes. When that page loads in mobile safari, it looks like it always did. It is a desktop layout in a mobile browser. It requires a lot of pinch and zoom, but it works great. However, when I click on certain tabs that then load certain page includes, the entire page (not just the page include) transforms into a more mobile friendly layout. The screen essentially zooms in and all the tabs and buttons reconfigure. Feedback: I think you have to do something with tab menus. I think tabs on top need to be transformed into hamburg menus and tabs on left need to be transformed into just icons. Tabs on left made the page almost completely unusable as the tabs on left take up almost the entire width I portrait. Tabs on top are useable, but if you have a lot of tabs, it becomes a bit messy. One of my tables converted to cards and the others stayed as “mobile friendly” tables. The auto zoom when editing text fields or entering into search components is annoying in an otherwise mobile layout, but I’m not sure if there is anything that can be done about that. Seems there must be as pages built in mobile builder don’t auto-zoom.

Hey Raymond,

What was your solution to this? I’m working to make pages mobile responsive and this is certainly an issue. 

My workaround would be to switch to a navigation menu and use conditional rendering to make it seem like it is a tab vs menu. I will have to additionally set some styling to show which menu item was clicked to make it look like a selected tab.

Well… I got a bigger phone :)… that actually did help a little, but additionally I determined what pages I really needed to be mobile and I redesigned them to not use tabs. Instead I used buttons and nav components to cause certain components to hide or show (as you mention above). This recreates the experience of tabs but can be customized however you need. I increased the font on all edit components to 16px. This prevents the auto zoom function in Mobile browsers. I couldn’t use radio buttons as they didn’t render well in mobile responsive. They were big and awkward. I used responsive grids to right-size the proportionality of certain components on different device screen sizes. My page says that are less used on mobile I left as is. They have tabs and the tabs on top and tabs on left or tabs on right are sub-optimal, but on my bigger phone I can get something done in a pinch. I have been secretly waiting for tabs on top collapsing to hamburger and tabs on left collapsing to icon with tooltip functionality so I don’t have to rebuild the pages. Also, I think the unified builder should default all font sizes to greater than 16 when in mobile layout or at least as the option so that you can make it feel native with no auto zoom.

Can you share what the end result looks like? Especially interested in seeing what it looks like when a “Tab” is selected.

Sending email