Markku Laine
Antti Oulasvirta
Skip Abstract Section
Skip Supplemental Material SectionAbstract
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.
Supplemental Material
Available for Download
zip
v5eics213aux.zip (213.1 MB)
This package contains auxiliary material for the paper "Responsive and Personalized Web Layouts with Integer Programming" by Laine et al. (2021).
- Shaun Anderson. 2020. What are the Best Screen Sizes for Responsive Web Design? https://www.hobo-web.co.uk/best-screen-size/Google Scholar
- Federico Bellucci, Giuseppe Ghiani, Fabio Paternò, and Claudio Porta. 2012. Automatic Reverse Engineering of Interactive Dynamic Web Applications to Support Adaptation across Platforms. In Proceedings of the 2012 ACM International Conference on Intelligent User Interfaces (Lisbon, Portugal) (IUI '12). Association for Computing Machinery, New York, NY, USA, 217--226. https://doi.org/10.1145/2166966.2167004 Google ScholarDigital Library
- Gilbert Louis Bernstein and Scott Klemmer. 2014. Towards Responsive Retargeting of Existing Websites. In Proceedings of the Adjunct Publication of the 27th Annual ACM Symposium on User Interface Software and Technology (Honolulu, HI, USA) (UIST '14 Adjunct). Association for Computing Machinery, New York, NY, USA, 119--120. https://doi.org/10.1145/2658779.2658805 Google ScholarDigital Library
- Robert Bringhurst. 2004. The elements of typographic style .Hartley & Marks, Vancouver, Canada.Google Scholar
- Peter Brusilovsky. 2003. From Adaptive Hypermedia to the Adaptive Web. In Mensch & Computer 2003: Interaktion in Bewegung, Gerd Szwillus and Jürgen Ziegler (Eds.). ViewegGoogle Scholar
- Teubner Verlag, Wiesbaden, Germany, 21--24. https://doi.org/10.1007/978--3--322--80058--9_3Google Scholar
- Peter Brusilovsky, Alfred Kobsa, and Wolfgang Nejdl. 2007. The adaptive web: Methods and strategies of web personalization. Vol. 4321. Springer Science & Business Media, Berlin, Germany. https://doi.org/10.1007/978--3--540--72079--9 Google ScholarDigital Library
- Andrea Bunt, Giuseppe Carenini, and Cristina Conati. 2007. Adaptive Content Presentation for the Web. In The adaptive web: Methods and strategies of web personalization, Peter Brusilovsky, Alfred Kobsa, and Wolfgang Nejdl (Eds.). Springer, Berlin, Germany, 409--432. https://doi.org/10.1007/978--3--540--72079--9_13 Google ScholarDigital Library
- Gaëlle Calvary, Joëlle Coutaz, David Thevenin, Quentin Limbourg, Laurent Bouillon, and Jean Vanderdonckt. 2003. A Unifying Reference Framework for Multi-Target User Interfaces . Interacting with Computers , Vol. 15, 3 (2003), 289--308. https://doi.org/10.1016/S0953--5438(03)00010--9Google ScholarCross Ref
- Luca Chittaro. 2016. Tailoring Web Pages for Persuasion on Prevention Topics: Message Framing, Color Priming, and Gender. In Persuasive technology , , Alexander Meschtscherjakov, Boris De Ruyter, Verena Fuchsberger, Martin Murer, and Manfred Tscheligi (Eds.). Springer International, Cham, Switzerland, 3--14. https://doi.org/10.1007/978--3--319--31510--2_1 Google ScholarDigital Library
- Cisco. 2019. Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2017--2022. https://s3.amazonaws.com/media.mediapost.com/uploads/CiscoForecast.pdfGoogle Scholar
- Niraj Ramesh Dayama, Kashyap Todi, Taru Saarelainen, and Antti Oulasvirta. 2020. GRIDS: Interactive Layout Design with Integer Programming. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI '20). Association for Computing Machinery, New York, NY, USA, 1--13. https://doi.org/10.1145/3313831.3376553 Google ScholarDigital Library
- Paul De Bra. 2017. Challenges in User Modeling and Personalization. IEEE Intelligent Systems , Vol. 32, 5 (2017), 76--80. https://doi.org/10.1109/MIS.2017.3711638Google ScholarCross Ref
- Biplab Deka, Zifeng Huang, Chad Franzen, Joshua Hibschman, Daniel Afergan, Yang Li, Jeffrey Nichols, and Ranjitha Kumar. 2017. Rico: A Mobile App Dataset for Building Data-Driven Design Applications. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology (Québec City, QC, Canada) (UIST '17). Association for Computing Machinery, New York, NY, USA, 845--854. https://doi.org/10.1145/3126594.3126651 Google ScholarDigital Library
- Krzysztof Gajos and Daniel S. Weld. 2004. SUPPLE: Automatically Generating User Interfaces. In Proceedings of the 9th International Conference on Intelligent User Interfaces (Funchal, Madeira, Portugal) (IUI '04). Association for Computing Machinery, New York, NY, USA, 93--100. https://doi.org/10.1145/964442.964461 Google ScholarDigital Library
- Krzysztof Gajos and Daniel S. Weld. 2005. Preference Elicitation for Interface Optimization. In Proceedings of the 18th Annual ACM Symposium on User Interface Software and Technology (Seattle, WA, USA) (UIST '05). Association for Computing Machinery, New York, NY, USA, 173--182. https://doi.org/10.1145/1095034.1095063 Google ScholarDigital Library
- Ranjitha Kumar, Jerry O. Talton, Salman Ahmad, and Scott R. Klemmer. 2011. Bricolage: Example-Based Retargeting for Web Design. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Vancouver, BC, Canada) (CHI '11). Association for Computing Machinery, New York, NY, USA, 2197--2206. https://doi.org/10.1145/1978942.1979262 Google ScholarDigital Library
- Markku Laine, Ai Nakajima, Niraj Dayama, and Antti Oulasvirta. 2020. Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts. In Web engineering , , Maria Bielikova, Tommi Mikkonen, and Cesare Pautasso (Eds.). Springer International, Cham, Switzerland, 19--26. https://doi.org/10.1007/978--3-030--50578--3_2Google Scholar
- Zhen Liu, Anand Ranganathan, and Anton Riabov. 2007. Modeling Web Services Using Semantic Graph Transformations to aid Automatic Composition. In IEEE International Conference on Web Services (Salt Lake City, UT, USA) (ICWS '07). IEEE, 78--85. https://doi.org/10.1109/ICWS.2007.129Google Scholar
- Christof Lutteroth, Robert Strandh, and Gerald Weber. 2008. Domain Specific High-Level Constraints for User Interface Layout. Constraints , Vol. 13, 3 (2008), 307--342. https://doi.org/10.1007/s10601-008--9043--2 Google ScholarDigital Library
- Ethan Marcotte. 2010. Responsive Web Design. https://alistapart.com/article/responsive-web-design/Google Scholar
- Jennifer Mazzei. 2012. Responsive Web Design. https://www.businessnhmagazine.com/article/responsive-web-designGoogle Scholar
- Aliaksei Miniukovich, Michele Scaltritti, Simone Sulpizio, and Antonella De Angeli. 2019. Guideline-Based Evaluation of Web Readability. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (Glasgow, Scotland, UK) (CHI '19). Association for Computing Machinery, New York, NY, USA, 1--12. https://doi.org/10.1145/3290605.3300738 Google ScholarDigital Library
- Bamshad Mobasher, Robert Cooley, and Jaideep Srivastava. 2000. Automatic Personalization Based on Web Usage Mining. Commun. ACM , Vol. 43, 8 (2000), 142--151. https://doi.org/10.1145/345124.345169 Google ScholarDigital Library
- Morten Moshagen and Meinald T. Thielsch. 2010. Facets of Visual Aesthetics. International Journal of Human-Computer Studies , Vol. 68, 10 (2010), 689--709. https://doi.org/10.1016/j.ijhcs.2010.05.006 Google ScholarDigital Library
- Michael Nebeling, Fabrice Matulic, Lucas Streit, and Moira C. Norrie. 2011. Adaptive Layout Template for Effective Web Content Presentation in Large-Screen Contexts. In Proceedings of the 11th ACM Symposium on Document Engineering (Mountain View, CA, USA) (DocEng '11). Association for Computing Machinery, New York, NY, USA, 219--228. https://doi.org/10.1145/2034691.2034737 Google ScholarDigital Library
- Michael Nebeling and Moira C. Norrie. 2013. Responsive Design and Development: Methods, Technologies and Current Issues. In Web engineering, Florian Daniel, Peter Dolog, and Qing Li (Eds.). Springer, Berlin, Germany, 510--513. https://doi.org/10.1007/978--3--642--39200--9_47 Google ScholarDigital Library
- Antti Oulasvirta. 2019. It's Time to Rediscover HCI Models. Interactions , Vol. 26, 4 (2019), 52--56. https://doi.org/10.1145/3330340 Google ScholarDigital Library
- Antti Oulasvirta, Niraj Ramesh Dayama, Morteza Shiripour, Maximilian John, and Andreas Karrenbauer. 2020. Combinatorial Optimization of Graphical User Interface Designs. Proc. IEEE , Vol. 108, 3 (2020), 434--464. https://doi.org/10.1109/JPROC.2020.2969687Google ScholarCross Ref
- Stefan Palan and Christian Schitter. 2018. Prolific.ac -- A Subject Pool for Online Experiments. Journal of Behavioral and Experimental Finance , Vol. 17 (2018), 22--27. https://doi.org/10.1016/j.jbef.2017.12.004Google ScholarCross Ref
- Eyal Peer, Laura Brandimarte, Sonam Samat, and Alessandro Acquisti. 2017. Beyond the Turk: Alternative Platforms for Crowdsourcing Behavioral Research. Journal of Experimental Social Psychology , Vol. 70 (2017), 153--163. https://doi.org/10.1016/j.jesp.2017.01.006Google ScholarCross Ref
- Mike Perkowitz and Oren Etzioni. 1998. Adaptive Web Sites: Automatically Synthesizing Web Pages. In Proceedings of the Fifteenth National/Tenth Conference on Artificial Intelligence/Innovative Applications of Artificial Intelligence (Madison, WI, USA) (AAAI '98 / IAAI '98). American Association for Artificial Intelligence, USA, 727--732. Google ScholarDigital Library
- Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. 2005. Feature Congestion: A Measure of Display Clutter. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Portland, OR, USA) (CHI '05). Association for Computing Machinery, New York, NY, USA, 761--770. https://doi.org/10.1145/1054972.1055078 Google ScholarDigital Library
- Nishant Sinha and Rezwana Karim. 2015. Responsive Designs in a Snap. In Proceedings of the 2015 10th Joint Meeting on Foundations of Software Engineering (Bergamo, Italy) (ESEC/FSE '15). Association for Computing Machinery, New York, NY, USA, 544--554. https://doi.org/10.1145/2786805.2786808 Google ScholarDigital Library
- StatCounter. 2021. StatCounter Screen Resolution Stats Worldwide. https://gs.statcounter.com/screen-resolution-statsGoogle Scholar
- Kashyap Todi, Gilles Bailly, Luis A. Leiva, and Antti Oulasvirta. 2021. Adapting User Interfaces with Model-Based Reinforcement Learning. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI '21). Association for Computing Machinery, New York, NY, USA. https://doi.org/10.1145/3411764.3445497 Google ScholarDigital Library
- Kashyap Todi, Jussi Jokinen, Kris Luyten, and Antti Oulasvirta. 2019. Individualising Graphical Layouts with Predictive Visual Search Models. ACM Transactions on Interactive Intelligent Systems , Vol. 10, 1, Article 9 (2019), bibinfonumpages24 pages. https://doi.org/10.1145/3241381 Google ScholarDigital Library
- Alexandre N. Tuch, Sandra P. Roth, Kasper Hornbæk, Klaus Opwis, and Javier A. Bargas-Avila. 2012. Is Beautiful Really Usable? Toward Understanding the Relation between Usability, Aesthetics, and Affect in HCI. Computers in Human Behavior , Vol. 28, 5 (2012), 1596--1607. https://doi.org/10.1016/j.chb.2012.03.024 Google ScholarDigital Library
- Jean Vanderdonckt. 2008. Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges. In Proceedings of the 5th Annual Romanian Conference on Human-Computer Interaction (Iaksi, Romania) (ROCHI '08, Vol. 8). Matrix ROM, Bucharest, Romania, 32--41.Google Scholar
- Rares Vernica and Niranjan Damera Venkata. 2015. AERO: An Extensible Framework for Adaptive Web Layout Synthesis. In Proceedings of the 2015 ACM Symposium on Document Engineering (Lausanne, Switzerland) (DocEng '15). Association for Computing Machinery, New York, NY, USA, 187--190. https://doi.org/10.1145/2682571.2797084 Google ScholarDigital Library
- W3C. 2016. CSSOM View Module W3C Working Draft, 17 March 2016 . https://www.w3.org/TR/cssom-view-1/.Google Scholar
- W3C. 2018a. CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 19 November 2018 . https://www.w3.org/TR/css-flexbox-1/.Google Scholar
- W3C. 2018b. Web Content Accessibility Guides (WCAG) 2.1 W3C Recommendation 05 June 2018 . https://www.w3.org/TR/WCAG21/.Google Scholar
- W3C. 2020. CSS Grid Layout Module Level 1 W3C Candidate Recommendation Draft, 18 December 2020 . https://www.w3.org/TR/css-grid-1/.Google Scholar
- Clemens Zeidler, Christof Lutteroth, and Gerald Weber. 2012. Constraint Solving for Beautiful User Interfaces: How Solving Strategies Support Layout Aesthetics. In Proceedings of the 13th International Conference of the NZ Chapter of the ACM's Special Interest Group on Human-Computer Interaction (Dunedin, New Zealand) (CHINZ '12). Association for Computing Machinery, New York, NY, USA, 72--79. https://doi.org/10.1145/2379256.2379268 Google ScholarDigital Library
- Clemens Zeidler, Gerald Weber, Wolfgang Stuerzlinger, and Christof Lutteroth. 2017. Automatic Generation of User Interface Layouts for Alternative Screen Orientations. In Human-Computer Interaction -- INTERACT 2017 , , Regina Bernhaupt, Girish Dalvi, Anirudha Joshi, Devanuj K. Balkrishan, Jacki O'Neill, and Marco Winckler (Eds.). Springer International, Cham, Switzerland, 13--35. https://doi.org/10.1007/978--3--319--67744--6_2Google Scholar
- Alexander Zlatkov. 2018. How JavaScript Works: Tracking Changes in the DOM Using MutationObserver. https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401Google Scholar
Index Terms
- Responsive and Personalized Web Layouts with Integer Programming
Recommendations
Visual Design and Code Generation of User Interface Based on Responsive Web Design Approach
ICSEB '19: Proceedings of the 2019 3rd International Conference on Software and e-BusinessAt present, web users may access web sites from various computing devices and the ability to access the web sites on all screen sizes is very important. Responsive web design is an approach that makes web contents render well on desktop, notebook, ...
Web mining for web personalization
Web personalization is the process of customizing a Web site to the needs of specific users, taking advantage of the knowledge acquired from the analysis of the user's navigational behavior (usage data) in correlation with other information collected in ...
Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts
Web EngineeringAbstractTo personalize a web page, case-specific rules or templates must be specified that define the visuospatial layout of elements as well as device-specific adaptation rules for an individual. This approach scales poorly. We present LaaS, a service ...
Comments