Information, interaction, intuition: With cloud technology to modern user interfaces.

User interface designers love cloud applications! It has never been so easy for us to develop beautiful, intuitive and highly interactive user interfaces that are not dependent on a specific operating system or end device.

As a reminder: In the past, applications on Windows systems always looked slightly different from those on Apple PCs and different again from those on Unix computers, simply because these operating systems each brought their own unique set of interaction elements with different colours and shapes, and also not always with the same possibilities.

UAnd transferring user interfaces to several classes of devices – laptops, tablets, smartphones, XXL displays – with completely different screen resolutions was also hardly imaginable, at least not routinely. It was simply far too much work. Horrible!

Cloud applications change this because they use HTML, the page description language of the World Wide Web, for screen output and interaction. And web browsers that can display HTML content are available for almost every end device these days. They are often pre-installed as part of the operating system and ready for immediate use.

HTML as the lingua franca of user interfaces

Background: With cloud-based software, you are usually dealing with client/server solutions. While the backend – the server – runs in a remote data centre, the frontend – the client – runs on the user’s end device.

And just as software containers make running the backend independent of a specific hardware or server configuration, you would also like this to be the case for the frontend. Simply so that the use of a cloud-based solution on the user side is not tied to a specific end device or operating system.

Many cloud solutions therefore have a web server upstream of the actual application logic. When the user enters the web address of their cloud solution as a URL (http://...) in the web browser, the call reaches this web server and is forwarded from there to the cloud solution.

All output from the cloud solution is formulated in HTML and returns to the user’s web browser via the web server. They appear there on the screen as the user interface of the application. No additional client software is required as long as a web browser is available.

Attractive and efficient thanks to HTML and CSS

Thanks in part to the continuous development of the HTML standard up to its currently valid version 5, all the elements and functions necessary for creating attractive and intuitive user interfaces are now available in HTML. Cloud-based solutions used by millions, such as the Facebook client or Google Office, make this clear.

And while HTML defines the structure of a screen page and its contents, cascading style sheets (CSS) determine the appearance of these elements – their size, colour, position and much more. Cascading style sheets can be easily switched between different screen sizes, which makes it much easier to dynamically adapt user interfaces to the form factor of the respective end device.

And CSS allow us as user interface designers to separate our work even better from the application developers – the software that generates the HTML code – to work hand in hand with them.

Internet pages that feel like applications

HTML elements in web pages are initially static. They remain as they are. JavaScript therefore comes into play as the programming language for the display of interactive elements in a web browser.

The corresponding JavaScript routines are delivered together with the HTML page content. No software needs to be installed on the user’s end device for this, either. In response to the user’s input, these routines modify the HTML content and, if necessary, the cascading style sheets at runtime, which directly affects the screen display by the web browser.

And JavaScript is also the first choice for preparing the data from a cloud solution in the backend as HTML content. Control elements, lists and generally content from database queries are thus converted for display in HTML.

Various standard libraries have become established for this purpose. They are developed by major market players and made available to the community as open-source solutions, such as React by Facebook or Angular by Google.

The interplay of HTML, CSS and JavaScript thus creates solutions that don’t feel like static web pages, but rather like fully modern, interactive applications.