This document proposes an approach called C-RWD to automate the generation of responsive and personalized web designs using computational methods like integer programming. It describes challenges in responsive web design like designing for multiple screen sizes. C-RWD collects user interaction data and optimization objectives to generate a consistent set of personalized web layouts for different breakpoints that are fully responsive. Two user studies found C-RWD designs were rated higher in quality than original or Masonry-based designs by both end users and designers.
Responsive and Personalized Web Layouts with Integer Programming
1. Responsive and Personalized Web
Layouts with Integer Programming
Markku Laine, Yu Zhang, Simo Santala,
Jussi P.P. Jokinen, Antti Oulasvirta
June 9, 2021 EICS 2021
2. 2
“Responsive web design (RWD) is an approach to web design that
makes web pages render well on a variety of devices and window
or screen sizes from minimum to maximum display size.”
— Wikipedia
What is responsive web design?
3. 3
Challenges in responsive web design
Design for multiple screen sizes
Implement adaptation rules
Decide optimal breakpoints
Lack of personalization
4. ?
How to automate the
generation of designer-like
responsive and personalized
web designs?
?
?
?
?
4
8. 8
Layout as a Service (LaaS)
Our extensions
Layout Parser
Responsive shape sets
Event Logger
New events and user data
Design Task Generator
Responsive design tasks
Layout Optimizer
Web designs for given breakpoints
Layout Adapter
Fully responsive grid layout
Laine et al. [ICWE 2020]
Overview
A service platform that
enables objective-level
personalization of web layouts
10. 10
Layout optimization
General benefits of MILP
Applicable to a wide range of problems
Controllable design outcomes
Works without any prior data
Offers proofs for solution quality
Good computation performance
Mixed-Integer
Linear Programming
model
Our optimization objectives
Layout similarity
Element order
Consistency of layouts
Layout aesthetics
Non-overlapping
Non-overflowing
Perfectly packed
Grid layout (Flexbox)
Layout usability
Visual saliency
Selection time
← controllable
← controllable
12. Original
web page
Retargeted
web page
12
Web page retargeting
1803
px
1366 px 12 columns
4
rows
Retargeting process
Layout conversion
Positional layout → Grid layout
Dynamic media queries
Layout adaptation
In real-time
Navbar generation
Fully responsive
Similar style
Image cropping
Smart cropping
Face detection
13. 13
Computational
responsive web design
C-RWD is a novel approach to automated generation,
optimization, and personalization of responsive web
designs using computational methods.
25. 24
Contributions
• A novel approach for automated generation of responsive and personalized web
layouts with integer programming
• A mixed-integer linear programming model for generating a consistent set of
personalized web designs for given breakpoints
• Web engineering techniques for collection optimization constraints and adapting
the resulting designs at runtime to form a fully responsive grid layout
• Results of two ratings-based online studies, with end users (N = 86) and
designers (N = 64)