Flexi-adaptor; An Automated Web Content Adaptation for Mobile

Flexi-adaptor; An Automated Web Content Adaptation for Mobile

Devices

Rajibul Anam, Chin Kuan Ho and Tek Yong Lim

Faculty of Information Technology, Multimedia University, Persiaran Multimedia, 63100

Cyberjaya, Selangor, Malaysia.

[email protected], [email protected], [email protected]

ABSTRACT

KEYWORDS

Content adaptation, mobile browsing, small

display, Flexi-adaptor, mobile web content.

1 INRODUCTION

Last few years, people start using the

network ready mobile devices like

handheld computers, PDAs and smart

phones to access the internet. The term

mobile device refers to a device

specially designed for synchronous and

asynchronous communication while the

user is on the move [1]. Among the

mobile devices, the mobile phone and

PDA are the most popular, and

commonly used by the users, and one of

the facilities is accesses the internet [1].

These kinds of devices provide good

mobility but very limited computational

capabilities and display size [2]. Still,

many mobile users don’t feel easy to

browse the web via mobile devices,

because of small screen, limited

memory, processing speed and slow

network [2], [3]. Since most of the

existing web contents are originally

designed for display in the desktop

computers, so the content delivery

without layout adjustment makes the

contents unsuitable for mobile devices.

Users mobile devices need to scroll the

screen horizontally and vertically to find

the desired content. Moreover, searching

and browsing could be frustrated

because most of the web site is designed

for the standard desktop display. This

means that most of the web contents are

not suitable for mobile web browsing

[4].

Content adaptation refers to

techniques, which automatically adjust

the contents according to the properties

of the handheld devices for better

presentation in to the mobile devices.

656

International Journal of Digital Information and Wireless Communications (IJDIWC) 1(3): 656-670The Society of Digital Information and Wireless Communications, 2011(ISSN 2225-658X)

Mobile web browsing usually involves a lot

of horizontal and vertical scrolling, which

makes web browsing time-consuming. A

user may be interested in a section of a web

page, which may not fit to the mobile screen

and requires more scrolling in both

directions. In this paper, we propose to

address this problem by displaying the block

title and hide the block body contents from a

large web page while maintaining their

semantics, which display only the condensed

information. The Flexi-adaptor, provides the

block titles and reduce unnecessary

information by allowing its users to see the

most relevant blocks of the page. The Flexi-

adaptor categorized each object of the web

page as menu, block title and main content.

Assign a weight to each object of the block

by analyzing the object elements. It uses

depth first traversal algorithm to select

blocks, and delivers them to handheld

devices. We conduct a usability test and

result shows that Flexi-adapter is an

effective adaptation system. The proposed

solution improves web content accessibility

and delivers the target contents to the users.

The conventional way to provide web

contents to support various types of

handheld devices is to create the same

contents but different formats for

different devices. This method is simple

but the chances of making errors are

very high for different handheld devices.

To support new handheld devices, all the

previous web contents need to be

reformatted for that handheld device.

Sometimes, changes in the main contents

require updating of all handheld contents

format. So, this is not a feasible solution

for large volume of web contents.

Since the screen size is limited, the

content adaptation method needs to

apply for various content transformation

processes including layout changes and

content format reconfiguration [2], [4],

[6]. However, simple content adaptation

solution for changing multiple-column

layout to a single-column layout for

handheld screens also shows some

disadvantages. Without the semantic

analysis and relationship among the

objects, this kind of adaptation may

cause an awkward organization of a web

page and gives different meaning of

information. A tool or mechanism is

needed to provide the users flexible

adapted web contents for mobile

devices.

Web contents are typically composed

of multimedia objects (text, images,

audio and video) [6], which are

semantically connected by various

objects in a section. For example, an

image can be illustrated by a section of a

text article or a text article can be

abstract by some images. In other words,

these related objects are integrated with

each other’s which help the readers to

understand what the section intend to

express. Improper arrangement of these

kinds of objects may lead to the

misunderstanding or loss of information

to the users. Therefore, it is very

important for a content adaptation

mechanism to maintain the original

relationship among the objects during

the adaptation and content delivery

process.

Web contents are categorized into

three kinds of objects such as the

navigation bar (main menu), navigation

list (list of anchor texts links to the

actual content) and content (details

information) [7]. However, most of the

web pages contain these three types of

objects to represent the information.

In this paper, we present a novel

method which adapts web contents for

mobile phones. Our goal is to improve

web content accessibility, deliver the

target information to the users. So the

users can reach to the target information

from a large web page. To achieve this

goal, we introduce Flexi-adaptor, an

automated web content adaptation

system for mobile devices. Our

algorithms maintain the relationship

among the objects from a block, identify

the objects and categorize them into

navigation bar, block title and content.

The algorithm adds toggle functionality

to each block title for showing and

hiding the contents of a block. The depth

first search algorithm selects the objects

and delivers them to the users. The rest

of the paper is organized as follows:

Section 2, summarizes the related

research work. Describe the proposed

solution in section 3. Section 4, presents

the case study. Section 5, discusses the

results. Finally, we conclude the paper in

section 6.

2 RELATED WORKS

There are several general purpose

content adaptation systems have been

developed like CMo, Xadapter and Web

657


Clipping. The CMo [8] uses a proxy-

based architecture to adapt web contents

for mobile devices. This system reduces

the information overloading by allowing

its users to see the most relevant

fragment of a web page and navigate

between other fragments if necessary. It

captures the context of a link, applies the

topic boundary detection technique and

uses the context to identify the relevant

information from the next page with the

help of vector machine.

Web Clipping is one of the methods

that researchers are still working on it.

Web Clipping is a technique where the

system extracts and represents some

parts of html document for mobile web

browsing [9]. An annotation or parser

declares a particular portion of a target

document. The system annotates some

parts of a web page, and it provides the

annotation contents to the content

adaptation engine. The Web Clipping

methods modify the html structure and

break the page into small parts, make

them a new separate page and add title

and header. Sometimes it removes

unnecessary objects from the html. The

Web Clipping method read the web

page, tags some parts of the page and

regenerates the web page for mobile web

browsing.

Xadaptor [10] is a content adaptation

system that consists of rule-based and

fuzzy logic approach. The rule-based

approach facilitates extensible,

systematic and adaptive content

adaptation process and also integrates

adaptation mechanism for various

content types and categories them into

the rule-based approach. Rules are

applied by the user define preferences.

The html objects are transformed into

content and pointer objects. Therefore,

the system uses the content parsers to

separate the objects from the html tags.

Moreover, the system reformats the

standard tables from the html objects.

The table reformatting algorithm uses

fuzzy logic and rule-based approaches.

This is a semi-automated system. The

users need to assign some parameters to

adapt the contents.

Some researchers use Vision Based

Page Segmentation (VIPS) algorithm

[3], [4], [5], [8], [11] that manages a web

page structure, find the interesting

objects and restructure a web page in to

blocks. The Web page Tailoring System

follows some rules to select the

interesting blocks [11]. The system

removes unnecessary information,

creates a new title for the block and tries

to summarize the block contents

information. The VIPS identifies the

interesting contents, change the format

of the web page and also represent the

information according to the user’s

interest. User preferences are used by

Page Segmentation and Pattern

Matching methods to make the

information interesting for every user.

Researches use Web Clipping, rule-

based and VIPS to identify the objects

and adapt the contents. However, users

still need to scroll the adapted web page

vertically. Sometimes users browse the

contents but fail to reach the target

content because of information

overloading [12]. Still, it is a great

challenge to achieve satisfactory

precision for web page segmentation,

which is based on html element analysis.

3 PROPOSED SOLUTION

A mobile user first connects to the Flexi-

adaptor using a web browser. The user

types the url of a web page in the input

box (see Fig. 1). A user can key in a

word if he likes to search any particular

info in the page which he wants to view

658


after adaptation. Afterward submit the

request to the Flexi-adaptor, and it

delivers the adapted subpages to the

users. All the delivered contents are fits

in the mobile screen and the users do not

need to scroll the web page. Users use

the next and previous buttons to navigate

the subpages. Fig. 2, illustrates the

framework of the Flexi-adapter. Next

section we explain details about each

components.

Fig. 1. Homepage of the Flexi-adaptor.

Fig. 2. The framework of the Flexi-adaptor.

3.1 Identification of Important Blocks

The Flexi-adaptor first parsers the html

page to an html tree. The root node is the

top element of the html tree. The internal

node means a node with one or more

children [13]. Fig. 3.a, shows the blocks

of the BBC home page and Fig. 3.b,

illustrates the tree presentation of the

block-5. This tree contains all the objects

of the block-5. The root of the tree is

<div> (1), internal node is <p> (2) and

leaf node is <img> (3).

The algorithm identifies the blocks

according to the relationship among the

objects [7]. Since web pages are always

presented in html format, the algorithm

traverses the tree and identifies the

blocks from the tree by analyzing the

html elements.

(a)

(b)

Fig. 3. (a) Original BBC webpage with blocks

and (b) html tree hierarchy presentation of block-

5.

The algorithm removes objects like

JavaScript and CSS from the tree. These

objects are not important to represent the

contents for mobile web browsing [1].

To identify the blocks, use the depth first

search algorithm to traverse the tree and

remove the objects like <script>, <style>

to simplify the tree [1]. The blocks are

identified by the structure functionality

[2]. Fig. 3.a, illustrates the homepage of

“BBC”, block 1 is the menu, block-2 is

the top news, block- 4,5,7,8,10,11 are

the relevant interesting blocks. Block- 6

659


and 9 contain some related links and

block-3 is an advertising block.

Fig. 4. Algorithm for identifying the important

blocks.

Fig. 4, illustrates the algorithm for

identifying the important blocks. The

input is the html tree T (refer to line 2),

output tree T contains only the important

blocks (refer to line 4), v and w is the

node of the tree and structure

functionality [2] is the set of html tags,

which helps to trace the blocks. The

algorithm traverses the tree and searches

for the structure functionality (refer to

line 8). If it matches, then it keeps the

internal nodes and leaf nodes, if it does

not match, then removes the internal

nodes and leaf nodes from the tree. This

algorithm keeps only the important

blocks in the tree and removes other

unnecessary blocks.

3.2 Identification of Type Specific

Objects of a Block

We categorized the type specific objects

as navigation bar (menu), block heading

(block title) and main content (list of

anchor texts links to the actual content

and details information) [7], [14]. Fig. 5,

shows the algorithm that searches for the

objects in the html tree and sends it to

the categorize assignments. Fig. 6,

illustrates the categorize assignment

algorithm which tag the Menu Object,

Block Title Object and Main Contents

from the html tree.

Fig. 5. Algorithm to identifying the object from

blocks.

The search keyword option provides

the users specific target information after

adaptation. If the user keys in any prefer

data (see Fig. 1) in the search field, the

algorithm starts searching the keyword

from the root to leaf node of the tree.

Fig. 6, (refer to lines 7-9) algorithm

shows, if it finds any text object matches

with the user preferred keyword, then

tag the object as match, remove the

matched node from the tree, add a new

left child node to the root of the tree and

assign the matched node to the new left

child node.

There are some html elements that are

used to format the title [2] of the blocks

which contains the condensed

1. Input:

2. T is a Tree;

3. Output:

4. T contains important blocks;

5. Start

6. Visit(T,v)

7. Perform visit of the node v;

8. If v matches with structure

functionality Then

9. If v is an internal node

Then

10. For all child w of v Do

11. Visit(T,w);

12. If w does not match with

structure functionality

Then

13. Remove all the

children of w;

14. Else

15. Remove all the children of

v;

16.End

1.Input:

2. T is the Tree;

3.Output:

4. T is the Tree with tagged

node;

5. Start

6. Traverse(T,v)

7. Perform visit of the node

v;

8. AssignmentOfCategory(v);

9. Preprocessing(v);

10. AssignmentOfWeight(v);

11. If v is an internal node

Then

12. For all child w of v do

13. Traverse(T,w);

14. End

660


information. The algorithm searches the

title objects inside the html tree and tag

as heading. Fig. 6, (refer to line 10-11),

illustrates the algorithm which searches

the block title objects and tag the

matched object as heading.

Most of the web pages use hyperlinks

which navigate to the main content or

another portal. This algorithm tags the

object according to the Hyperlinks text

lengths. There are two kinds of

Hyperlinks such as Menu (navigation

bar) and Content (navigation list)

Hyperlink [7]. Navigation of a web site

is achieved by a collection of links (text /

images / flash / java applets) which is the

website navigation menu or the website

navigation bar. The navigation menu or

bar is usually placed vertically at the left,

right or horizontally near the top of a

web page. Fig. 6, (refer to lines 12-16)

algorithm shows it searches for the

navigation object, if found then checks

the text length of the object. First, tag the

object as the menu, if the text length is

less than 13 [7]. Second, if the text

length is more than 13, then tag the

object as content.

Text and multimedia contents are

used to deliver the information which is

considered as main content. Fig. 6, (refer

to lines 17-18) algorithm shows it

searches for the text contents. If it finds

any text object, then tag the object as

content. Fig. 6, (refer to lines 19-20)

algorithm shows it searches for the

images, if the image width is less than

21 pixels then don’t tag the image

because, less than 21 pixels either use as

a symbol of navigation or fill the blank

space in the web page. When the image

width is more than 21 pixels, tag the

object as the content because it is

considered as main content.

Fig. 6. Algorithm for identification of type

specific objects of a block.

3.3 Pre-Processing of Blocks

Some html elements are used to format

the title and for decoration [10] purposes

to make the content more attractive to

users. For mobile readers, these

additional aesthetics elements may not

necessary. Therefore, it is better to

remove these elements.

Fig. 7, (refer to line 7) shows the

algorithm computes Iscreen which

controls the multimedia content’s

physical dimension. The algorithm (refer

to line 9) first removes the html

decoration elements and changes the

background color of the object. Then, it

edits the multimedia content’s dimension

1. Input:

2. v is the node of the tree;

3. Output:

4. v with tagged value;

5. Start

6. AssignmentOfCategory (v)

7. If search keyword matches

with v and preference enable

Then

8. Assign vp = match;

9. Create new left child of

the root and shift v to the

new left child;

10 If title object matches with

v Then

11. Assign vp = heading;

12. If hyperlink object matches

with v Then

13. If text length is less than

13 Then

14. Assign vp = menu;

15. If text length is equal or

more than 13 Then

16. Assign vp = content;

17. If text object matches with v

Then


19. If multimedia object matches

with v data and multimedia

object pixels > 21 Then


21. End

661


properties. If the multimedia content’s

dimension is more than the Iscreen (refer

to lines 10 - 20), the algorithm reduces

the original dimension of the multimedia

contents, so it can fit the mobile screen.

Fig. 7. Algorithm to Pre-process each object

by removing decorative.

3.4 Assignment of Weight to Each

Object in a Block

The algorithm assigns weight to each

object according to the text length and

multimedia objects dimension. The

depth first traversal algorithm uses the

objects weight to deliver limited

contents to every subpage. The system

uses text and multimedia objects to

compute the weight assignment. It

searches all the objects in the html tree,

if it finds any text object; then the

algorithm count the text length and

transfers it to pixels and assigned as the

weight of the object. Fig. 9, (refer to

lines 7-8), shows the algorithm convert

text lengths to pixels, where vw is the

total number of the pixels, 10 is the

height of a character, and 30 is the

threshold, vw = (30+10× number of text

character); [11].

Fig. 8. Algorithm of assignment of weight to

individual content unit.

Then the algorithm searches for the

multimedia objects. If it finds any

multimedia object, checks the properties

of the multimedia object. If the objects

dimension is provided, it extracts the

information for the weight; otherwise the

system checks the metadata of the

multimedia object to get the dimension.

Fig. 9, (refer to lines 9-10) shows the

algorithm where height of the image is

the height of the multimedia content and

width of the image is the weight of the

multimedia content, and vw is the weight

of the multimedia object.

3.5 Organizing Block Contents Using

Toggle Functionality to the Block Title

1. Input:

2. v is the node of the Tree;

3. Output:

4. v with modified HTML

elements;

5. Start

6. Preprocessing(v)

7. Iscreen =( DeviceWidth /

DeviceHeight) × 200;

8. If v is decoration or

highlight element Then

9. Remove the element from v and change the background

color properties;

10. If v is multimedia element

and multimedia height, width

more than Iscreen Then

11. MaxHeight = Iscreen;

12. MaxWidth = Iscreen;

13. Ratio = height / width;

14. If height > MaxHeight Then

15. newheight = MaxHeight;

16. newwidth = height / Ratio;

17. Elseif width > MaxWidth

Then

18. newwidth = MaxWidth;

19. newheight = width × Ratio;

20. update v with the new width

and height;

21.End

1. Input:


3. Output:

4. v with weight value;

5. Start

6. AssingWeight(v)

7. If v is text object Then

8. Assign weight to vw = vw +

(30 + 10 × number of text

character);

9. If v is image object and

image height, width more

than 20pixels Then

10. Assign weight to vw = vw +

(height of the image × width

of the image);

11.End

662


The block title contains the condensed

information of the body (information

content objects). So the user can

understand the content of the body by

looking at the block title object. The

Flexi-adaptor first searches the tag

heading objects and content objects.

Second, it adds a navigation object to the

block title (heading objects) and hides

the block body. Fig. 9.a, illustrates the

CNN homepage. This page contains the

block title and block body. Fig. 9.b,

shows after adding the toggle

functionality to the block title, extra plus

symbol adds to the block title as the

navigation and block body gets hidden.

If the user clicks the block title plus

symbol, the block body gets visible in

the browser.

Fig. 9. (a) CNN homepage contains block title

and block body with information, (b) adapted

CNN homepage contains block title with

navigation and block bodies are hidden, (c)

adapted CNN homepage after clicking the block

title navigation. The block body appears to the

screen.

Fig. 10. Algorithm for organizing block contents

using toggle block title.

Fig. 9.c, illustrates the block heading

with the minus symbol and the block

body appears. Fig.10, shows the

algorithm (refer to lines 7-8), if found

any title object, then assign the toggle

object to the block title. Afterwards

1. Input:


3. Output:

4. v with toggle object value;

5. Start

6. BlockToggle(v)

7. If title object matches with

v Then

8. Assign vt = enable toggle

object;

9. If v has child node w Then

10. If all node w has

information content object

Then

11. Assign vt = all node wi

and hide information

content object;

12. If toogle the heading object

Then

13. Display the hidden

information content object;

14.End

(a)

(b)

(c)

663


searches for the block body contents

(refer to lines 9-11) and hide them from

display. The hidden block body appears

(refer to lines 12-13) in the screen if the

user clicks the header navigation

symbol.

3.6 Depth First Traversal Algorithm

for Selecting Blocks to Display on

Mobile Devices

The depth first traversal algorithm

selects the tag objects from the tree and

generates subpages according to the

weight capacity of the objects. The total

weight of the objects may not be more

than the mobile screen size of each

subpage.

Fig. 11, illustrates, subpage generator

scheme from the html tree. Let contentsi

is the html tree object, wi is the weight,

and ti is the tag info of the object

assigned by ith item, C is the capacity

base on the screen mobile dimension

(height × width). The depth first

traversal algorithm selects the objects

and the weight must be smaller or equal

to the C capacity. When the weight

become more than the capacity C, then

the process stops. The algorithm delivers

the contents in a subpage. The next and

previous values use to direct next and

previous subpages. If the next is true

(refer to line 12), then the algorithm

traverse the unvisited nodes of the tree,

tag the nodes as visited and add the

objects in the subpage (refer to lines 13-

20). If the previous is true (refer to line

21), the algorithm traverses the visited

nodes of the tree, tag the nodes as

unvisited and add the objects in the

subpage (refer to lines 22-29). The depth

first traversal algorithm creates subpages

from the tree.

Fig. 11. Depth first traversal algorithm for

selecting blocks.

3.7 Context Identification after

Navigating to another Page

Navigating to another page is very

important to get the full information of

the context. The context of a link is the

content around the link which maintains

the same topic [2]. Fig. 12.a, shows the

adapted front page of the CNN website.

Suppose user selects the “Mediators to

try to mend Ivory Coast” link to read the

1. Input:


3. t is the tagged info of the

individual object unit;

4. contents is the tree

individual content unit;

5. w is the weight of the

individual object unit;

6. next is the next button;

7. previous is the previous

button;

8. Output:

9. subpage is HTML page contains

individual content units;

10.Start

11.dfs(v)

12.If next = TRUE Then

13. If weight + wi ≤ C Then

14. v = visited;

15. If ti matches with user

preferences Then

16. subpage = subpage append

contentsi ;

17. weight = weight + wi ;

18. For each child x of parent v

19. If x is unvisited Then

20. dfs(x);

21.Elseif previous = TRUE Then

22. If weight + wi ≤ C Then

23. v = unvisited;

24. If ti matches with user

preferences Then

25. subpage = subpage append

contentsi ;

26. weight = weight + wi ;

27. For each parent v of child x

28. If v is visited Then

29. dfs(v);

30.End

664


main content. The Flexi-adaptor adapts

the new page and identifies the

important blocks from the new page. It

searches the related content “Mediators

to try to mend Ivory Coast” in the new

page and selects those contents for the

adapted page. Fig. 12.b, illustrates the

first subpage after adapting the new page

and Fig. 12.c, shows the subpage

containing the rest of the context related

to “Mediators to try to mend Ivory

Coast”. Fig. 13, (refer to lines 7-8)

shows that the algorithm searches all the

text information in the html tree and tag

them as match if the text data matches

with the navigated text. This algorithm

also searches for the multimedia

contents (refer to lines 9-10) and tag the

multimedia contents as match if the

multimedia contents metadata matches

with the navigation text.

Fig. 12. (a) The adapted CNN page by Web-

adaptor on handheld device with navigation to

another page, (b) The first sub page of adapted

version of the navigated page, (c) the second sub

page of the adapted page.

Fig. 14. Algorithm for content identification

after navigating to another page.

4 EXPERIMENTAL STUDY

This section presents an experimental

comparison study of the Flexi-adaptor

and Skweezer. Both systems are created

to adapt web content for mobile devices.

To conduct the test, we provide iPhone

(emulator) to twenty test subjects. All

the test subjects were undergraduate

students from the Faculty of Information

Technology in Multimedia University.

The average of the test subjects’ age was

(c)

(b)

(a)

1. Input:

2. v is the node of the tree;

3. Output:

4. v with matched value node of

the tree ;

5. Start

6. NavigationContext

Identification (v)

7. If navigation text matches

with v(text) Then

8. Assign vm = match;

9. If navigation text matches

with v(multimedia metadata)

Then

10. Assign vm = match;

11.End

665


22.25 years. We conducted the test in a

controlled laboratory. The test subjects

were instructed to open the home page

of the Flex-adaptor and performed some

tasks. In the same way, the subjects were

instructed to open the home page of the

Skweezer from the mobile browser and

performed some tasks in the laboratory.

The main objective of this study is to

find the differences of scrolling the web

page, content layout and user’s

satisfaction of both systems.

4.1 Usability Study

The main purpose of Flexi-adaptor is to

enhance user’s browsing experiences.

We have conducted the usability

evaluation to validate the design goal of

Flexi-adaptor. The usability involves

learnability, efficiency, memorability,

error hindering and satisfaction of the

users [15]. For mobile web content

adaptation, learning and memorization

are not major concern [16], efficiency

and satisfaction are the major concerns

[17]. We select seven web sites (refer to

Table. 1). All the pages contain tables,

CSS and javacsript. The users were

asked to perform some tasks using the

Flexi-adaptor and Skweezer separately,

including browsing web pages and

locating target information on the iPhone

(emulator). After performing these tasks,

the users were asked to complete two

separate usability questionnaires

regarding two systems’ efficiency and

satisfaction. In the questionnaire, the

first two questions were related to the

user’s satisfaction. The third question

was concerned to content layout. The

fourth question was related to usability,

and the last question was related to

learnability. Fig. 15, shows the usability

questionnaires. Table 2, shows the

usability study result. Each cell in the

table represents the number of users who

selects the interval score (1 to 5) of the

two systems.

Based on the interval score results, it is

observed that the users preferred the

Flexi-adaptor than Skweezer [18]. Both

systems provide adapted versions of the

web pages. However, most of the users

manage to locate the required

information.

Table 1. List of the web pages for the

experiment

Fig. 15. User study questionnaire.

Table 2. Usability study result (here A refers to Flexi-adaptor and B refers to Skweezer).

Question

1 2 3 4 5

A B A B A B A B A B

Score 1 1 0 2 1 0 1 0 5 0 1

2 0 10 4 12 2 12 4 14 0 6

Index Web page URL

1 www.onlineclasses.org

2 www.bbc.co.uk

3 www.un.org

4 www.nasa.gov

5 www.unicef.org

6 edition.cnn.com

7 www.ibm.com

Please specify your opinion about the Flexi-

adaptor and Skweezer of web page regarding

the following perspectives (5 is the highest,

and 1 is the lowest).

1. Overall, I am satisfied with the ease

of completing the tasks in this

scenario.

2. It helps me be more productive.

3. The display format is consistent.

4. It requires minimal scrolling.

5. It is easy to learn to use it.

666


3 24 18 24 21 21 24 27 12 9 24

4 28 32 20 24 32 20 28 16 44 24

5 20 5 15 0 20 0 10 0 30 10

Average Score 3.65 3.25 3.25 2.9 3.75 2.85 3.45 2.35 4.15 3.25

5 RESULTS AND DISCUSSION

A mobile user first opens a general web

browser and connects to the Flexi-

adaptor.

Fig. 16. (a) BBC web page desktop version and

(b) adapted BBC web page for the mobile.

Fig.16.a, illustrates the desktop

version of CNN web page and Fig. 16.b,

shows the CNN adapted web page after

adapting by the Flexi-adaptor. The

background color, font size and

multimedia contents are modified to suit

in to the mobile screen. The block title

has [+] navigation symbol and the

bodies of the block contents are hidden.

If the user toggle the navigation, the

body of the block contents appears in the

screen and the block title navigation

symbol changes to [-]. If the user does

not find the target contents, then the user

can navigate to next or previous pages.

Next part of this paper we compare our

proposed method with other existing

methods; discuss potential

implementation issues and other

considerations.

5.1 Framework Comparison

There are many significant differences

between our proposed system and other

existing content adaptation frameworks.

The Xadaptor [10] framework builds on

five components and it is a rule-based

adaptive content adaptation system;

fuzzy logic is used to model the

adaptation quality and control the

adaptation decision. The Webpage

Tailoring System [5] is a complete

framework to adapt contents for mobile

devices. This system consists of three

components. It uses the mechanism that

can determine which blocks of a web

page should be retained by user

preferences and arrange the blocks. The

CMo [8] framework builds on three

components. It captures the context of

the link, applies topic-boundary

detection technique and uses the context

to identify relevant information in the

next page by using vector machine. The

Flexi-adaptor framework consists of six

components.

(a)

(b)

667


Table 3, illustrates the comparison of

the components of frameworks. Other

frameworks do not hide and display

block contents dynamically. In our

proposed system, rearrange the block

titles using the toggle functionalities by

displaying and hiding the body contents

of the block.

Table 3. Comparison of the components of frameworks.

Components

Used

(1)

Xadaptor

System

(2)

CMo

System

(3) Web

Page

Tailoring

System

(4)

Flexi-

adaptor

Comments

User preferences Yes Yes Yes Yes System 1 and 3 uses predefined

user preferences from database

but system 2 and 4 uses dynamic

preferences from the users.

Representation of

html page as Tree

Yes Yes Yes Yes System 1 use structure tree,

system 2 use frame tree, system

3 use DOM tree and system 4

uses simple html tree.

Block

identification

Yes Yes Yes Yes System 1- 4 identify the blocks

by html tags.

Object

identification

Yes No No Yes System 1and 4 identify the

objects by html tags. Some

embedded and navigation

objects are not important for

mobile readers.

Modification

object elements

Yes No No Yes System 1 modifies the objects

according to the user database,

but system 4 modifies the

objects from the instant data.

Which helps the contents to fit

in the mobile screen.

Toggle the

contents for

display and hiding

No No No Yes System 4 toggles the block title

for showing and hiding the body

of the block. This component

hides the body of all the blocks,

which makes the page very

small and shows only the

condensed information.

Use mechanism to

select the target

contents for

display

No Yes Yes Yes System 2 delivers the related

information. System 3 delivers

information according to the tag

pattern matching, and system 4

delivers exact information.

Table 4, illustrates the time complexity

comparison of the algorithms. Our

proposed blocks identification algorithm

complexity is O(n) because Fig. 4, line

10, uses an iterative loop and recursive

function. The FindBlocks [8] algorithm

line 3 and 14 uses iterative loops and the

complexity is O(n). Second, proposed

objects identification algorithm's

complexity is O(n+e) because Fig. 5,

line 12, uses the iterative loop and

recursive function. However, the

FindContext [8] algorithm line 6 and 10

use nested iterative loop. So the

complexity becomes O(n2). Third, Fig.

7, the object elements modification

668


algorithm complexity is O(n) and

subpage navigation algorithm [19] line 4

complexity is O(n). Fourth, Fig. 8, the

contents height and width calculation

algorithm complexity is O(n) and

subpage navigation algorithm [19] line 5

complexity is O(n). We can see that

overall complexity of our proposed

algorithm is same compared to other

algorithms. However, proposed object

identification algorithms complexity is

less than the FindContext [8] algorithm.

Table 4. Comparison the complexity of the

algorithm.

Algorithm Time

Complexity

of Proposed

System

Time

Complexity

of Other

Systems

Blocks

Identification

Algorithm

O(n) O(n) [8]

Objects

Identification

Algorithm

O(n+e) O(n2) [8]

Object

Elements

Modification

Algorithm

O(n) O(n) [19]

Contents

Height and

Width

Calculation

Algorithm

O(n) O(n) [19]

5.2 Visualization Comparison

The Web Page Tailoring System and

Xadaptor deliver the contents according

to the user preference. However, there

are differences in the visual outlook. Our

system shows only the block title and

hides the body of the block. So, all the

condensed information displays in the

screen. The Web Page Tailoring System,

users can zoom in which part of the page

he wants to read. The multimedia

content sometime gets oversized from

the mobile screen because The Web Page

Tailoring System doesn’t adapt all kinds

of contents. The Xadaptor and proposed

system adapt the multimedia and text

contents. The Xadaptor and Web Page

Tailoring System display all the contents

in a single column page but our

proposed system delivers all the

condensed contents in subpages.

6 CONCLUSION

In this paper, we proposed a new method

for browsing of a large web page on a

mobile device. The Flexi-adaptor

convert's a web page into an html tree

and identify the semantic blocks. Each

object of a block gets tag and assigns

weight. The pre-processor modify the

contents. The toggle block title

algorithm uses to hide and show the

body contents. The depth first traversal

algorithm selects the tag contents. The

system generates subpages for the

mobile devices. Our approach enables a

new browsing experience to the users.

The block title will appear in the screen

which carries the most significant

information. The cases study shows that

the Flexi-adapter is an effective system.

A new browsing method overcomes the

limitation of a mobile screen and makes

them truly useful for information access.

REFERENCES

1. Alexander Blekas, John Garofalakis,

Vasilios Stefanis, “Use of RSS feeds for

Content Adaptation in Mobile Web

Browsing”, International cross-disciplinary

workshop on Web accessibility (W4A), pp.

79-85, (2006)

2. Hamed Ahmadi, Jun Kong, “Efficient Web

Browsing on Small Screens”, International

Conference on Advanced Visual Interfaces,

pp. 23-30, (2008)

3. Xiangye Xiao, Qiong luo, Dan Hong,

Hongbo Fu, Xing xie and Wei-Ying Ma,

“Browsing on Small Displays by

Transforming Web Pages into Hierarchically

669


Structured Subpages”, ACM Transactions

on the Web, vol. 3, no. 1, Article. 4, (2009)

4. Eunshil Lee, Jinbeom Kang, Joongmin Choi,

Jaeyoung Yang, “Topic-SpecificWeb

Content Adaptation to Mobile Devices”,

International Conference on Web

Intelligence, pp. 845-848, (2006)

5. Yung-Wei Kao, Tzu-Han Kao, Chi-Yang

Tsai, Shyan-Ming Yuan, “A personal Web

page tailoring toolkit for mobile devices”,

Computer Standards & Interfaces, vol 31,

Issue 2, pp. 437-453, (2009)

6. Stephen J.H. Yang, Jia Zhang, Rick C.S.

Chen, and Norman W.Y. Shao, “A Unit of

Information–Based Content Adaptation

Method for Improving Web Content

Accessibility in the Mobile Internet”, ETRI

Journal, vol. 29, No. 6, pp. 794-807, (2007)

7. Eunshil Lee, Jinbeom Kang, Joongmin Choi,

Jaeyoung Yang, “Topic-SpecificWeb

Content Adaptation to Mobile Devices”,

International Conference on Web

Intelligence, pp. 845-848, (2006)

8. Yevgen Borodin, Jalal Mahmud, I.V.

Ramakrishnan, “Context Browsing with

Mobiles - When Less is More”, International

conference on Mobile systems, applications

and services, pp. 3-15, (2007)

9. Masahiro Horia, Kouichi Ono, Mari Abe,

Teruo Koyanagi, “Generating

transformational annotation for web

document adaptation: tool support and

empirical evaluation”, Journal of Web

Semantics, vol. 2, no. 1, pp. 1–18, (2004)

10. Jiang He, Tong Gao, Wei Hao, I-Ling Yen,

and Farokh Bastani, “A Flexible Content

Adaptation System Using a Rule-Based

Approach”, IEEE Transactions on

Knowledge and Data Engineering, vol. 19,

no. 1, pp. 127-140, (2007)

11. Eunshil Lee, Jinbeom Kang, Jeahyun Park,

Joongmin Choi, Jaeyoung Yang,

“ScalableWeb News Adaptation To Mobile

Devices Using Visual Block Segmentation

for Ubiquitous Media Services”,

International Conference on Multimedia and

Ubiquitous Engineering(MUE'07), pp. 620-

625, (2007)

12. Kaijian Xu, Daqing Zhang, Manli Zhu, Tao

Gu, “Context-Aware Content Filtering &

Presentation for Pervasive & Mobile

Information Systems”, International

Conference on Ambient MEdia and Systems

and Workshops, Article. 20, (2008)

13. Rong Pan, Huiqin Wei, Shan Wang,

Chenguang Luo, “Auto-adaptation of Web

Content: Model and Algorithm”, IET 2nd

International Conference on Wireless,

Mobile and Multimedia Networks, pp. 507-

511, (2008)

14. Jinlin Chen, Baoyao Zhou, Jin Shi,

“Function-Based Object Model Towards

Website Adaptation”, International World

Wide Web Conference, pp. 587-596, (2001)

15. Jakob Nielsen, "Usability Inspection

Methods", CHI’95 Mosaic of Creativity, pp.

377-378, (1995)

16. Kjeldskov,J., GRAHAM, C., Pedell, S.,

Davies, J., Vetere, F., Howard, S. and

Balbo.: Evaluating the Usability of a Mobile

Guide: a Comparison of Four Different

Approaches. Journal of Behaviour and

Information Technology, vol. 24, no. 1, pp.

51-65, (2005)

17. George Buchanan, Gary Marsden, Michael

Pazzani.: Improving Mobile Internet

Usability. Tenth International World Wide

Web Conference, Hong Kong, ACM Press,

pp. 673-680, (2001)

18. Skweezer, http://www.skweezer.com

19. Aditya Gupta, Anuj Kumar, Mayank,

V.N.Tripathi, S.Tapaswi, "Mobile Web:

Web Manipulation for Small Displays using

Multi-level Hierarchy Page Segmentation",

International Conference on Mobile

Technology, Application & Systems , pp.

599-606, (2007)

670


Documents

Flexi-adaptor; An Automated Web Content Adaptation for Mobile