Create a better responsive development environment

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.