Best practices for mobile (smart phone) use

Getting Started
#1

What are best practices for building pages that will be accessed on mobile phones? I’ve watched the short YouTube video on the subject (here) and found it helpful but not as comprehensive as I’d like.

I’m working on an app where there will be a public-facing, no-login form. People will go to that form, provide info about themselves, submit the form and be done. No access to anything other than their own form. But I do not know whether those users will be on computers or phones. I think it’s reasonable to expect some of each.

I understand the idea that components are divided into twelve columns. I’m less sure I understand what exactly that means. Does it simply mean that every display screen has twelve invisible parts? If that’s the case, then it looks like, if a form is potentially going to be used both on a computer and on a phone, I should perhaps make sure that all the fields are the same width and piled on top of one another, and no wider perhaps than four or five columns. In other words, don’t put components side by side if I expect mobile phone users to view the page. Does that make sense?

William

#2

I can give you some general principles to follow.

First, columns will arrange themselves on smaller screen sizes. So if you have a row with 4 columns, those 4 columns will stack vertically as screen size reduces. Use this to your advantage of be wary of what order they collapse vertically. You may want to create multiple rows of the same components and edit columns to either be visible or not visible on various screen sizes.

Second, use lists instead of tables as much as you can. Experiment with field layouts on lists for mobile. I find that 1 column lists with vertically stacked fields is best. Referring to my first point, you could show a table on desktop, and a list on mobile by only showing their columns on relevant screen sizes.

If you’re setting any custom margins, specifically left and right, 15px isn’t much on a big monitor or laptop but is considerable on a mobile device.

I will probably come back and add more as I think of it.

#3

Ah, I’ve seen this happen but I didn’t understand it. Thanks for pointing out that this is deliberate.

Oh, interesting. Not sure I fully understand this. I’d create two columns side-by-side, or perhaps two rows on top of each other?

Kind of challenges the usefulness of the preview builder, no? Might be useful here to have a “Hide” option for rows or components, similar to the Hide option for fields displayed in the tables in the Data Builder. That way I could hide the smart phone row or column while I work on the desktop column, and vice versa…

I’ve played with this and it didn’t seem to me to make any difference. Have to play with it some more, I guess.

Thanks, Tim.

#4

Here’s some late night reading regarding the nitty gritty of how the Tadabase page builder works.

Columns are the only things with built in controls to hide. If I’m going to hide a column(s), I will group them in a row.

If you had a row that contains 4 columns, all set to a column width of 3/12, and hid 2 of them. On desktop that would throw off the layout you were originally trying to achieve because you’d be left with a row displaying 2 columns of 3/12.

@WilliamPorter sorry this isn’t the most helpful video because there’s no audio and there was some weird glitches where the page didn’t save. Pay close attention to when I have each column set to 6/12. You can see that 2 of the columns bump down a row. They’re not put into an actual row container, just bumped down because the column total width can’t exceed 12. When I first start hiding columns, I hide the top right and bottom left column, afterwards the top left and the bottom right become side by side.