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 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.
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
- 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?
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.
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.
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.
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.
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.