Responsive and Personalized Web Layouts with Integer Programming

Proceedings of the ACM on Human-Computer Interaction, EICS 2021.
User Interfaces group, Aalto University University of Helsinki
C-RWD teaser
Overview of the C-RWD approach: an existing web design is automatically retargeted to a fully responsive web page personalized for the user and device.
How to generate responsive web pages personalized for the user and browsing device?
  • Responsive web design currently requires a considerable amount of time, money, and effort, and lacks support for personalization
  • We present a novel method for computational generation of responsive and personalized web designs
  • Results from our user studies show that our method can automatically create high-quality responsive web layouts for a variety of real-world websites
C-RWD examples
Examples of generated web designs
Abstract

Over the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: designers and developers must manually design the web layouts for multiple screen sizes and implement associated adaptation rules, and its “one responsive design fits all” approach lacks support for personalization. This paper presents a novel approach for automated generation of responsive and personalized web layouts. Given an existing web page design and preferences related to design objectives, our integer programming -based optimizer generates a consistent set of web designs. Where relevant data is available, these can be further automatically personalized for the user and browsing device. The paper includes presentation of techniques for runtime adaptation of the designs generated into a fully responsive grid layout for web browsing. Results from our ratings-based online studies with end users (N = 86) and designers (N = 64) show that the proposed approach can automatically create high-quality responsive web layouts for a variety of real-world websites.

Materials
Publication
C-RWD paper

PDF, 32 MB
Markku Laine, Yu Zhang, Simo Santala, Jussi P. P. Jokinen, and Antti Oulasvirta. 2021. Responsive and Personalized Web Layouts with Integer Programming. Proc. ACM Hum.-Comput. Interact. 5, EICS, Article 213 (June 2021), 23 pages. https://doi.org/10.1145/3461735 

                            
@article{laine2021responsive,
    author = {Laine, Markku and Zhang, Yu and Santala, Simo and Jokinen, Jussi P. P. and Oulasvirta, Antti},
    title = {Responsive and Personalized Web Layouts with Integer Programming},
    year = {2021},
    issue_date = {June 2021},
    publisher = {Association for Computing Machinery},
    address = {New York, NY, USA},
    volume = {5},
    number = {EICS},
    url = {https://doi.org/10.1145/3461735},
    doi = {10.1145/3461735},
    journal = {Proc. ACM Hum.-Comput. Interact.},
    month = may,
    articleno = {213},
    numpages = {23},
    keywords = {responsive web design, integer programming, web personalization, retargeting, computational design}
}
In The Media
Twitter thread
Twitter thread
Contact

For questions and further information, please contact:

Markku Laine

Email:
markku.laine (at) aalto.fi

Acknowledgements: This work was funded by Technology Industries of Finland (Grant No. 700047, “Self-Optimizing Web Pages”) and the Academy of Finland (Grant No. 328813, “Human Automata”).