  With the recent explosive growth of mobile devices such as smartphones or
tablets, guaranteeing consistent web appearance across all environments has
become a significant problem. This happens simply because it is hard to keep
track of the web appearance on different sizes and types of devices that render
the web pages. Therefore, fixing the inconsistent appearance of web pages can
be difficult, and the cost incurred can be huge, e.g., poor user experience and
financial loss due to it. Recently, automated web repair techniques have been
proposed to automatically resolve inconsistent web page appearance, focusing on
improving usability. However, generated patches tend to disrupt the webpage's
layout, rendering the repaired webpage aesthetically unpleasing, e.g.,
distorted images or misalignment of components.
  In this paper, we propose an automated repair approach for web pages based on
meta-heuristic algorithms that can assure both usability and aesthetics. The
key novelty that empowers our approach is a novel fitness function that allows
us to optimistically evolve buggy web pages to find the best solution that
optimizes both usability and aesthetics at the same time. Empirical evaluations
show that our approach is able to successfully resolve mobile-friendly problems
in 94% of the evaluation subjects, significantly outperforming state-of-the-art
baseline techniques in terms of both usability and aesthetics.
