Responsive Design for existing systems?

What demands do you place on the usability of a web application or web site?

Responsive Design - InhalteAs users of web applications and sites, we increasingly expect that they function in different contexts of use: Both the classic use with mouse & keyboard, as well as on a tablet in the customer conversation and on the train with your smartphone with unstable connectivity.

On the technical side, these claims create new and significantly more complex demands on the functionality and design of the user interface in order to cover the whole range of the above-mentioned usage scenarios.

Already in the year 2010, the Web expert, Ethan Marcotte, presented his approach to the solution, creating a central concept of modern Web development: Responsive Web Design. This approach makes use of various techniques that make it possible that the surface can respond to different frame parameters (e.g. resolution, portrait or landscape format ...) of the terminal. With which an optimized user interface can be provided for different device classes.

Proven system - modern User Interface

Responsive DesignIn the case of new development, a responsive approach from the outset can certainly be considered in the concept of the surface . But what to do when this requirement applies to an existing system?

Here, considerable added value for the users in the mobile usage scenario can be achieved with moderate effort, through the use of frameworks like Twitter Bootstrap or ZURB Foundation. As such, these frameworks provide best practice guidelines for the design of controls that adapt to the peculiarities of the different terminals.

In no way, however, is there a need to abandon the individual appearance and branding: By using modern tools, such as the CSS preprocessor SASS, the appearance while maintaining the best practices can be customized efficiently and to a high degree. In the course of which a facelift for the - usually somewhat shopworn - appearance of the application, would do no harm.

Another advantage of this procedure: Since the adaptation in this case is limited purely to the presentation (HTML / CSS) ,the underlying proven system can remain unchanged. In this manner, a rapid implementation is possible with moderate effort.

Pioneering separation: decoupling the surface

However, despite the enormous potential of this approach it is by no means a panacea. The result can always only represent a compromise for enhanced mobile use, for example limited by the used frontend technologies and often "grown" structures.

Although a responsive redesign improves operability via touch input, it cannot, for example, solve the problem of unstable connectivity in the train. Therefore, if the user interfaceis to develop more in the direction of native apps, it is not enough to adjust only the presentation. Modern web technology provides here corresponding solutions, but they require more extensive measures than previously described.

A pioneering approach may be the complete decoupling of the surface from the server-sided existing system. The abstraction creates in this scenario, a REST API that offers only pure data for the web application. Through the generic interface, the way is clear for an ultramodern comfortable user interface. JavaScript frameworks like angularJS and components and frameworks like polymer can thus deploy their entire assets. The advantage of this approach is obvious: The REST interface can also be intalled in addition to the existing surface. Thus, the conversion can be carried out gradually.

If the backend system is clearly delineated by the interface from the client, the development of the surface is also decoupled from the work on the backend. Development strands can be parallelized in an agile manner. Due to this separation, "the best of both worlds" may also be combined: A stable and proven backend system and at the same time a modern and user-friendly user interface.

Also in the maintenance and further development, the procedure has important advantages. The technology can be exchanged on either side of the interface, without touching the other part. You want to create an iOS app ? The integration effort on the server side - zero! Certain data from the system is to be fed into a different system? The infrastructure with the API is at the ready.

Innovation for a user-friendly user interface - especially on mobile devices - and continuity with proven systems are not mutually exclusive to each other. We optimize your existing solution for you - with the best of both worlds!

Contact: Jens Binfet; Turn on Javascript!