Multi-Device Complementary View Adaptation with Liquid Media Queries

Authors

  • Andrea Gallidabino Software Institute, Faculty of Informatics, Universit`a della Svizzera italiana, Lugano, Switzerland
  • Cesare Pautasso Software Institute, Faculty of Informatics, Universit`a della Svizzera italiana, Lugano, Switzerland

DOI:

https://doi.org/10.13052/jwe1540-9589.1882

Keywords:

Liquid Software, Media Queries, Multi-device adaptation, responsive user interface, complementary view adaptation

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.

Downloads

Download data is not yet available.

Author Biographies

Andrea Gallidabino, Software Institute, Faculty of Informatics, Universit`a della Svizzera italiana, Lugano, Switzerland

Andrea Gallidabino. He is part of the Architecture, Design and Web Information Systems Engineering Group under the supervision of his advisor Prof. Cesare Pautasso. The group is part of the Software Institute at Univerist`a della Svizzera Italiana. As a researcher in the group he focuses his work mainly on liquid software and real-time communicationWeb technologies. Moreover he helps the professor with lectures, interacting with students on a daily basis. His research interests are: Web technologies, real-time applications, liquid software, and multi-device interactions. You can find more information on http://www.inf.usi.ch/phd/gallidabino/ and follow him @AGallidabino.

Cesare Pautasso, Software Institute, Faculty of Informatics, Universit`a della Svizzera italiana, Lugano, Switzerland

Cesare Pautasso. He is a Full Professor at the Software Institute of the Faculty of Informatics, USI Lugano, Switzerland, and formerly researcher at the IBM Zurich Research Lab (2007) and senior researcher at ETH Zurich (2004–2007) where he completed his Ph.D. in 2004. At USI he leads the Architecture, Design and Web Information Systems Engineering research group. He is currently supervising the research of a group of Ph.D. students building experimental systems to explore the intersection of cloud computing, software architecture, Web engineering, and business process management, with ongoing projects exploring workflow benchmarking, RESTful conversations, and liquid software. He is the coauthor of the book SOA with REST (2012) and currently writing a book titled Just Send an Email: Anti- Patterns for Email-Centric Organizations (published on LeanPub). He is coeditor of the IEEE Software Insight department and program chair of the 20th International Conference on Web Engineering (ICWE2020). You can find more information on http://www.pautasso.info and follow him @pautasso@scholar.social.

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)

Downloads

Published

2020-01-23

How to Cite

Gallidabino, A., & Pautasso, C. (2020). Multi-Device Complementary View Adaptation with Liquid Media Queries. Journal of Web Engineering, 18(8), 761–800. https://doi.org/10.13052/jwe1540-9589.1882

Issue

Section

ICWE2019