Catering for Mobiles

[Keith]

Hi

I recently released an app to a selected group of enthusiasts (and have written about it under 'Links to sites'  http://202.78.140.106:24010 ) and I found that a lot of activity was via mobile devices of small screen size.  My app revolves around information displayed on a Form under six tabs of which three are pretty dense in terms of fields which are typically arranged in a tabular format (i.e. labelled rows and columns).

I had imagined that with so much data to display that no one would remotely consider trying to run the app on phone - but they did   

I have since read as much as I could find about how to cater for Mobiles. I can understand Browses and can easily adjust the template settings per recommendations and that will work well.  But its the Form that is the problem.  I have attached two displays MobileD1 and MobileM1 which show what one of the tabs looks like on a Desktop and on my desktop with 'Force Mobile' mode selected (and the display looks much the same on a real phone).

The other tabs on the form (especially the dense one) are equally unusable.  I suspect that this chaos has something to do with how I have achieved the formatting which for the desktop is well structured and briefly this is what I have done:

The row headings are the prompts for the first fields in the row (for which the column heading is 'RPM')the other fields in the row have a null prompt.  the column headings ('RPM , 'Torque Nm' etc are individual Display fields.  They all line up because they all have the same template attributes 'last in line' = No and 'last in Cell' (except the last one in each row of course).

A couple of questions at this stage - why would the formatting go so horribly wrong on a Mobile and is it even sensible to expect a similar result as for a large real estate device? 

And if the answer is that tabular formatting (at least as I have implemented it) is a no-no for mobiles then does that mean that you would need to develop another application with a different style for them?

Thanks

Keith

[attachment deleted by admin]

[kevin plummer]

Hi Keith,

In my experience designing for a mobile is almost like starting again. Rather than displaying all this data across the page and using edit in place etc they tend to go down more layers to display the data and down the page. So in your case I would probably try to break the data up per column on it's own form and maybe do a wizard. The user can then navigate back and forth changing settings and regenerating their graph.

I find it easier to create new forms for mobiles and I redirect based the mobile setting rather than trying to create 1 form that satisfy's both devices.

Do lots of R&D by downloading and looking at other Apps and get a feel for the navigation and design.

Cheers,

Kevin

[Keith]

Hi Kevin

Thanks for the pointers.  I had pretty much come to the conclusion that there needed to be new Forms and a new structure for Mobiles but needed confirmation.

Now you said you did a redirect based on whether the device is a Mobile.  I was thinking of how to achieve this - would this work:

At login I set the Level to 1 for a desktop and 2 for a mobile.
This allows me to conditionally display menu items that relate to the connecting device.
And the menu items for Mobile point to new browses and forms and new navigation.

Or, is there a better way?

Thanks

Keith

[kevin plummer]

At login I set the Level to 1 for a desktop and 2 for a mobile.
This allows me to conditionally display menu items that relate to the connecting device.

> you could just use the p_web.IsMobile() as a condition instead.

And the menu items for Mobile point to new browses and forms and new navigation.

> yes but only if you want new forms etc. I actually go to a different indexpage after login with a menu for mobile and all new pages\browses for mobiles. It was easier to keep all the mobile stuff together and for testing I could switch the redirect on and off.

Or, is there a better way?

> I'm not sure there is a right or wrong way. I would approach it differently on a simple or complex app.

[Keith]

Hi Kevin

You said "I actually go to a different indexpage after login with a menu for mobile and all new pages\browses for mobiles."

I can see that on the Login form there is a 'URL on Save' which is set to the Index Page name.  I also see that in the SetFormAction routine in the Login procedure that the variable loc:formaction is set to this value but also modified based on other attributes.

So where do you put code like:

if p_web.IsMoble() = 1 then loc:formaction = 'Other Index Page'.

I'm probably barking up the wrong tree but question is - how do you conditionally set another index page?

Thanks

Keith

[kevin plummer]

I can see that on the Login form there is a 'URL on Save'

> In here I have a GSV and I set that in the pre-change embed based on the IsMobile setting.

[Keith]

Thanks Kevin, Of course.!  I'll start thinking of this myself after a bit more practice.

Cheers

Keith