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.

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

5. Proposed approach
5
C-RWD
(our system)
Existing
web design
Responsive and personalized
web design
User interactions
Optimization objectives
and constraints

6. 6
Breakpoint web designs
smaller larger
Screen size
Existing
web design

7. 7
Personalized web designs
less more
Personalization
Existing
web design
1
1
2

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

9. 9
Shape set creation
Simulated element width
infeasible non-ideal ideal
narrower wider
For each
key element

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

11. 11
Optimization process
1. Reorder
elements
2. Optimize
for aesthetics
3. Optimize
for usability
4. Optimize
for aesthetics and usability
New order:
Header
A2
A3
A1
A4
A5
Footer

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.

14. 14
Evaluation

15. 14
Study 1
Perceived quality
by end users
Study 2
Perceived quality
by designers
Evaluation

16. 15
Study design
• Experiment: online survey
• Participants: end users and designers
• Task: rate the quality of web designs
• Materials: four Bootstrap template based websites
• Screen sizes: mobile, tablet, laptop, desktop
• Layout-design methods: original, optimized (our approach), Masonry

17. 16
Materials

18. 17
Materials
Original Optimized
(our approach)
Masonry

19. 18
Study 1
with end users

20. 19
86 participants
Female
33
Male
53
Age 18–68 years (M = 27.7, SD = 10.4)

21. 20
Results
Mean
end user
ratings
M = -0.13
M = -0.13
M = -0.09
M = 0.81
M = 0.69
M = 0.69
M = 1.30
M = 1.19
M = 0.71
M = 1.38
M = 1.36
M = 0.59

22. 21
Study 2
with designers

23. 22
64 participants
Age 18–58 years (M = 26.2, SD = 8.2)
Female
10
Male
52 Other
2
Work experience 0–15 years (M = 2.4, SD = 2.8)

24. 23
Results
Mean
designer
ratings
M = 0.50
M = 0.41
M = 0.53
M = 1.06
M = 0.91
M = 0.89
M = 1.20
M = 1.18
M = 0.72
M = 1.31
M = 1.20
M = 0.43

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)

26. EICS 2021
25
markku.laine@aalto.fi
userinterfaces.aalto.fi/c-rwd/ @mplaine
Responsive and Personalized Web
Layouts with Integer Programming
Markku Laine, Yu Zhang, Simo Santala,
Jussi P.P. Jokinen, Antti Oulasvirta