@article {liquidjs:2020:jwe, title = {Multi-Device Complementary View Adaptation with Liquid Media Queries}, journal = {Journal of Web Engineering (JWE)}, volume = {18}, year = {2020}, month = { 761{\textendash}800 }, abstract = {Responsive Web applications assume that they run on a single device at a time. Developers use CSS3 media queries to declare how the Web application user interface adapts to specific capabilities (e.g., screen size or resolution) of individual devices. As users own and use multiple devices across which they attempt to run the same Web application at the same time, we propose to extend CSS media queries so that developers can also use them to dynamically adapt so-called liquid Web applications as they are seamlessly deployed across multiple devices. In this paper we present the concept of liquid media queries. They support features to detect the number of connected devices, the number of users running the application, or the role played by each device during the application execution. The liquid media query types and features defined in this paper are designed for component-based Web applications, and they enable developers to control the deployment and dynamic migration and cloning of individual Web components across multiple browsers. Furthermore we present the design of how liquid media queries are implemented within the Liquid.js for Polymer framework and the corresponding distributed adaptation algorithms. We discuss the implications of multi-device adaptation from the perspective of the developers and also the users of a liquid Web application. Finally we showcase the expressiveness of the liquid media queries to support real-world examples and evaluate the algorithmic complexity of our approach. }, keywords = {complementary view adaptation, liquid software, media queries, multi-device adaptation, responsive user interface}, doi = {10.13052/jwe1540-9589.1882}, url = {https://journals.riverpublishers.com/index.php/JWE/article/view/1099}, author = {Andrea Gallidabino and Cesare Pautasso} } @conference {2019:icwe:liquid, title = {Multi-device Adaptation with Liquid Media Queries}, booktitle = {19th International Conference on Web Engineering (ICWE 2019)}, year = {2019}, month = {June}, pages = {474-489}, publisher = {Springer}, organization = {Springer}, address = {Daejeon, Korea}, 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.}, keywords = {complementary view adaptation, liquid software, liquid web application, liquid.js, media queries, multi-device adaptation, responsive user interface}, doi = {10.1007/978-3-030-19274-7_33}, author = {Andrea Gallidabino and Cesare Pautasso} }