Catering for desktop and mobile - best practice.

Classic Servoy
1

Best practice in the Servoy ecosystem, that is.

Should I go down the route of having one solution with responsive Bootstrap components and then presenting different forms where appropriate for smaller devices? For example a grid of customer invoices on desktop, but a more panel-like approach on mobile?

In that scenario, how would I detect server-side how wide the display is to allow a decision on what form to present ?

Or would you just create a separate mobile-targeted solution (maybe leveraging PhoneGap) ?

2

Hi Alan,

So far I’ve kept these separated, but both use the same backend code/API to avoid duplicate code / logic.

If it isn’t for the layout, there are lot’s of other things to cover for example double-click, rightclick, tooltips (Although right click is possible on some touch-based OS)
This last bit already applies when you are not only targeting desktop, but also tablets.

It will take time to create separate forms, or even plain webapp. But I think it will save even more time when not having to create everything in 1 responsive layout.

Whether or not to use Servoy for mobile, also depends on the api’s you want to use on your device (camera, geolocation, shake gestures, etc.)
Although you can cover this by creating an app with a web view container and javascript bridge to these api’s.
That last solution makes it a whole lot easier to deploy a newer version of your app, as the container remains the same.

Any best practice? I guess not, but I hope the above will help you to make a decission.

3

Hi all,

I’m still on smart client, so forgive me if I’m wrong, but can’t you use visibility classes in Bootstrap to combine mobile and desktop versions in one layout?
See

http://getbootstrap.com/css/#responsive-utilities

for visibility classes. You first specify different widths in columns for lg, md sm, etc in the divs of your layout. In the cases where groups of layout elements look awkward when you resize the screen, you duplicate elements and make them show only at specific screen sizes. This allows you to reorder or hide elements on mobile – you can have a table style view on large screen but present list-style views on small screens – all from one layout.

Any thoughts?

4

Thanks both.

I am aware of the visibility classes in Bootstrap from playing around with it in the .NET world but it’s not immediately apparent how to do that in Servoy. But I will have a play with it again. There’s only really one form that requires it.

5

https://www.youtube.com/watch?v=p7mTds23joY

6

Thanks, I have watched it now. It works as I expected it to work. Good.

7

Andrei Costescu:
https://www.youtube.com/watch?v=p7mTds23joY

Exactly what I was after thanks.