WO2020139075A1

WO2020139075A1 - A system and method with improvement in converting unresponsive web pages to a responsive web design

Info

Publication number: WO2020139075A1
Application number: PCT/MY2019/050130
Authority: WO
Inventors: Hishamadie Bin AHMAD; Sharipah Binti Setapa; Saliza Binti HASAN; Mohammad Fairus Bin KHALID; Dr. Hong Hoe ONG
Original assignee: Mimos Bhd
Current assignee: Mimos Bhd
Priority date: 2018-12-26
Filing date: 2019-12-26
Publication date: 2020-07-02
Anticipated expiration: 2021-06-26
Also published as: MY190931A

Abstract

The present invention relates to a system and method for improving conversion of unresponsive web pages to responsive web design. The present invention particularly improves the conversion of unresponsive web pages to responsive web design dynamically by utilizing at least one track module (104) in communication with at least one machine readable device (106), at least one global storage (102) for storing a plurality of views and at least one queuing storage (108) for storing potential layout based on parameters in the machine readable device (106) and user behavior at real time. The queuing storage (108) further communicates with at least one unwanted layout storage (110) for storing a plurality of unwanted layouts. The present invention also utilizes elastic hierarchy for identifying potential layout to be used as web page design on respective machine readable device and the layout with highest elastic hierarchy percentage score will be used as layout design for the web page.

Description

A SYSTEM AND METHOD WITH IMPROVEMENT IN CONVERTING UNRESPONSIVE WEB PAGES TO A RESPONSIVE WEB DESIGN

FIELD OF INVENTION

The present invention relates to a system and method for improving conversion of unresponsive web pages to responsive web design, RWD. In particular, the present invention provides a dynamic conversion based on framework of layout to match with device parameters and user behavior when browsing the web page using preferred device. BACKGROUND OF INVENTION

Most individuals spent excessive time accessing the Internet either through mobile phones, tablet or a desktop computer. There are currently 1.86 billion smartphone users and it is projected to increase to 2.87 billion users in 2020 (Statista, 2018). A responsive design framework of a website is of utmost importance in providing users with the best experience while browsing the website regardless of any device.

A responsive web design, RWD enables a web page to render web page content on various devices despite having different screen size and resolution. In contrast, a non-responsive web design is a static framework whereby the web page is designed to be rendered for a specific device screen resolution and size. The non-responsive web design lacks in rendering the web page to fit well in variation of devices with different screen sizes. However, if a user is browsing through a web page which was designed using non- responsive web design framework, the user may be able to view the replica of the web page as designed yet the web page content will be unreadable and/or unusable.

Therefore, it is important to convert a website using a non-responsive web design into RWD to cater for higher number of visitors and high demand of web traffic. In such situation, website developers are required to re-develop the website from scratch to enable conversion of the existing non-responsive web pages to RWD. Moreover, converting non-responsive web using currently available mechanism will only permit a single layout design per conversion. Therefore, the current conversion process is time consuming and requires tedious effort to ensure that the web is responsive when being viewed on different devices or different screen sizes.

United States of America Patent No. US 8621422 B1 (hereinafter referred to as the US 422 B1 Patent) entitled“Environment for Responsive Graphical Designs" having a filing date of 15 August 2013 (Applicant: Axure Software Solutions Inc ) discloses tools and methods for development and specification of a responsive graphical design. The US 422 B1 Patent does not provide automatic dimensioning of a web layout design. Further the US 422 B1 also does not disclose analysis of possible criteria for matching in generating responsive web design.

United States of America Patent No. US 7970862 B2 (hereinafter referred to as the US 862 B2 Patent) entitled “Web Services Response Templates” having a filing date of 10 December 2009 (Applicant: International Business Machines Corp) discloses generating a template schema based on an information model. Moreover, the US 862 B2 Patent only collects subset of web service data specified in the customized request template by user. The US 862 B2 Patent provides customize request template based on requirements of a requestor. United States of America Patent Publication No. US 20170031877 A1 (hereinafter referred to as the US 877 Publication) entitled“Web Page Design System" having a filing date of 27 July 2015 (Applicant; ADP LLC) discloses system and method for designing a web page. The US 877 A1 Publication utilizes data processing system for generating metadata for a web page based on a user input selecting a group of the objects for the web page. However, the US 877 A1 Publication does not disclose a generation of responsive web design.

As outlined above, various systems and methods have been developed to provide conversion of a non-responshze web page to a responsive web design, RWD. However, it is desirable to provide an improved system and method for providing dynamic conversion of unresponsive web pages to responsive web design.

SUMMARY OF INVENTION

The present invention relates to a system and method for improving conversion of unresponsive web pages to responsive web design* RWD, In particular, the present invention provides a dynamic conversion based on framework of layout to match with device parameters and user behavior when browsing the web page using preferred device^

One aspect of the invention provides that a system (100) for converting unresponsive web pages to responsive web design comprises at least one track module (104) for tracking a user behavior, identifying a web page specification, negotiating menu layout in the web page specification for automated dimensioning of web layout and creating elastic hierarchy and rule.

The track module (104) is in communication with-, at least one machine readable device (106) for observing and obtaining the user behavior based on device parameters in the machine readable device (106); at least one global storage (102) for storing a plurality of views; at least one queuing storage (108) for storing potential layout based on the device parameters in the machine readable device (106) and the user behavior at real time; and transferring all unwanted layouts received from the track module (104) to at least one unwanted layout storage (110); and at least one unwanted layout storage (110) for storing a list of unwanted layouts (108).

A further aspect of the invention provides that the web page specification comprises rule, layout, menu layout and the device parameter.

Yet another aspect of the invention provides that the device parameters comprises the machine readable device (106) screen size, orientation, resolution, color capability, and platform.

Another aspect of the invention provides that a method (200) for converting unresponsive web pages to a responsive web design comprising steps of observing and collecting a web page specification (202); creating a plurality of storages for storing a plurality of layouts (204); creating an elastic hierarchy for each layout for updating at least one machine readable device specification for comparing information stored in the storages against information obtained in the machine readable device (206); modifying a layout dynamically and automatically to match device parameters (208); and distributing the layout to the machine readable device based on the device parameters (210). Creating an elastic hierarchy for each layout for updating at least one machine readable device specification for comparing information stored in the storages against information obtained in the machine readable device (206) further comprising steps of (500) switching possible device parameters when a plurality of responsive layouts are queried by a user (502); observing the web page criteria for identifying and updating the web page criteria list (504); analyzing the web page responsiveness based on the web page criteria (506); creating a threshold and classifying the web page criteria into the elastic hierarchy percentage (508); comparing the web page criteria against the web page responsiveness to determine the elastic hierarchy percentage (510); and determining if the elastic hierarchy requires an update (512); if the elastic hierarchy does not require an update (512a); identifying problems to match the machine readable device screen size or a web browser with potential layouts (514); selecting the web page criteria with the highest elastic hierarchy percentage score (516); providing prediction of screen or the layout size for next queue (518); and if the elastic hierarchy requires an update (512b); reiterating step 502, 504, 506, 508 and, 510.

A further aspect of the invention provides that observing and collecting a web page specification (202) further comprising steps of (300); identifying type of the machine readable device to be used for browsing the web page to identify a suitable menu layout and the web page criteria based on the machine readable device (302); inputting the machine readable device with identified menu layout, the web page criteria and the device parameters(304); and determining suitable size of the layout based on the device parameters(306); if the layout size is relevant to the device parameters (306a); storing the device parameters of each respective machine readable device in at least one global storage (308); and creating at least one queuing storage and at least one unwanted layout storage (310); and if the layout size is not relevant to the device parameters (306b); invoking new template to adapt with the device parameters for creating potential layouts (312); and identifying suitable layout scale to suits the device parameters (314); and reiterating step 302, 304 and 306.

Yet another aspect of the invention provides that creating a plurality of storages for storing a plurality of layouts (204) further comprising steps of (400) obtaining and selecting the plurality of layouts with various views and angles to match respective device parameters through at least one track module (402); positioning the layouts in various views and angles to obtain a higher matching value between various preference layouts and comparing the same against the machine readable device (404); determining whether the layouts are required to be rearranged for obtaining potential views and angles for browsing the web page (406); and if the layouts are required to be rearranged (406a); identifying suitable layout and position based on the user behavior (408); and utilizing identified suitable layout with optimum viewing as the layout in respective machine readable device (410); and if the layouts are not required to be rearranged (406b); utilizing existing layout in the queuing storage (412); and proceeding with further matching through the queuing storage to identify suitable layout with optimum view (414).

Still another aspect of the invention provides that modifying a layout dynamically and automatically to match the device parameters (208) further comprising steps of (600)· retrieving the device parameters and the user behavior as inputs (602); and determining if inputs are to be as a benchmark for preparing the layout (604); if inputs are determined as the benchmark (604a); querying and selecting normal scale layout based on the user preference from the queuing storage (606); and if inputs are not determined as a benchmark (604b); invoking the user preference for matching the machine readable device dynamically

(608); identifying type of menu layout based on the elastic hierarchy percentage (610); determining if type of menu layout requires an update (612); if type of menu layout does not requires an update (612a); utilizing existing potential layout from the queuing storage (614); and ff type of menu layout requires and update (612b); reiterating step 602, 604, 608 and 610.

Another aspect of the invention provides that distributing the layout to the machine readable device based on the device parameters further comprising steps of (700) distributing highest priority layout to respective machine readable device based on the device parameters (702); and determining if respective machine readable device is to be notified when highest priority layout is used (704); if respective machine readable device is to be notified (704a); displaying highest priority layout on respective machine readable device (706); and if respective machine readable device is not to be notified due to the elastic hierarchy does not match the device parameter and the layout is failed to be distributed (704b); analyzing the device parameters of the respective machine readable device (708); and reiterating step 702.

The present invention consists of features and a combination of parts hereinafter fully described and illustrated in the accompanying drawings, it being understood that various changes in the details may be made without departing from the scope of the invention or sacrificing an of the advantages of the present Invention. BRIEF DESCRIPTION OF ACCOMPANYING DRAWINGS

To further clarify various aspects of some embodiments of the present invention, a more particular description of the invention will be rendered by references to specific embodiments thereof, which are illustrated in the appended drawings. It is appreciated that these drawings depict only typical embodiments of the invention and are therefore not to be considered limiting of its scope. The invention will be described and explained with additional specificity and detail through the accompanying drawings.

Figure 1.0 illustrates a general system architecture of the present invention to improve conversion of unresponsive web pages to responsive web design.

Figure 2.0 is a flowchart illustrating a general methodology to improve conversion of unresponsive web pages to responsive web design. Figure 3.0 is a flowchart illustrating steps involved in observing and collecting web page specification.

Figure 4.0 is a flowchart illustrating steps involved in creating a plurality of storages for storing a plurality of layouts.

Figure 4.0a illustrates preference layouts which are grouped as Group A, B, C and D,

Figure 5.0 is a flowchart illustrating steps involved in creating elastic hierarchy for each layout.

Figure 5.0a illustrates an example of preference layout group being assigned to respective machine readable device through prediction.

Figure 6.0 is a flowchart illustrating steps involved in modifying a layout dynamically and automatically to match device parameters.

Figure 7.0 is a flowchart illustrating steps involved in distributing the layout to machine readable device based on device parameters. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

The present invention relates to a system and method for improving conversion of unresponsive web pages to responsive web design, RWD. In particular, the present invention provides a dynamic conversion based on framework of layout to match with device parameters and user behavior when browsing a web page using preferred device. Hereinafter, it is to be understood that limiting the description to the preferred embodiments of the invention is merely to facilitate discussion of the present invention and it is envisioned without departing from the scope of the appended claims. Reference is first made to Figure 1.0. Figure 1.0 is a general system architecture for improving conversion of an unresponsive web page to responsive web design, RWD. As illustrated in Figure 1.0, the system (100) for improving conversion of the unresponsive web pages to RWD utilizes at least one track module (104) for tracking a user behavior, identifying a web page specification, negotiating menu layout in the web page specification for automated dimensioning and creating elastic hierarchy and rule. The track module (104) communicates with at least one global storage (102) for storing layouts of the web page. The track module (104) further communicates with at least one machine readable device (106) for observing and obtaining the user behavior with device parameters whereby the machine readable device includes a smartphone, a tablet, a desktop computer, a notebook or any other electronic device with capability to view the web page through a web browser.

Further, the track module (104) also communicates with at least one queuing storage (108) for storing potential layouts based on device parameters in the machine readable device (106) and the user behavior at real time obtained from the track module (104). The queuing storage (108) also transfers a list of unwanted layouts received from the track module (104) to at least one unwanted layout storage (110). The unwanted layout storage (110) stores the list of unwanted layouts received from the track module (104) through the queuing storage (108). Reference is now made to Figure 2.0. Fig 2.0 is a flowchart illustrating a general methodology for improving conversion of the unresponsive web page to RWD. As Illustrated in Figure 2.0, the method (200) to improve the conversion of the unresponsive web page to RWD is first initiated by observing and collecting the web page specification (202) whereby the web page specification includes web page criteria, web page rule, webpage layout and the device parameters. Thereafter, a plurality of storages including the global storage (102), the queuing storage (108) and the unwanted layout storage (110) are created for storing a plurality of layouts (204)x Thereafter, elastic hierarchy are created for each layout to update new machine readable device specification for comparing information stored in the storages with information obtained from the machine readable device (206). Further, layouts are modified dynamically and automatically to match the device parameters (208). Thereafter, the track module (104) distributes respective layout to specified machine readable device (106) based on the device parameters (210). Step 202, 204, 206, 208, and 210 will be described in detail in the following embodiments.

Reference is now made to Figure 3.0. Figure 3.0 is a flowchart illustrating steps involve in observing and collecting the web page specification (202). As illustrated In Figure 3.0, observing and collecting the web page specification is first initiated by identifying type of machine readable device (106) that will be used to browse the web pages in order to identify a suitable menu layout and the web page criteria for the machine readable device (106) (302). The menu layout and the web page criteria may be identified for more than one machine readable device (106), The menu layout is generally determined to suit the overall content of the web page whereby the menu layout provides navigations for the user to browse through the web page. The web page may contain texts, pictures, links and advertisements which are not related to the original content of the web page. Therefore, the web page content is separated into several classes such as main content, advertisements and links to the other web pages to ease the identification of the web page layout.

Thereafter, the machine readable device (106) is inputted with the suitable menu layout, the web page criteria, and the device parameters (304). The device parameters may include screen size, orientation, resolution, color capability, and platform used in the machine readable device (106) such as Windows, Android, iOS, macOS and etc. Once the menu layout, the web page criteria and the device parameters have been inputted into the machine readable device (106), the suitable layout size is determined based on the device parameters (306). The device parameters are stored in the global storage (102) (308), if the layout size is relevant to the device parameters of the machine readable device (106) (306a). Subsequently the queuing storage (108) and the unwanted layout storage (110) are created (310). However, if the layout size is not relevant to the device parameter (306b), the user has to invoke a new template to adapt with the device parameters for creating potential layout (312). Thereafter the suitable layout scale is identified to suit the device parameters and subsequently reiterates step 302 until 306.

Reference is now made to Figure 4.0 and Figure 4.0a. Figure 4.0 is a flowchart illustrating further steps involves in creating the plurality of storage for storing plurality of layouts (204) while Figure 4.0a illustrates example of preference layouts. First, as illustrated in Figure 4.p, the plurality of layouts with various views and angles are obtained and selected to match respective device parameter through the track module (104) (402). Thereafter, the layouts are positioned in the machine readable device (106) in various views and angles to obtain a higher matching value between various preference layouts and comparing the same against the machine readable device (106) (404).

Subsequently, the preference layouts are determined whether rearrangement is to be made in order to obtain potential views and angles of the web page during browsing the web page through respective machine readable device (106) (406).

If the layout rearrangement is required (406a), the step is followed by identifying suitable layouts and positions based on the user behavior of browsing the web page in the respective machine readable device (106) (408).

Subsequently, identified layout with optimum viewing is used in respective machine readable device (106) (410). However, if the layout rearrangement is not required (406b), the step is followed by utilizing existing layouts in the queuing storage (108) (412). Thereafter, further matching between the layouts and the machine readable device (106) is made by first grouping layouts having close relation through the queuing storage (108) to identify suitable layout with optimum view (414).

Reference is now made to Figure 4.0a whereby Figure 4.0a illustrates preference layouts which are grouped as group A, B, C and D. The layouts are grouped based on comparison of the views and angles with the machine readable device (106) whereby the layout having closer relation to the other layouts are grouped together.

Table 1 and Table 1a illustrates example of how preference layouts are grouped together based on the matching value with the desktop computer as the machine readable device (106).

Table 2 and Table 2a illustrates example of how preference layouts are grouped together based on the matching value with the smartphone as the machine readable device.

10

As Illustrated in Table 1 and Table 2, layouts 1 and 2 are grouped as A, layouts 3 and 4 are grouped as B, layouts 6 and 7 are grouped as C and layouts 8 and 9 are grouped as D. In general, the layouts are grouped accordingly based on the similarities on the menu layout and the web page criteria for the machine readable device.

Once the layouts are grouped accordingly, the matching values for each group are identified. As illustrated in Table 1a, the layouts from Group A have the highest matching value for the desktop computer, while the layouts from Group C and D do not match the desktop computer. Therefore, Group A has the highest priority layout for desktop computer. Further, in Table 2a, the layouts in Group B have the highest matching value while the layouts from Group D have the second highest matching value for the smartphone. However, the layouts from Group A do not match the smartphone. Therefore, Group B as the highest priority layout for the smartphone

Reference is now made to Figure 5.0. Figure 5.0 is a flowchart illustrating further steps involved in creating elastic hierarchy for each layout to update new machine readable device specification to compare information stored in the storages with information obtained from the machine readable device (106)(206). As illustrated in Figure 5.0, creating elastic hierarchy for each layout to update new machine readable device specification is first initiated by switching possible device parameters when a plurality of responsive layouts are queried by the user (502). Thereafter, the web page criteria are observed for identifying and updating the web page criteria list (504), The web page criteria to be observed may include drop down menus, animations, image maps, general texts, and text with links. If any other criteria are observed, it will be updated in the criteria list.

Subsequently, web page responsiveness is analyzed based on the possible web page criteria (506) by first creating a threshold and classifying criteria into elastic hierarchy percentage (508). Further, the web page criteria and the web page responsiveness are compared to determine the percentage of elastic hierarchy (510).

The percentage score of elastic hierarchy is as follows:

0%- 10% = not relevant (only the header or unrelated contain is displayed)

11 %-29% = null (only the header with certain text is displayed)

30%- 39% = minor relation (relevant content is displayed together with not related

content)

40%- 50% = potential relation (provides related content, but required to scroll should the content provided are not clear)

50%-70% = valid (clear views of content, yet required to scroll intermittently to view the content)

70%-80% = match view (content is matched without need to scroll)

81 %-100% = optimal view (content can be viewed without having to scroll).

Upon comparing the web page criteria and the web page responsiveness, the elastic hierarchy is determined whether it requires an update (512). If the elastic hierarchy does not require an update (512a), the subsequent step is followed by identifying problems encountered to match the layout with the machine readable device screen size or the web browser. Further, the web page criteria with the highest elastic hierarchy percentage score is selected (516) and a prediction of screen or the layout size is provided to the queuing storage (108) based on the elastic hierarchy percentage score and the respective machine readable device (106) (518), However, if the elastic hierarchy requires an update (512b), the steps will be reiterated from step 502 until step 512, Reference is now made to Figure 5.0a, Figure 5.0a is an example of the preference layout group being assigned to the respective machine readable device (106) through prediction. Layouts from Group A are B are assigned to the desktop computer and the tablet accordingly as the layouts from group A and B match the screen size of the respective machine readable device (106). However, the smartphone does not matched with layouts from group C. Thus, the elastic hierarchy will be updated until the smartphone find the layout that matches its screen size.

Reference is now made to Figure 6.0. Figure 6.0 is a flowchart illustrating further steps involves in modifying the layout dynamically by automatically applying the preference layout to the web page (208). As illustrated in Figure 6,0, modifying the layout dynamically is first initiated by retrieving the device parameters and the user behaviors as an input (602). Thereafter, the input fe further determined to be a benchmark for preparing various responsive layout of the web page (604). If the input is determined as a benchmark (604a), the steps is followed by querying and selecting normal scale layout based on the user preference from the queuing storage (108)(606).

However, if the input is not determined as a benchmark (604b), the subsequent step is followed by invoking the user preference to dynamically match the machine readable device (106) (608). Further, type of menu layout based on the elastic hierarchy percentage is identified (610) to improve selection of layout to be used for the respective machine readable device (106). Thereafter, the type of menu layout is further determined whether it requires an update (612). If the type of menu layout does not require an update (612a), existing potential layout from the queuing storage (108) is utilized as the layout for the respective machine readable device (106). If the type of menu layout requires an update (612b), steps 602 until 604 will be reiterated.

Reference is now made to Figure 7.0. Figure 7.0 is a flowchart illustrating further steps involved in distributing respective layout to the machine readable device (106) based on the device parameters (210). As illustrated in Figure 7.0, distributing respective layout is first initiated by distributing highest priority layout to the respective machine readable device (106) based on the device parameter (702) whereby the layout with highest priority layout is the layout with the highest elastic hierarchy percentage score. Thereafter, the machine readable device (106) may be notified if the highest priority layout is being used as the layout (704). If the machine readable device (106) is notified when the highest priority layout is used as the layout (704a), the machine readable device (106) displays the highest priority layout (706). However, if the machine readable device (106) is not required to be notified when the highest priority layout is used as the layout (504b), the step is followed by analyzing the device parameters of the respective machine readable device (106) (708) and subsequently reiterates step 702.

The present invention relates to a system and method for improving conversion of unresponsive web pages to responsive web design, RWD. The present invention particularly improves the conversion of unresponsive web pages to RWD dynamically by utilizing at least one track module (104) in communication with at least one machine readable device (106), at least one global storage (102) for storing a plurality of views and at least one queuing storage (108) for storing potential layout based on parameters in the machine readable device (106) and the user behavior at real time. The queuing storage (108) further communicates with at least one unwanted layout storage (110) for storing a plurality of unwanted layouts. The present invention also utilizes elastic hierarchy for identifying potential layout to be used as web page design on respective machine readable device (106) which may include a tablet, a desktop computer, a smartphone, a laptop or etc. The layout with highest elastic hierarchy percentage score will be used as layout design

Unless the context requires otherwise or specifically stated to the contrary, integers, steps or elements of the invention recited herein as singular integers, steps or elements clearly encompass both singular and plural forms of the recited integers, steps or elements.

Throughout this specification, unless the context requires otherwise, the word“comprise", or variations such as“comprises" or“comprising", will be understood to imply the inclusion of a stated step or element or integer or group of steps or elements or integers, but not the exclusion of any other step or element or integer or group of steps, elements or integers. Thus, in the context of this specification, the term“comprising” is used in an inclusive sense and thus should be understood as meaning“including principally, but not necessarily solely",

Claims

1. A system (100) for converting unresponsive web pages to responsive web design comprises:

at least one track module (104) for tracking a user behavior, identifying a web page specification, negotiating menu layout in the web page specification for automated dimensioning of web layout and creating elastic hierarchy and rule,

characterized in that

the track module (104) is in communication with:

at least one machine readable device (106) for observing and obtaining the user behavior based on device parameters in the machine readable device

(106);

at least one global storage (102) for storing a plurality of views; at least one queuing storage (108) for storing potential layout based on the device parameters in the machine readable device (106) and the user behavior at real time, and transferring all unwanted layouts received from the track module (104) to at least one unwanted layout storage (110); and at least one unwanted layout storage (110) for storing a list of unwanted layouts (108).

2. The system (100) according to claim 1 , wherein the web page specification comprises rule, layout, menu layout and the device parameter.

3. The system (100) according to claim 1 , wherein the device parameters comprises screen size, orientation, resolution, color capability, and platform used in the machine readable device (106).

4. A method (200) for converting unresponsive web pages to a responsive web design comprising steps of:

observing and collecting a web page specification (202);

creating a plurality of storages for storing a plurality of layouts (204);

creating an elastic hierarchy for each layout for updating at least one machine readable device specification for comparing information stored in the storages against information obtained in the machine readable device (206);

modifying a layout dynamically and automatically to match device parameters (208); and distributing the layout to the machine readable device based on the device parameters (210),

characterized in that the step of

creating an elastic hierarchy for each layout for updating at least one machine readable device specification for comparing information stored in the storages against information obtained in the machine readable device (206) further comprising steps of (500):

switching possible device parameters when a plurality of responsive layouts are queried by a user (502);

observing the web page criteria for identifying and updating the web page criteria list (504);

analyzing web page responsiveness based on the web page criteria

(506);

creating a threshold and classifying the web page criteria into elastic hierarchy percentage (508);

comparing the web page criteria against the web page responsiveness to determine the elastic hierarchy percentage (510); and

determining if the elastic hierarchy requires an update (512), if the elastic hierarchy does not require an update (512a);

identifying problems to match the machine readable device screen size or a web browser with potential layouts (514); selecting the web page criteria with the highest elastic hierarchy percentage score (516); and

providing prediction of screen or the layout size for next queue (518); and

if the elastic hierarchy requires an update (512b), reiterating step 502, 504, 506, 508 and, 510.

5, The method (200) according to claim 4, wherein observing and collecting a web page specification (202) further comprising steps of (300):

identifying type of the machine readable device to be used for browsing the web page to identify a suitable menu layout and the web page criteria based on the machine readable device (302);

inputting the machine readable device with identified menu layout, the web page criteria and the device parameters (304); and determining suitable size of the layout based on the device parameters(306),

if the layout size is relevant to the devfce parameters (306a):

storing the device parameters of each respective machine readable device in at least one global storage (308); and creating at least one queuing storage and at least one unwanted layout storage (310); and

if the layout size is not relevant to the device parameters (306b): invoking new template to adapt with the device parameters for creating potential layouts (312);

identifying suitable layout scale to suits the device parameters (314); and

reiterating step 302, 304 and 306.

6. The method (200) according to claim 4, wherein creating a plurality of storages for storing a plurality of layouts (204) further comprising steps of (400):

obtaining and selectihg the plurality of layouts with various views and angles to match respective device parameters through at least one track module (402);

positioning the layouts in various views and angles to obtain a higher matching value between various preference layouts and comparing the same against the machine readable device (404); and

determining whether the layouts are required to be rearranged for obtaining potential views and angles for browsing the web page (406),

if the layouts are required to be rearranged (406a):

identifying suitable layout and position based on the user behavior (408); and

utilizing identified suitable layout with optimum viewing as the layout in respective machine readable device (410): and

if the layouts are not required to be rearranged (406b):

utilizing existing layout in the queuing storage (412); and

proceeding with further matching through the queuing storage to identify suitable layout with optimum view (414).

7. The method (200) according to claim 4, wherein modifying a layout dynamically and automatically to match the device parameters (208) further comprising steps of (600);

retrieving the device parameters and the user behavior as inputs (602); and determining if inputs are to be as a benchmark for preparing the layout (604). if inputs are determined as the benchmark (604a):

querying and selecting normal scale layout based on the user preference from the queuing storage (606); and

if inputs are not determined as the benchmark (604b):

invoking the user preference for matching the machine readable device dynamically (608);

identifying type of menu layout based on the elastic hierarchy percentage (610);

determining if type of menu layout requires an update (612),

if type of menu layout does not requires an update (612a), utilizing existing potential layout from the queuing storage (614); and

if type of menu layout requires an update (612b), reiterating step 602, 604, 608 and 610.

8. The method (200) according to claim 4, wherein distributing the layout to the machine readable device based on the device parameters (210) further comprising steps of (700):

distributihg highest priority layout to respective machine readable device based on the device parameters (702); and

determining if respective machine readable device is to be notified when highest priority layout is used (704),

if respective machine readable device is to be notified (704a), displaying highest priority layout on respective machine readable device (706); and

if respective machine readable device is not to be notified (704b): analyzing the device parameters of the respective machine readable device (708); and

reiterating step 702.