Responsive Web Design and Outsystems Platform

Responsive Web Design and Outsystems Platform

  
Hi all,

Myself and the team I'm a part of are working on a web app built in Outsystems. The idea is that the app will be Responsive, and we plan on using zurbs' Foundation as our framework.

We have already done much work on the app, and we want to integrate Foundation later. I am trying to obey Outsystems' grid system as closely as I can, since I think that deviating from it too much would probably make it difficult to convert to a responsive layout when the time comes.

Some questions:

  • Do I definitely need to obey OS' grid system in order to make the app responsive? (I'm doing this at the moment to be safe)

Also, if there are there any members of the community who have created a Responsive Outsystems website, especially if they are using Foundation, would they be willing and able to show off their work? I'd be very keen to see how different people approach this.


«Also, if there are there any members of the community who have created a Responsive Outsystems website, especially if they are using Foundation, would they be willing and able to show off their work?»

Although not using that framework, you may want to check out this component:
http://www.outsystems.com/forge/component/414/Responsive/
Thanks - I've had a look at this before. Looks great!

I know that Responsive layouts are definitely possible with OS... I would like to see how front-end devs generally approach making a layout responsive if they're using a framework though.

i.e., Outsystems already creates the "Themegrid" and "Themegrid_Width" classes the create columns in the layout... would one keep and adapt this mechanism, or leave it out and replace it completely with Foundation/Bootstrap/[insert framework here]'s own markup?
I notice that the Outsystems site (built in OutSystems) uses Bootstrap...
Hello Quintin,

Using ServiceStudio's css classes will allow ServiceStudio to help your work while creating layouts, being able to manually resize elements or put elements side by side. Notice that this is valid dealing with both grid sizes and other styles such as using floats, display, clearfix, etc.. If you are planning to import bootstrap theme once, and then significantly developing inside Servicestudio, probably this is your best shot.

Additionally, more information about overriding OutSystems' grid system, to use a fluid grid, for example:
http://www.outsystems.com/forums/discussion/10337/version-8-fluid-design/#Post34832

I hope this helps you!

Cheers,
Vasco Pessanha

Hello Quintin,

We are also starting with a responsive webdesign and tried to use the OS grid with it. However the design is custom made and the OS grid interfere with the custom layout with al the generated styles from the grid. So, we're still in the pre-developing-fase, we probably will not use the grid layout.

Kind regards,
Evert
Hi Evert,

Thanks for your input! That describes quite well the experience that I've had with converting my PSD mockups to OutSystems, let alone making the layout Responsive.

For anyone starting out on their first Outsystems project (which is the position I was in a couple of weeks ago), I think the best first step would be to first understand how Outsystem's column layout system works, and then if you have an existing design (a .PSD mockup or something similar) to adjust the mockup's layout to be more OS-friendly.

Vasco's example above (Thanks!) will probably help with making the grid reasonably fluid, but not fully Responsive. 

However, I think Responsiveness is another story. It may be that one can take the CSS and media queries for an existing framework (Bootstrap or Foundation for example), change the class names in the CSS (so that it uses Outsystem's "Themegrid_WidthXX" instead of Bootstrap's "spanx", for example) - but one would actually have to try that to see if it's feasible, I think.
Hi Evert,

Thanks for your input! That describes quite well the experience that I've had with converting my PSD mockups to OutSystems, let alone making the layout Responsive.

For anyone starting out on their first Outsystems project (which is the position I was in a couple of weeks ago), I think the best first step would be to first understand how Outsystem's column layout system works, and then if you have an existing design (a .PSD mockup or something similar) to adjust the mockup's layout to be more OS-friendly.
Hello Quintin,

If you can adjust the the mockup's layout to the OS one it will be a nice one. It will cost some time at start, but I know you will win that time back when you are actually developing. Since the design we need to work with is made by a 3th party it isn't really an option for us :-(
Vasco's example above (Thanks!) will probably help with making the grid reasonably fluid, but not fully Responsive. 

However, I think Responsiveness is another story. It may be that one can take the CSS and media queries for an existing framework (Bootstrap or Foundation for example), change the class names in the CSS (so that it uses Outsystem's "Themegrid_WidthXX" instead of Bootstrap's "spanx", for example) - but one would actually have to try that to see if it's feasible, I think.
 Responsive is indeed something different then the grid. As I see it, the grid is more for positioning the 'blocks' on you screen. Responsive is designing the page on a way that it can be used with different breakpoints. However it looks these two are related with eachother, ther are actually something different.

Kind regards,
Evert

 
Yes, I agree..
The easy way to go is to take advantage of Servicestudio's grid system (both in design time and runtime), helping you positioning elements and setting the default sizes, and then use your own responsive "jumps" (you can also get it from bootstrap, foundation, etc..).

As Evert was saying, having a grid (fixed or fluid) helps us positioning and sizing elements, and then responsive helps adapting elements (with jumps) to other devices and screen sizes.

Cheers,
Vasco Pessanha

Hi Quintin,

From my (rather limited) experience it is going to prove difficult to use both Servicestudio's grid system and a 3d party responsive grid system together because the Outsystems css will interfere with whatever responsive grid system you want to use. In the end you'll be making so many changes and overrides to the css of either one or both that it becomes unstable and hard to maintain.

Obviously the best and cleanest way would be to adjust the responsive grid system to use the predefined Outsystems css classes so it integrates nicely. No doubt, this will be a lot of work and I think I would advise against it.

The easy way out would be to not use the grid system at all and let all the positioning and sizing of components be done by your 3d party framework of choice. In my opinion you would gain alot more then you would lose.

Just my 2 cents.

Cheers
Hi David,

Thanks for your input... that's definitely what I've started to think myself, as well!

At the moment I'm trying to reproduce a design put together without any prior knowledge of how Outsystems lays out elements. It's proved impossible to reconcile the design with Outsystems, and I've needed to make many adjustments along the way and to shoehorn some layouts into Outsystems using padding and margins to align the elements correctly.

It sounds as though the best course of action will be to re-do the layout in the framework I plan to use and discard the current layouts... 
Hi All,

It have cost some time and a lot of effort but if you want to see the results of the responsive site I had mentiond earlier see it at: www.wasco.nl.

Kind regards,
Evert

Hi Evert,
The site's responsive/fluid design looks really amazing! I had the chance to see old versions and it really makes a difference.
By the way, just to let you know that, because of use cases like this, where you need to implement these fluid sites with responsive "jumps", we are introducing fluid grids in platform 9!
Stay close to see the new capabilities as soon the are released..

Best Regards,
Vasco Pessanha

Hello Vasco,

Nice to hear you also know the old site.

regarding the improvements, working with this design in service studio was/is hard. There are a lot of expressions used (-:. Would be nice if more 'schema's' would be implemented (like the http://schema.org/Product for ecommerce site's). I'm curious to the fluid grid, will ask for it at my colleage (with version 8.9).

Kind regards,
Evert
It was a really good reeding for me as I was not with experience with Foundation.
I am a fan with Bootstrap.

Anyway thanks for the post and it was a good chance to make me more knowlwdge with Foundation.

Jr, coder, psddesigntohtml.com