Multi-device Adaptation with Liquid Media Queries

  • Andrea GallidabinoEmail author
  • Cesare PautassoEmail author
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 11496)


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.


Liquid software Media queries Multi-device adaptation Responsive user interface Complementary view adaptation 



This work is supported by the SNF with the “Fundamentals of Parallel Programming for PaaS Clouds” project (Nr. 153560).


  1. 1.
    Elmqvist, N.: Distributed user interfaces: state of the art. In: Gallud, J., Tesoriero, R., Penichet, V. (eds.) Distributed User Interfaces. HCIS, pp. 1–12. Springer, London (2011). Scholar
  2. 2.
    Frain, B.: Responsive Web Design with HTML5 and CSS3. Packt Publishing (2012)Google Scholar
  3. 3.
    Gallidabino, A., Pautasso, C.: Maturity model for liquid web architectures. In: Cabot, J., De Virgilio, R., Torlone, R. (eds.) ICWE 2017. LNCS, vol. 10360, pp. 206–224. Springer, Cham (2017). Scholar
  4. 4.
    Gallidabino, A., Pautasso, C.: The liquid user experience API. In: Companion of the The Web Conference 2018, Developers Track (TheWebConf2018), pp. 767–774 (2018)Google Scholar
  5. 5.
    Gallidabino, A., Pautasso, C., Mikkonen, T., Systa, K., Voutilainen, J.P., Taivalsaari, A.: Architecting liquid software. J. Web Eng. 16(5&6), 433–470 (2017)Google Scholar
  6. 6.
  7. 7.
    Husmann, M., Spiegel, M., Murolo, A., Norrie, M.C.: UI testing cross-device applications. In: Proceedings of the 2016 ACM on Interactive Surfaces and Spaces (ISS2016), pp. 179–188. ACM (2016)Google Scholar
  8. 8.
    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)Google Scholar
  9. 9.
    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)Google Scholar
  10. 10.
    Levin, M.: Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. O’Reilly, Sebastopol (2014)Google Scholar
  11. 11.
    Luyten, K., Coninx, K.: Distributed user interface elements to support smart interaction spaces. In: Seventh IEEE International Symposium on Multimedia. IEEE (2005)Google Scholar
  12. 12.
    Marcotte, E.: Responsive Web Design. Editions Eyrolles (2011)Google Scholar
  13. 13.
    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)Google Scholar
  14. 14.
    Mikkonen, T., Systä, K., Pautasso, C.: Towards liquid web applications. In: Cimiano, P., Frasincar, F., Houben, G.-J., Schwabe, D. (eds.) ICWE 2015. LNCS, vol. 9114, pp. 134–143. Springer, Cham (2015). Scholar
  15. 15.
    Mori, G., Paterno, F., Santoro, C.: Design and development of multidevice user interfaces through multiple logical descriptions. IEEE Trans. Softw. Eng. 30(8), 507–520 (2004)CrossRefGoogle Scholar
  16. 16.
    Müller, J., Alt, F., Michelis, D., Schmidt, A.: Requirements and design space for interactive public displays. In: Proceedings of the 18th ACM International Conference on Multimedia, pp. 1285–1294. ACM (2010)Google Scholar
  17. 17.
    Nebeling, M., Mintsi, T., Husmann, M., Norrie, M.: Interactive development of cross-device user interfaces. In: Proceedings of the 32nd Annual ACM Conference on Human Factors in Computing Systems, pp. 2793–2802. ACM (2014)Google Scholar
  18. 18.
    Nicolaescu, P., Jahns, K., Derntl, M., Klamma, R.: Yjs: a framework for near real-time P2P shared editing on arbitrary data types. In: Cimiano, P., Frasincar, F., Houben, G.-J., Schwabe, D. (eds.) ICWE 2015. LNCS, vol. 9114, pp. 675–678. Springer, Cham (2015). Scholar
  19. 19.
    Paternò, 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)Google Scholar
  20. 20.
    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 (COMPSAC 2014), pp. 338–343 (2014)Google Scholar
  21. 21.
    Zorrilla, M., Borch, N., Daoust, F., Erk, A., Flórez, J., Lafuente, A.: A web-based distributed architecture for multi-device adaptation in media applications. Pers. Ubiquit. Comput. 19(5–6), 803–820 (2015)CrossRefGoogle Scholar

Copyright information

© Springer Nature Switzerland AG 2019

Authors and Affiliations

  1. 1.Software Institute, Faculty of InformaticsUniversità della Svizzera italiana (USI)LuganoSwitzerland

Personalised recommendations