Skip to main content

Mobile

OutSystems

Does OutSystems support responsive web design?

Yes. OutSystems enables organizations to employ responsive design techniques. Every time a new mobile device is announced it seems to come with a completely different screen size. As the number of different form factors increases, a full spectrum of sizes between the smallest smartphone and the largest computer display appears. This makes it harder to tweak a user interface (UI) when using something like a Galaxy Note or iPhone.

OutSystems shields any company's applications from this changing landscape with fluid grid design capabilities, UI widgets and a responsive UI framework called Silk UI.

homedevices.png

 

Fluid grids

Fluid grids have become the standard for responsive design. With OutSystems, developers can use fluid grids in the visual development environment by simply dragging and dropping. The apps smoothly adapt to all existing device sizes perfectly and are future proof. 

Because fluid grids use proportional sizes (set in percentages), developers can use them in every kind of layout, even in smaller sub sections of a page, and when designing and tweaking the tiny elements of applications rather than resorting to CSS. 

OutSystems enables developers who are using fluid grids able to also use thesplit commands, available on the toolbar and context menu. With a single click, containers can be split by 2,3 or 4. 

UI widgets

OutSystems enables developers and teams to create amazing user interfaces that work across all devices. In the visual designer, they're able to design and tweak the user experience to what's needed, without having to be an HTML, CSS or JavaScript expert. But as new devices and new application designs evolve, new interaction patterns appear.

OutSystems includes a set of widgets that allow developers to create richer multi-channel user experiences. Users can be more productive when inputting data in an app, while the developer team focuses on business functionality. These widgets are:

  • Powered by HTML and CSS standards, a major advantage for accessibility compliance or customization requirements

  • Supported by rich client side JavaScript interactions for engaging user interaction and full extensibility of custom behavior when it's needed

  • Simple to use in the visual development environment, which saves developers long hours of JavaScript troubleshooting 

  • Multi-channel ready so they work and adapt themselves across multiple devices and form factors, and with substantial usability-related improvements for mobile scenarios

A responsive UI framework: Silk UI

OutSystems has a built-in framework to develop responsive web applications without a single line of code: the Silk UI framework. In Silk UI everything is responsive: themes, layouts and patterns. But it's a different, better kind of responsive. Instead of a client-side approach, where all content is always sent to the browser and it then decides, using CSS media queries, what to show to the user, Silk UI uses a server side approach.

​Why Silk UI?

The mobile revolution keeps raising the stakes on user experience. Developing good user experiences is challenging and requires significant proficiency in front-end development languages, like CSS or JavaScript. To make this task easier, a myriad of front-end frameworks appeared and some of them thrived considerably. But these still rely on a deep understanding of the previously mentioned languages and the frameworks themselves, becoming difficult to maintain whenever the application grows beyond a simple set of screens.

This is why OutSystems created Silk UI. It combines all the best aspects of modern UI frameworks with rapid visual modeling. This new framework plugs directly into OutSystems Platform, enabling the creation of compelling experiences with drag-and-drop simplicity while also abstracting the complexity and change of underlying technologies like Javascript, HTML5 and CSS3.

Codeless

Silk UI is a fully responsive framework, with dozens of ready-to-use patterns, that can be easily dragged-and-dropped to build amazing UIs without any coding. With several developers pointing to CSS as one of the hardest “languages” to master and all the new challenges brought by the wide set of form factors across devices, pushing this complexity away was key to solving this issue.

This codeless approach boosts developer productivity, fosters usability, improves look and feel out-of-the-box, and reduces the skillset required for developers to create rich and engaging user experiences.

Themes

The framework provides four themes that are customizable and fully responsive. Liverpool and Dublin were built to answer different base layouts, Tokyo is aimed at building great hybrid mobile apps and Lisbon is for developers who want to start something completely new that still leverages the provided patterns. 

Any of the dozens of patterns work seamlessly in any of the themes and blend into its look and feel. Users have noted that  “they just work” and look great across all devices.

Dublin

Lisbon

Liverpool

Tokyo

Patterns

Dozens of pre-built web blocks extend current OutSystems widgets with exciting new controls and patterns, like button groups, toggle buttons, dropdowns, balloons, carousels and many others. This makes building applications user interfaces a breeze.

From patterns that simply display content in modern and easy-to-model layouts, to a set of new modern controls, data visualization elements, good looking emails and new navigation mechanisms,a developer team is covered for most patterns an application might need. There are also specific patterns that enable responsive behaviors or are designed to craft a mobile experience. These abstract the complexity of working across devices or form factors.

All of these patterns have best practices built in so they are extremely robust and performant in runtime, while providing the drag-and-drop experience in the visual editor you’re so used to.

Server-side responsiveness

In Silk UI everything is responsive - the themes, layouts and patterns. It foregoes the client-side approach where a browser or device decides what content to display in favor of a server-side approach called RESS (Responsive through Server Side components). Content is calculated and optimized at the server before being sent to a particular device. This adapted version of the page improves fit and performance and has multiple advantages over having the browser or device decide:

  • Only the required content is sent to the browser because the server is aware of the device in use.

  • There are no CSS media-queries, which makes specific device-targeted CSS instructions easier to understand. 

  • Different strategies can be used to handle devices on the server.

Responsive patterns can be used to define which responsive behavior should occur for each device type without having to craft a single line of CSS or Javascript. In addition, a number of visual APIs are available that enable a developer to run server logic depending on the type of device that is using the app. Examples include only fetching specific data from the database if running the app on a tablet or desktop or fetching an optimized version of an image if the app is running on a smartphone.

Learn more about the Silk UI responsive framework and APIs by viewing these tutorials.

Sample pages and apps

A set of sample pages and applications are provided to quickly set up developer pages and to allow learning by inspection. OutSystems has built dozens of responsive and mobile sample pages that can help developers and teams imagine and build UIs.

Get started with Silk UI quickly by visiting the Silk UI website.