Multi-Device Complementary View Adaptation with Liquid Media Queries
DOI:
https://doi.org/10.13052/jwe1540-9589.1882Keywords:
Liquid Software, Media Queries, Multi-device adaptation, responsive user interface, complementary view adaptationAbstract
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.
Downloads
References
Anstead, E., Benford, S., Houghton, R. J.: Many-Screen Viewing: Evaluating
an Olympics Companion Application. In: Proc. of the ACM
International Conference on Interactive Experiences for TV and Online
Video. pp. 103–110. ACM (2014)
Atzori, L., Iera, A., Morabito, G.: The Internet of Things: A Survey.
Computer Networks 54(15), 2787–2805 (2010)
Brudy, F., Holz, C., R¨adle, R. Wu, C., Houben, S., Klokmose, C.,
Marquardt, N.: Cross-Device Taxonomy: Survey, Opportunities and
Challenges of Interactions Spanning Across Multiple Devices. In: Proceedings
of the 2019 CHI Conference on Human Factors in Computing
Systems. p. 562. ACM (2019)
Elmqvist, N.: Distributed User Interfaces: State of the Art. In: Distributed
User Interfaces, pp. 1–12. Springer (2011)
Frain, B.: Responsive Web Design with HTML5 and CSS3. Packt
Publishing (2012)
Gallidabino, A., Pautasso, C.: Maturity Model for Liquid Web Architectures.
In: Proc. of 17th International Conference onWeb Engineering
(ICWE2017). vol. 10360 LNCS, pp. 206–224. Springer, Rome, Italy
(June 2017)
Gallidabino, A., Pautasso, C.: The Liquid User Experience API. In:
Companion of the The Web Conference 2018, Developers Track
(TheWebConf2018). pp. 767–774 (2018)
Gallidabino, A., Pautasso, C.: Multi-Device Adaptation with Liquid
Media Queries. In: Proc. of the 19th International Conference on Web
Engineering (ICWE2019). pp. 474–489. Springer, Korea (June 2019)
Gallidabino, A., Pautasso, C.: The LiquidWebWorker API for Horizontal
Offloading of Stateless Computations. Journal of Web Engineering
(6), 405–448 (September 2018)
Gallidabino, A., Pautasso, C., Mikkonen, T., Systa, K., Voutilainen,
J.P., Taivalsaari, A.: Architecting Liquid Software. Journal of Web
Engineering 16(5&6), 433–470 (September 2017)
Global Connected Consumer Survey: The Connected Consumer. http:
//www.google.com.sg/publicdata/explore?ds=dg8d1eetcqsb1 (2017)
Husmann, M., Spiegel, M., Murolo, A., Norrie, M.C.: UI Testing Cross-
Device Applications. In: Proc. of the 2016 ACM on Interactive Surfaces
and Spaces (ISS2016). pp. 179–188. ACM (2016)
Jokela, T., Ojala, J., Olsson, T.: A Diary Study on Combining Multiple
Information Devices in Everyday Activities and Tasks. In: Proceedings
of the 33rd Annual ACM Conference on Human Factors in Computing
Systems (CHI2015). pp. 3903–3912. ACM (2015)
Kadlec, T.: Implementing Responsive Design: Building Sites for an
Anywhere, Everywhere Web. New Riders (2012)
Kawsar, F., Brush, A.: Home Computing Unplugged: Why, Where and
When People Use Different Connected Devices at Home. In: Proceedings
of the 2013 ACM international joint conference on Pervasive and
ubiquitous computing (UbiComp2013). pp. 627–636. ACM (2013)
Levin, M.: Designing Multi-device Experiences: An Ecosystem
Approach to User Experiences Across Devices. O’Reilly (2014)
Luyten, K., Coninx, K.: Distributed User Interface Elements to Support
Smart Interaction Spaces. In: Multimedia, Seventh IEEE International
Symposium on. IEEE (2005)
Marcotte, E.: Responsive Web Design. Editions Eyrolles (2011)
Melchior, J., Grolaux, D., Vanderdonckt, J., Van Roy, P.: A Toolkit
for Peer-to-Peer Distributed User Interfaces: Concepts, Implementation,
and Applications. In: Proceedings of the 1st ACM SIGCHI symposium
on Engineering interactive computing systems. pp. 69–78. ACM (2009)
Mikkonen, T., Syst¨a, K., Pautasso, C.: Towards Liquid Web Applications.
In: Proc. of the 15th International Conference onWeb Engineering
(ICWE2015), pp. 134–143. Springer (2015)
Mori, G., Paterno, F., Santoro, C.: Design and Development of Multidevice
User Interfaces through Multiple Logical Descriptions. IEEE
Transactions on Software Engineering 30(8), 507–520 (2004)
M¨uller, J., Alt, F., Michelis, D., Schmidt, A.: Requirements and Design
Space for Interactive Public Displays. In: Proc. of the 18th ACM
international conference on Multimedia. pp. 1285–1294. ACM (2010)
Nebeling, M., Mintsi, T., Husmann, M., Norrie, M.: Interactive Development
of Cross-Device User Interfaces. In: Proc. of the 32nd annual ACM
conference on Human factors in computing systems. pp. 2793–2802.
ACM (2014)
Nicolaescu, P., Jahns, K., Derntl, M., Klamma, R.: Yjs: A Framework
for Near Real-Time P2P Shared Editing on Arbitrary Data Types.
In: Proc. of the 15th International Conference on Web Engineering
(ICWE2015). pp. 675–678. Springer (2015)
Patern`o, F., Santoro, C.: A Logical Framework for Multi-Device User
Interfaces. In: Proceedings of the 4th ACM SIGCHI symposium on
Engineering interactive computing systems. pp. 45–50. ACM (2012)
O’reilly, T.: What is Web 2.0. O’Reilly Media, Inc. (2009)
Oulasvirta, A., Sumari, L.: Mobile Kits and Laptop Trays: Managing
Multiple Devices in Mobile Information Work. In: Proceedings of the
SIGCHI conference on Human factors in computing systems. pp. 1127–
ACM (2007)
Taivalsaari, A., Mikkonen, T., Systa, K.: Liquid Software Manifesto:
The Era of Multiple Device Ownership and Its Implications for Software
Architecture. In: 38th Computer Software and Applications Conference
(COMPSAC2014). pp. 338–343 (2014)
Zorrilla, M., Borch, N., Daoust, F., Erk, A., Fl´orez, J., Lafuente, A.:
A Web-Based Distributed Architecture for Multi-Device Adaptation
in Media Applications. Personal and Ubiquitous Computing 19(5–6),
–820 (2015)