Automated Repair of Asymmetric Web Pages during Resolution

of Mobile Friendly Problems

Md. Aquib Azmain and Kishan Kumar Ganguly

Institute of Information Technology, University of Dhaka, Dhaka, Bangladesh

Keywords:

Mobile Friendly Problems, Symmetric Structure, Web Application.

Abstract:

In software development, software usability is an important aspect to ensure the end-user does not strain or

encounter problems with the use of a product or website’s user interface. Mobile friendly problem (MFP)

causes the low quality of the website visibility and has a potential risk to decrease usability for a mobile

user. The existing solutions to mobile friendly problems do not address symmetrical structure of web pages.

To address this limitation, we have proposed an automatic repair technique that generates symmetric mobile

friendly patches by tuning the symmetric criteria of a web page. The empirical evaluation shows that this

approach gets better structure on the basis of symmetry in 90.7% of the evaluated websites. Moreover, A

survey based evaluation shows that 88%, out of 54 websites, have been considered as more preferable than the

previous version by the users.

1 INTRODUCTION

The web is being accessed more and more on mobile

devices. Mobiles have become a common medium of

accessing the internet. Designing websites to be mo-

bile friendly ensures that the pages of that website is

readable and usable on all devices (Mob, 2020). The

websites which are developed for desktop viewport

might be difﬁcult to view and use on a mobile device.

Alternatively, the mobile-friendly version is readable

and immediately usable. Google has updated its rank-

ing criteria and included mobile-friendliness as a cri-

teria while returning search results for mobile devices

in April 2015 (Mul, 2020). This concludes that if a

website is not mobile friendly, the probability of get-

ting higher rank in the search results will be less.

The main problem of existing approaches is the

violation of symmetric structure of the website. Sym-

metrical design relies on proportion to create a style

with mirroring sides. Symmetry happens when the

composition of design is distributed evenly around

a central point or axis of a website (Yang and Shi,

2009). Symmetry is considered one of the most im-

portant predictors for visual appeal according to the

gestalt law which describes how human perceives pat-

terns. (Bauerly and Liu, 2008). Gestalt theory is a

psychology theory to describe the perspective process

of human (Wertheimer, 1938). Lavie and Tractin-

sky have also argued that symmetry is also an im-

portant factor in the aesthetic perception of websites

(Lavie and Tractinsky, 2004). In Zheng et al.’s evalu-

ation, symmetry signiﬁcantly correlated with partici-

pants’ subjective ratings on aesthetics (Zheng et al.,

2009). Symmetry happens when the composition

of web elements, contents and design is evenly dis-

tributed around a center point of axis. The work in-

volved in making a symmetric mobile-friendly site

can depend on developer resources, business model,

and expertise. There is no automatic way to ensure

symmetry of a website. The developers have to im-

plement the symmetric design manually. So this is

time consuming and costly.

The existing approaches of repairing a mobile

friendly websites do not ensure the symmetry of the

web page. There are some existing approaches to ﬁx

presentation issues of websites. For example, one ap-

proach repairs layout cross browser issues caused by

the inconsistencies in different browsers’ rendering of

a same web page (Mahajan et al., 2017). The other

solution shows a framework of repairing faulty CSS

of a web application but it does not address mobile

friendly problems (Walsh et al., 2015). Elsewhere.

PhpRepair (Samimi et al., 2012) solves HTML syn-

tax problems in web application. Moreover, Wang et

al. (Wang et al., 2012) proposed an approach to ﬁx

presentation issues using static and dynamic analysis.

However, none of these techniques identify mobile

friendly problem and provide repairs for them. Maha-

Azmain, M. and Ganguly, K.

Automated Repair of Asymmetric Web Pages during Resolution of Mobile Friendly Problems.

DOI: 10.5220/0010500504610468

In Proceedings of the 16th International Conference on Evaluation of Novel Approaches to Software Engineering (ENASE 2021), pages 461-468

ISBN: 978-989-758-508-1

461

jan et al. (Mahajan et al., 2018) proposed an approach

to produce CSS patches automatically that can ﬁx the

mobile friendly problems of a web page (Mahajan

et al., 2018). To distinguish the best ﬁx proﬁciently,

this methodology evaluates metrics identiﬁed by lay-

out distortion and mobile friendly score to achieve

the solution. None of the existing approaches ensures

symmetry during resolution of mobile friendly prob-

lem.

The goal of this research is to deliver a technique

to improve symmetric structure of a website during

resolution of mobile friendly problems. This pro-

posed method has been compared with the existing

works. This methodology helps to develop mobile

friendly websites with a symmetric structure. More-

over, this approach has decreased development time

and cost as it automatically ﬁxes a web page accord-

ing to the viewports of the mobile devices.

With this aim, this study answers the following

Research Questions (RQs):

1. How to improve symmetric structure during

resolution of mobile friendly problems? By an-

swering the following sub-questions this question

can be answered.

(a) How to identify CSS properties and values of

the HTML elements that cause asymmetry

of a web page? By answering this question,

we will get a solution to ﬁnd some problematic

HTML elements that cause asymmetry.

(b) How to improve symmetric structure of a

website in different viewports? By answer-

ing the question, a patch will be generated au-

tomatically that will modify some CSS prop-

erties like position, height, width, padding etc.

so that the whole page will be symmetrically

structured.

To answer these questions, a search based technique

has been proposed that uses balance score and pro-

portion score to address an optimal solution to get

symmetric mobile friendly CSS patch. This technique

ﬁrst applies patches to ﬁx mobile friendly problems of

the target patch. Then, the approach evaluates sym-

metric structure of the web page on the basis of sym-

metry based metrics named proportion score and bal-

ance score. It also ﬁnds the faulty HTML elements

that cause asymmetry. After that, the approach gen-

erates patches that modiﬁes some CSS properties like

position, height, width, padding etc. so that the whole

page can be symmetrically structured. Therefore, the

approach generates patches that maintain trade-off be-

tween symmetry and layout distortion. The approach

repositions the segments to maintain symmetry by up-

dating CSS values of the HTML elements. The so-

lution can be applied to any types of viewports be-

cause the size parameters are conﬁgurable in the me-

dia query according to the accessed device viewport

size.

To evaluate this solution, the proposed solution

has been validated using both metrics and survey-

based evaluation. The repaired version has achieved

better score in terms of balance score and proportional

score. This symmetric mobile friendly approach gets

90.7% better balance score and 96.2% better pro-

portion score than the existing mobile friendly ap-

proach. It conﬁrms that the repaired versions have

more symmetric structure than the existing mobile

friendly technique. A survey based evaluation has

been conducted on 25 professional software engineers

of Bangladesh. This survey shows that 88% websites,

out of 54, have been considered as more preferable

than the previous version by the users. On average,

the rating (out of ten) of updated symmetric mobile

friendly version had a 21% improvement than the mo-

bile friendly version.

2 METHODOLOGY

This section contains the core parts of the technique

which are later described in details throughout this

chapter. The following points are the main constitutes

of the proposed approach.

First, the approach parses the document object

model (DOM) tree of the target web page to identify

the segments. After that, the approach incorporates

the existing mobile friendly ﬁx (Mahajan et al., 2018).

This applies patches to ﬁx mobile friendly problems

of the target patch. This step uses two metrics named

mobile friendly score and layout distortion for evalu-

ation.

Then, the approach evaluates symmetric structure

of the web page based on symmetry based metrics. It

also ﬁnds the faulty HTML elements that cause asym-

metry. Moreover, the CSS attributes and the values of

the elements is identiﬁed. For example, an image con-

taining absolute positioning, ﬁxed height and ﬁxed

length can cause asymmetry. To detect the asymme-

try, the approach checks the balance between the two

sides of a web page according to the centralized verti-

cal axis. The approach identiﬁes all these problematic

properties and values that cause asymmetry.

After that, the approach generates patches that

modiﬁes some CSS properties like position, height,

width, padding etc. so that the whole page can be

symmetrically structured. However, improving sym-

metry can cause layout distortion. Layout distor-

tion means overlapping of the segments of a web-

ENASE 2021 - 16th International Conference on Evaluation of Novel Approaches to Software Engineering

462

Figure 1: Overview of the solution approach.

site. Therefore, the approach generates patches that

maintains trade-off between symmetry and layout dis-

tortion. The approach updates the position property

value (static, relative or sticky) to achieve the most

symmetric structure possible for that web page. How-

ever, the updated element can overlap on other ele-

ments that cause segment overlapping. To resolve

this, the approach repositions the overlapped seg-

ments maintaining symmetry. The overview of the

solution approach is shown in Figure 1. This step

uses two metrics named proportion score and balance

score to generate the symmetry mobile friendly patch.

New values are made into CSS style declarations by

converting it into a CSS selector. A CSS media query

is formed by these updated CSS style values.

2.1 Segmentation of the Web Page

The primary stage analyzes the structure of the page

to recognize fragments - sets of HTML components

whose properties should be balanced together to pre-

serve the visual consistency of the repaired page. An

illustration of a segment may be a arrangement of

text-based links in a navigation bar where on the off

chance that the text style measure of any interface

within the section is little, at that point all of the nav

links ought to be balanced by the same amount to pre-

serve the links’ visual consistency. To maintain con-

sistency, the ﬁx value of a target element has to be

close to the related elements.

The document object model (DOM) tree of the

target web page needs to parsed to identify the de-

sired segments from a web page. There are several

types of segmentation process, such as Block-o-matic

(Sanoja and Ganc¸arski, 2014), clustering based par-

titioning (Chakrabarti et al., 2008), correlation clus-

tering(Bansal et al., 2004). We have chosen to use vi-

sual representation based segmentation process called

VIPS (Cai et al., 2003). In the VIPS algorithm, the

vision-based content structure of a page is deduced

by combining the DOM structure and the visual cues.

First, DOM structure and visual information, such

as position, background color, font size, font weight,

etc., are obtained from a web browser. Then, from

Figure 2: Example of Web Page Segmentation.

the root node, the visual block extraction process is

started to extract visual blocks of the current level

from the DOM tree based on visual cues. Every DOM

node is checked to judge whether it forms a single

block or not. If not, its children will be processed in

the same way. When all blocks of the current level

are extracted, they are put into a pool. Visual separa-

tors among these blocks are identiﬁed and the weight

of a separator is set based on properties of its neigh-

boring blocks. After constructing the layout hierar-

chy of the current level, each newly produced visual

blocks is checked to see whether or not it meets the

granularity requirement. If not, this block will be fur-

ther partitioned. After all blocks are processed, the

ﬁnal vision-based content structure for the web page

is outputted. Below we introduce the visual block

extraction, separator detection and content structure

construction phases respectively. The steps of VIPS

is shown in Figure 2. We can see that, the segments

are the header content, multiple content pane and the

footer. The blue blocks are the separators of the seg-

ments. The red blocks are intermediate segments and

the black blocks are the ﬁnal segments of the web

page.

2.2 Applying Mobile Friendly Fix

After segmentation, this approach incorporates the

existing mobile friendly ﬁx (Mahajan et al., 2018).

The overview of the process is given below:

1. Identifying Problematic Segments. To detect mo-

bile friendly problems in a web page, google mo-

bile friendly test (GMFT) is used. The GMFT tool

identiﬁes the problems with the faulty elements

and their CSS properties. Then it is easy to de-

termine which segments have faulty elements by

analyzing the CSS properties. This approach ap-

plies a update to the segments to recognize which

ones may be tricky with regard to that mobile

friendly issue. The issue with the CSS properties

is, they inherit styles from their parent HTML el-

ements. Therefore, this approach introduce Prop-

erty Dependence Graph (PDG). This graph repre-

Automated Repair of Asymmetric Web Pages during Resolution of Mobile Friendly Problems

463

sents style relationships among all of the HTML

elements of a web segment based on CSS inheri-

tance. This approach deﬁnes three type of PDG:

font, content size and tap target PDG.

2. Repair. The repair step uses two metrics named

mobile friendliness and layout distortion. The

Google mobile friendliness test scores each web

page on the basis of mobile friendliness. This

score has a range of 0 to 100. The measure of

update in a layout can be controlled by building

models that express the relative visual position-

ing among and inside the parts of a page. To de-

cide the edge marks, the methodology registers

the Minimum Bounding Rectangles (MBRs) of

each section (Chaudhuri and Samal, 2007). This

is done by ﬁnding the largest and smallest X and

Y coordinate values of the components, which can

be obtained by analyzing the DOM of the page.

3. Computing Candidate Patches. The best CSS

patch balances between the mobile friendliness

and layout distortion. It irritates adjustment fac-

tors as to ﬁnd the appropriate ﬁx that vary a little

from the original web page. This approach ﬁnds

that the mean and standard deviation values are

the best in context of Gaussian distribution. Fi-

nally, this approach included an amendment fac-

tor to permit the way to get the optimal solution.

4. Generating Final Patch: The method creats a set

of ﬁxes. The CSS properties are updated accord-

ing to the ﬁx result for all nodes in the PDG. A

CSS media query is formed by these updated CSS

style values. When an user access the page, this

media query cause it to be rendered.

2.3 Evaluation of Symmetry Structure

In this stage, the approach ﬁnds the faulty HTML el-

ements that cause asymmetry. Moreover, the CSS

properties and the values of the target elements will

be identiﬁed. For example, an image containing ab-

solute positioning, ﬁxed height and ﬁxed length can

cause asymmetry. To detect the asymmetry, the ap-

proach will check the balance between the two sides

of a web page according to the centralized vertical

axis. The method has to identify all these problematic

properties and values that may cause asymmetry.

After getting all the HTML elements along with

the CSS properties, the approach detects the faulty el-

ements that cause asymmetry to the web page. This

detection is done separately for each segments of the

web page. The symmetric evaluation of the HTML

elements is concluded by two metrics. They are:

(a) Balance Score. The equal distribution of visual

weight in a design is deﬁned as balance. Visual

balance occurs around a vertical axis. Our eyes

require the visual weight to be equal on the two

sides of the axis. Balance score is a metric for

measuring equilibrium along a vertical axis in the

layout. It is calculated by the summation of sym-

metrical balance, vertical balance and horizontal

balance. The balance score of an individual ele-

ment, B

= (N

, H

, C

, E

) is deﬁned as follows:

(i) N

The number of elements in each segments on

both sides.

(ii) H

The distance from the closest headline and

sub-headline on both sides or not.

(iii) C

The distance from the closest call to action

button according to the center.

(iv) E

The number of elements under the heading

on both sides

The total balance score is the summation of each

balance score of the targeted web page. If the the

total balance score for a page p is B(p) and total

number of elements in that page is n, then

B(p) =

(n ∗ 100) −

∑

i=1

, H

, C

, E

)

n ∗ 100

(b) Proportion Score. It is the ratio between the di-

mensions of elements. The ratio is calculated by

dividing the height of any element by its length.

The proportion of every elements in a web page

needs to be similar to maintain symmetric struc-

ture. The proportion score of a web page is calcu-

lated by the difference of individual mean propor-

tion score of each mirror side of that web page.

The solution is looking for a proportion score

close to zero. If the height of an HTML element e

is H

and width is W

, the proportion score of that

element is P

The web page needs to divided into two sides on

the basis of vertical axis. Then the elements will

be separated into two sets such as left set and right

set. The elements, which are overlapped on the

vertical axis, are the common members of the two

sets. If the proportion score of left set is P

s and

right set is P

s =

∑

i=1

where the number of elements in left side is n

and

s =

∑

i=1

ENASE 2021 - 16th International Conference on Evaluation of Novel Approaches to Software Engineering

464

where the number of elements in left side is n

Therefore, the ﬁnal proportion score of a page W

is P

= P

s − P

These two metrics are used to detect the faulty ele-

ments in that web site which cause the distortion of

symmetry. Moreover, the approach gets the faulty

segments by analysing the faulty HTML element’s

segment.

2.4 Generate Symmetric Mobile

Friendly Patch

The idea behind the solution is to achieve optimal so-

lution efﬁciently. Search based technique has been

used to generate candidate patches to get symmetric

mobile friendly web page. The value of balance score

and proportion score has been changed dynamically

to gain highest balance score (close to 1) and lowest

proportion score (close to 0). Search-based strategies

start by choosing a sample set from the solution space.

For this, the method iterates over each of the elements

in the site. For every component, it repeats over every

node of the PDG, beginning with the root node, and

updates value that will be referred to CSS property.

When new property estimations have been completed

for all nodes in the PDG, the method creates a bunch

of ﬁxes. The values have been updated according to

achieve the highest balance score and lowest propor-

tion score.

New values are made into CSS style declarations

by converting it into a CSS selector. A CSS media

query is formed by these updated CSS style values.

When an user access the page in a mobile viewport,

this media query cause it to be rendered with the up-

dated CSS patch.

3 EXPERIMENTATION AND

FINDINGS

This section contains the implementation details,

experiments, result discussion of the proposed ap-

proach. The discussion of the results to explain some

important insights are also presented. This section

also describes the subjects, tools that is used in the im-

plementation, environment setup and evaluation ques-

tions.

3.1 Implementation Details

The proposed methodology was implemented in Java

using Eclipse Photon 4.8 Integrated Development En-

vironment (IDE) (Ecl, 2020). Moreover, We used

python 3 using virtual studio code to develop the an-

alyzer tool named UIAnalyzer. An Object Oriented

Programming language such as Java provides exten-

sive support for polymorphism, inheritance and en-

capsulation which are necessary for reusability. This

is why it was used to implements the approach.

We have used Google mobile friendly test api to

identify the mobile friendly problems in a web ap-

plication.Mobile Friendly Test is a tool that allows to

easily carry out a mobile site test telling about a web-

site’s score in terms of mobile responsiveness. To ren-

der the document object model of a webpage and to

get information about XPath of the HTML elements,

an emulated Chrome browser v65.5 has been used for

mobile experience. Selenium Webderiver is used to

get all the HTML elements parsed. We have used

jStyleParser for detecting deﬁned CSS properties for

every HTML nodes in a web page.

3.2 Subjects

For result analysis, 54 websites were selected from

the most popular websites list across all categories

listed by MOZ top 500 websites (The, 2020). We

selected MOZ website list as the source because it

gives the popularity based ranking and a mix of dif-

ferent layouts. We have used HTTrack (HTT, 2020)

to download all the HTML ﬁles, images, CSS and

javascript ﬁles from the website.

3.3 User based Case Study

A user based case study has been conducted by doing

a survey. The purpose of this survey is to evaluate the

visual appeal of the updated web page that is incor-

porated with symmetric mobile friendly patch. The

participants were asked to compare the previous and

updated versions of the subjects in that survey. For

each subject, the survey included a screenshot of the

original and updated pages when viewed in a view-

port of the mobile device. The questions of the survey

were:

1. Which version between two screenshots (One is

mobile friendly, other one is symmetric mobile

friendly) is more visually attractive?

2. Which version they would prefer more to use in a

mobile device?

3. Rate the each version of the target page on a scale

of 10.

We used Google Form service to do this survey. For

the survey, we had 25 participants who are currently

Automated Repair of Asymmetric Web Pages during Resolution of Mobile Friendly Problems

465

Figure 3: Average Rating of symmetric mobile friendly ver-

sions of 54 subjects.

(a) Website with

mobile friendly

problems

(b) Website after

applying mobile

friendly solution

symmetric

structure

Figure 4: Screenshots of the outcome - 1.

working as software developers in different multi-

national software companies of Bangladesh. Based

on the result of the survey, the participants preferred

using symmetric version 48 out of 54 subjects. Only

6 subjects had a negative preference for using the

symmetric version. On average, the rating of up-

dated symmetric mobile friendly version had a 21%

improvement than the mobile friendly version. Fig-

ure 3 shows the average ratings of symmetric mobile

friendly versions of all 54 subjects given by the par-

ticipants. It shows that 53 of them have a rating of

more than 5.

There are some screenshots (4) given. 4a shows a

website with various mobile friendly problems. After

applying the solution for mobile friendly problems,

the website has asymmetric structure (4b). 4c is the

ﬁnal result that shows how the website looks after ﬁx-

ing the structural problem. Figure 5 shows one more

example of the symmetric mobile friendly solution.

4 RESULT ANALYSIS

The effectiveness of the approach is dependent on two

metrics such as balance score and proportion score of

a web page. The range of two metrics is 0 to 1. If the

balance score is close to 1 and the proportion score is

close to 0, it is evaluated as more effective. First, these

(a) Website with

mobile friendly

problems

(b) Website after

applying mobile

friendly solution

symmetric

structure

Figure 5: Screenshots of the outcome - 2.

Figure 6: Distribution of Balance Score Gain.

metrics have been calculated for the version with mo-

bile friendly patch. Then, these metrics have been

calculated for the updated version of the website with

symmetric mobile friendly patch. As we are targeting

to increase the balance score and decrease the propor-

tion score, it is easy to evaluate the effectiveness of

the approach by analyzing the difference of the two

versions of the subjects.

The balance score and proportion score of the mo-

bile friendly versions and symmetric mobile friendly

versions for 54 websites can be found in this link

. 49

out of 54 subjects have gained balance score. There-

fore, the effectiveness of the approach on the basis of

balance is 90.7%. Moreover, 52 out of 54 subjects

have lost proportion value. The effectiveness on the

basis of proportion score is 96.2%. The ﬁgures 6 and

7 show the distribution of balance score and propor-

tion score. The blue portion indicates the proportion

score and balance score of the mobile friendly ver-

sion. The orange portion indicates the improvement

of proportion score and balance score of the symmet-

ric mobile friendly version. It shows that the symmet-

ric mobile friendly version generates better patch than

the mobile friendly patch in terms of symmetry.

Table 1 shows that the mean value of balance gain

is 0.20 and the mean value of proportion loss is 0.25

which are greater that 0. It conﬁrms that the repaired

versions have performed better than the previous mo-

https://doi.org/10.6084/m9.ﬁgshare.14184635

ENASE 2021 - 16th International Conference on Evaluation of Novel Approaches to Software Engineering

466

Figure 7: Distribution of Proportion Score Loss.

bile friendly technique.

Table 1: Summary of Evaluation Metrics.

Max Min Average

Balance Gain 0.705 -0.361 0.202

Proportion Loss 0.858 -0.658 0.253

5 RELATED WORK

In this section, the existing mobile friendly problem

solving approaches will be discussed. In the litera-

ture, most of them have proposed the detection and

resolving process of presentation failure of web ap-

plications (Walsh et al., 2015; Panchekha and Tor-

lak, 2016; Mahajan et al., 2017; Alameer et al., 2016;

Wang et al., 2012). A few have proposed the resolu-

tion process of mobile friendly problems in web pages

(Mahajan et al., 2018). Some of them have shown the

signiﬁcance of visual symmetry as an important factor

in the aesthetic perception of websites (Bauerly and

Liu, 2008; Lavie and Tractinsky, 2004; Zheng et al.,

2009).

Walsh et al. (Walsh et al., 2015) proposed an au-

tomated method for detecting potential faults in the

layout of responsively designed pages. This approach

models the layout of a responsive web page across

a series of viewport widths, explicitly taking account

of the key aspects of responsive layout, namely the

changing visibility, width, and relative alignment of

web page elements. This approach can not detect mo-

bile friendly problems. Moreover, new HTML ele-

ments namely header, footer, section etc have been in-

troduced recently. This approach does not work prop-

erly with these elements.

Alameer et al. (Alameer et al., 2016) proposed an

automated technique for detecting when a web page’s

interface has been distorted due to internationaliza-

tion efforts and identifying the HTML elements or

text responsible for the mentioned problem. This so-

lution is too speciﬁc to generalize to the broader do-

main.

The continually expanding number of internet

browsers with which clients can get to a site has pre-

sented new difﬁculties in controlling visual issues.

Differences in the appearance of a site across vari-

ous web browsers are known as Cross Browser Issues

(XBIs) (Mahajan et al., 2017). It is caused by the con-

trasts in how different programs render HTML and

CSS rules. The XFix technique repairs layout Cross

Browser Issues (XBIs) — presentation failures. In

this domain, the “correct” presentation of the page is

available through one of the browsers, the layout of

which must be mimicked in another. Mobile friendly

problems entail a different approach, in which the pre-

sentation of a page must be changed to correct a series

of identiﬁed issues. There is no correct reference ren-

dering available to the repair process, which must also

maintain as much of the original aesthetics of the page

as possible.

Mahajan et al. (Mahajan et al., 2018) proposed

an automated approach for solving mobile friendly

problems in web application. They proposed a way

to dynamically create CSS patches that can improve

the mobile friendliness of a site. To effectively get the

best ﬁx, this methodology checks different aspects of

the problem to evaluate metrics identiﬁed by layout

distortion and the calculation of the solution. The ap-

proach is divided into 3 phases - segmentation, local-

ization and repair. The repair phase computes a repair

CSS set for the web page. It identiﬁes a patch that

improves the web page’s mobile friendliness score. It

also ensures that the generated patch does not signif-

icantly distorts the layout of the web page. They an-

alyzed 38 real-world subjects collected from the best

50 most visited websites over all seventeen categories

reported by Alexa. The results for effectiveness were

that 95% (36 out of 38) of the subjects passed the

GMFT after Applying MFix’s proposed CSS repair

ﬁx. In terms of the measuring metric, the repaired ver-

sion was evaluated to have improved visual value as

it were 38% of the time. This approach solves mobile

friendly problems of a website but it can not maintain

the original symmetric structure. Therefore, the re-

paired version has a lower attractiveness. According

to their evaluation, the repaired version had a lower

attractiveness 62% of the time.

The existing solutions of asymmetry and mobile

friendly problems are limited in manual development.

These approaches are time consuming and costly.

One approach repairs layout cross browser issues

caused by the inconsistencies in different browsers’

rendering of a same web page. The other solution

shows a framework of repairing faulty CSS of a web

application but it does not address mobile friendly

problems. An other approach ﬁxes presentation is-

sues using static and dynamic analysis. There is an

approach to produce CSS patches automatically that

Automated Repair of Asymmetric Web Pages during Resolution of Mobile Friendly Problems

467

can ﬁx the mobile friendly problems of a web page.

However, none of these techniques solve both asym-

metry and mobile friendly problem, which provides

the scope for a major contribution in this domain.

6 CONCLUSION

This paper proposes an automated repair technique

that incorporate mobile friendly solutions and sym-

metric structure of web application. For this, a search

based approach has been devised that considers coor-

dination between mobile friendly problem and sym-

metry problem. This approach depends on ofﬂine ver-

sion of a website because this can not handle the dy-

namic changes in rendering. Our future work is to

handle the dynamic changes along with the symmet-

ric mobile friendliness of a web page. This solution

needs to introduce ﬁxing the online version of a web

site. Another possible future work is to analyze the

relation between symmetry, mobile friendliness and

complexity of a web page to quantify this relation.

As the complexity of a web page depends on the ele-

ments, contents and layout, symmetry analysis on dif-

ferent types of website can extract valuable insights.

Moreover, new HTML elements have been introduced

in modern web pages. The modiﬁcation of these ele-

ments needs different approach in the context of sym-

metric mobile friendly solution. In addition to that,

different types of new viewports are being introduced

day by day. These new viewports may need updated

solution to incorporate.

REFERENCES

(2020). Eclipse photon — the eclipse foundation. https://

www.eclipse.org/photon/. (Accessed on 09/30/2020).

(2020). Httrack website copier - free software ofﬂine

browser (gnu gpl). https://www.httrack.com/. (Ac-

cessed on 09/30/2020).

(2020). Mobile-friendly test – google search console. https:

//search.google.com/test/mobile-friendly. (Accessed

on 09/28/2020).

(2020). Multi-screen overview - adsense help. https:

//support.google.com/adsense/answer/6051803?hl=

en&visit id=637368306470692014-1946767540&

rd=1. (Accessed on 09/28/2020).

(2020). The top 500 most popular websites - moz. https:

//moz.com/top500. (Accessed on 09/30/2020).

Alameer, A., Mahajan, S., and Halfond, W. G. (2016).

Detecting and localizing internationalization presenta-

tion failures in web applications. In 2016 IEEE Inter-

national Conference on Software Testing, Veriﬁcation

and Validation (ICST), pages 202–212. IEEE.

Bansal, N., Blum, A., and Chawla, S. (2004). Correlation

clustering. Machine learning, 56(1-3):89–113.

Bauerly, M. and Liu, Y. (2008). Effects of symmetry and

number of compositional elements on interface and

design aesthetics. Intl. Journal of Human–Computer

Interaction, 24(3):275–287.

Cai, D., Yu, S., Wen, J.-R., and Ma, W.-Y. (2003). Vips: a

vision-based page segmentation algorithm.

Chakrabarti, D., Kumar, R., and Punera, K. (2008). A

graph-theoretic approach to webpage segmentation.

In Proceedings of the 17th international conference

on World Wide Web, pages 377–386.

Chaudhuri, D. and Samal, A. (2007). A simple method for

ﬁtting of bounding rectangle to closed regions. Pattern

recognition, 40(7):1981–1989.

Lavie, T. and Tractinsky, N. (2004). Assessing dimensions

of perceived visual aesthetics of web sites. Interna-

tional journal of human-computer studies, 60(3):269–

298.

Mahajan, S., Abolhassani, N., McMinn, P., and Halfond,

W. G. (2018). Automated repair of mobile friendly

problems in web pages. In Proceedings of the 40th

International Conference on Software Engineering,

pages 140–150. ACM.

Mahajan, S., Alameer, A., McMinn, P., and Halfond, W. G.

(2017). Automated repair of layout cross browser is-

sues using search-based techniques. In Proceedings of

the 26th ACM SIGSOFT International Symposium on

Software Testing and Analysis, pages 249–260. ACM.

Panchekha, P. and Torlak, E. (2016). Automated reason-

ing for web page layout. ACM SIGPLAN Notices,

51(10):181–194.

Samimi, H., Sch

afer, M., Artzi, S., Millstein, T., Tip, F., and

Hendren, L. (2012). Automated repair of html gener-

ation errors in php applications using string constraint

solving. In 2012 34th International Conference on

Software Engineering (ICSE), pages 277–287. IEEE.

Sanoja, A. and Ganc¸arski, S. (2014). Block-o-matic: A

web page segmentation framework. In 2014 interna-

tional conference on multimedia computing and sys-

tems (ICMCS), pages 595–600. IEEE.

Walsh, T. A., McMinn, P., and Kapfhammer, G. M. (2015).

Automatic detection of potential layout faults follow-

ing changes to responsive web pages (n). In 2015

30th IEEE/ACM International Conference on Auto-

mated Software Engineering (ASE), pages 709–714.

IEEE.

Wang, X., Zhang, L., Xie, T., Xiong, Y., and Mei, H.

(2012). Automating presentation changes in dynamic

web applications via collaborative hybrid analysis. In

Proceedings of the ACM SIGSOFT 20th International

Symposium on the Foundations of Software Engineer-

ing, page 16. ACM.

Wertheimer, M. (1938). Gestalt theory.

Yang, X. and Shi, Y. (2009). Enhanced gestalt theory

guided web page segmentation for mobile browsing.

In 2009 IEEE/WIC/ACM International Joint Confer-

ence on Web Intelligence and Intelligent Agent Tech-

nology, volume 3, pages 46–49. IEEE.

Zheng, X. S., Chakraborty, I., Lin, J. J.-W., and Rauschen-

berger, R. (2009). Correlating low-level image statis-

tics with users-rapid aesthetic and affective judgments

of web pages. In Proceedings of the SIGCHI Confer-

ence on Human Factors in Computing Systems, pages

1–10. ACM.

ENASE 2021 - 16th International Conference on Evaluation of Novel Approaches to Software Engineering

468