Multi-device Adaptation with Liquid Media Queries

TitleMulti-device Adaptation with Liquid Media Queries
Publication TypeConference Paper
Year of Publication2019
AuthorsGallidabino, A., and C. Pautasso
Conference Name19th International Conference on Web Engineering (ICWE 2019)
Pages474-489
MonthJune
PublisherSpringer
Conference LocationDaejeon, Korea
Keywordscomplementary view adaptation, liquid software, liquid web application, liquid.js, media queries, multi-device adaptation, responsive user interface
Abstract

The design of responsive Web applications is traditionally based on the assumption that they run on a single client at a time. Thanks to CSS3 media queries, developers can declaratively specify how the Web application UI adapts to the capabilities of specific devices. As users own more and more devices and they attempt to use them to run Web applications in parallel, we propose to extend CSS media queries so that they can be used to adapt the UI of liquid Web applications while they are dynamically deployed across multiple devices. In this paper we present our extension of CSS media queries with liquid-related types and features, allowing to detect the number of devices connected, the number of users running the application, or the role played by each device. The liquid media query types and features defined in this paper are designed and suitable for liquid component-based Web architectures, and they enable developers to control the deployment of individual Web components across multiple browsers. Furthermore we show the design of liquid media queries in the Liquid.js for Polymer framework and propose different adaptation algorithms. Finally we showcase the expressiveness of the liquid media queries to support real-world examples and evaluate the algorithmic complexity of our approach.

DOI10.1007/978-3-030-19274-7_33
Citation Key2019:icwe:liquid
Refereed DesignationRefereed