Create a better responsive development environment

By Victor Ivens on 4 Mar
Currently, outsystems uses the approach of going to the server to do responsiveness, which have some down sides, the greatter one being the user losing all the data he might have filled in a complex ajax page.

I suggest to make the responsiveness using media queries, where we could develop the breaks using the different views (Desktop 1024px, Tablet portait 768px and smartphone 320px) to apply the classes in each element.

Let's say you're in the Desktop mode and you want 3 columns (1 line), you drag you elements to be the way you want and the classes added would be "lg-col-4" in each element. When you change to the Tablet visualization, you want 2 columns (2 lines), you drag to be that way and the class "md-col-6" is added in each element. Finally, you change to the Smartphone visualization and you want just 1 column (3 lines), you drag them this way and the class "sm-col-12" is added in each element.

You could even show and hide content in each view.

The server approach could be used for other content, like images, even though the html5 <picture> would be a better approach.

Thanks in advance.
Hello Victor, my good friend,

Nice to see you!

I believe the approach you mentioned was the first responsive design approach taken with the launch of London Theme, which is still part of any OutSystems 9+ installation. Have you taken a look at it? On the other hand, with Silk UI a server-side responsive approach was taken instead, called RESS (Responsive through Server Side components) which does have some advantages precisely over media queries. I honestly don't know if a mixed approach would be possible, but it certainly is a good point mentioning in the Silk UI Discussion Forum. You can always still use London Theme if you want in order to get the behavior you mentioned, except <picture> tag is not used. Let me know your thoughts.