Multi-Device Complementary View Adaptation with Liquid Media Queries

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 our adaptation algorithms. We describe multiple adaptation policies and discuss the implications of the multi-device adaptation from the perspective of the developers and users of a 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.