Does OutSystems support responsive web design?
Table of contents
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 OutSystems UI.
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 subsections 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 the split 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: OutSystems UI
OutSystems has a built-in framework to develop responsive web applications without a single line of code: the OutSystems UI framework. In OutSystems 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, OutSystems UI uses a server side approach.
Why OutSystems 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 these languages and the frameworks themselves, becoming difficult to maintain whenever the application grows beyond a simple set of screens.
This is why OutSystems created OutSystems UI. It combines all the best aspects of modern UI frameworks with rapid visual modeling. This new framework plugs directly into OutSystems, 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
OutSystems UI is a fully responsive framework, with dozens of ready-to-use UI 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 skills required for developers to create rich and engaging user experiences.
Themes
The framework provides two themes for web and three for mobile, all of which are customizable and fully responsive. Top Menu and Side Menu themes adjust the layout to respond to different base layouts. Phone theme is aimed at the phone form factor, scaling up to tablet size. Tablet layout is specifically designed for a tablet form factor, making better use of the real estate provided by these devices. Universal theme is optimized for a single application to offer two different layouts for the same set of screens, with different functionality depending on the form factor.
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.
|
Top Menu
|
Side Menu
|
|
Phone
|
Tablet
|
|
Universal
|
UI 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 UI 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 high-performing at runtime, while providing a simple drag-and-drop experience in the visual editor.
Screen templates
OutSystems makes it easier to develop enterprise applications by proving a set of fully functional screen templates with built-in logic, styles and sample data. These screens cover the most common enterprise application use cases and allow you to leverage UI and UX design best practices, that come from extensive research on the world’s leading applications.
From onboarding screens, directory, product details, profiles with lists and galleries, shopping carts and much more, all screens are fully editable and customizable with your company’s brand guidelines.
Wiring your own data is also easy - you simply drag and drop an entity to the widget you want to change.
Server-side responsiveness
In OutSystems 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.