Mobile viewports have become a necessity for most applications, as a significant and growing number of web users access the internet using mobile devices. Even applications that are primarily intended to be used on desktop devices benefit from a mobile viewport, as Google considers mobile performance first when evaluating indexing (SEO).
Longstanding applications may have accumulated complex UI designs throughout their existence and struggle to transform their existing design into a mobile UI while keeping full functionality and ease of use. But even complex UI designs can be broken down into a defined list of semantic components.
This presentation explains the process of breaking down a desktop UI design into its components and refactoring them responsively to fit a mobile screen. We begin by examining a screenshot from an existing application, then divide its UI into components, before refactoring them as mobile components, ensuring that all functionality is kept.
The application examined is a web application, which has been developed at TH-Koeln for the past five years. The application has been developed using the Angular framework, utilizing RxJS for reactive state management. While these concepts are presented in a technology-agnostic context, Angular-based code examples will be shown to demonstrate these concepts in practice.
After explaining both design decisions and technical implementations, the listener will acquire the knowledge so they can start implementing mobile viewports for existing desktop applications.