WO2013005218A1

WO2013005218A1 - A simplified system for website conversion & website design for mobile & hand-held devices

Info

Publication number: WO2013005218A1
Application number: PCT/IN2011/000439
Authority: WO
Inventors: Ruchir PUNJABI
Original assignee: Langoor Digital Pvt Ltd
Priority date: 2011-07-01
Filing date: 2011-07-01
Publication date: 2013-01-10

Abstract

This invention relates to mobile devices, and more particularly to processing existing web pages for mobile device display. The embodiments herein achieve a technique for automatic conversion of existing websites for a mobile interface based on phone and/or browser by providing systems and methods thereof. The present invention transforms the original website to a suitable format so that it may be displayed on mobile devices. It may keep few of the important original contents and images to present an optimum view to the user. Images may be reduced in size by a standard size. Original website is transformed to be displayed on a specific device based on the transformation rule for that specific device.

Description

"A SIMPLIFIED SYSTEM FOR WEBSITE CONVERSION & WEBSITE

DESIGN FOR MOBILE & HAND-HELD DEVICES

FIELD OF INVENTION

[001] This invention relates to mobile devices, and more particularly to processing existing web pages for mobile device display.

BACKGROUND OF INVENTION

[002] Internet is generally comprised of a distributed network of computers, wherein web servers on the network provide web sites that contain pages of information pertaining to various topics, businesses, and/or ventures. Usually websites are designed for viewing on large screens such as display monitors attached to a laptop, desktop computer and so on. However, presently large numbers of users are browsing the internet using their mobile phones. The display of the mobile phone is smaller than the normal viewing area available to viewers. Such a smaller view will result in either the view being disorganized or the user having to scroll across the website in both the horizontal and vertical directions to view the content present on web sites.

[003] Further, the sizes of the display screens of the mobile devices are not uniform. The display screens of the devices may vary from 1.5" to as much as 10" as in the Apple iPad. Further, the way in which each mobile device may display the content present on the web site may also depend on the operating system present on the website and the browser being used, among other factors. Mobile devices also have limited display colors. Text inputting is slower in mobile devices compared to entering text using a full size keyboard. Further, some mobile devices and/or browsers support only vertical scrolling whereas the interfacing options (either keys or the display) varies among devices. The amount of data that can be stored in a mobile device is also limited. This result in a variety of ways, in which content may be accessed, displayed and interacted with on each of the mobile devices.

[004] Currently, there are web sites which are created for display on mobile devices. However, the creation of such web sites is manual, whereby a developer sits and manually modifies each portion of the website for optimum viewing of the content on the web page for viewing. It is very laborious if the developer has to take into account the probable combinations of type of mobile devices, operating systems and browsers.

[005] Further, there are automated services available online, which convert a given website for display on mobile devices. However, such websites operate by either removing all the images and/or other media present on, a website or by removing text from the website. This may result in vital text, images and/or media being removed from websites. Further, the website developer does not have any control over the output, i.e., he cannot edit the converted website.

SUMMARY OF INVENTION

[006] Embodiments herein disclose a method for converting a web page into a format suitable for viewing on a display device, the method comprising of a server fetching information regarding a web page from a web server; the server creating style sheets for the web page, based on characteristics of the display device and browser used by the display device. The style sheet is at least one of a Cascading Style Sheet (CSS); an Extensible Stylesheet Language (XSL); and a Javascript (JS) file. The characteristics of the display device are at least one of screen resolution of the display device; and operating system of the display device. The method further comprises of the server displaying the web page modified using the style sheet to at least one administrator of the web page; and the server modifying the style sheet based on changes made by the at least one administrator to the web page. The method further comprises of the server storing the style sheet in a database. The method further comprises of the server receiving a request from a user for the web page from the web server; the server fetching the web page from the web server; the server fetching style sheet corresponding to display device of the user from the database; and the server modifying the web page based on the style sheet. The server receives characteristics of display device of the user from the web server. The server receives characteristics of display device of the user from display device of the user. The server delivers the modified web page to the user.

[007] Further, disclosed herein is a server comprising at least one means configured for fetching information regarding a web page; creating style sheets for the web page, based on characteristics of the display device and browser used by the display device. The server is configured for fetching information regarding the web page from a web server. The server is configured for creating the style sheet, where the style sheet is at least one of a Cascading Style Sheet (CSS); an Extensible Stylesheet Language (XSL); and a Javascript (JS) file. The server further comprises at least one means configured for displaying the web page modified using the style sheet to at least one administrator of the web page; and modifying the style sheet based on changes made by the at least one administrator to the web page. The server further comprises at least one means configured for storing the server storing in a database. The server further comprises at least one means configured for receiving a request from a user for the web page; fetching the web page from the web server; fetching style sheet corresponding to display device of the user from the database; and modifying the web page based on the style sheet. The server is configured for receiving the request from the web server. The server is configured for receiving characteristics of display device of the user from the web server. The server is configured for receiving characteristics of display device of the user from display device of the user.

[008] These and other aspects of the embodiments herein will be better appreciated and understood when considered in conjunction with the following description and the accompanying drawings, it should be understood, however, that the following descriptions, while indicating preferred embodiments and numerous specific details thereof, are given by way of illustration and not of limitation. Many changes and modifications may be made within the scope of the embodiments herein without departing from the spirit thereof, and the embodiments herein include all such modifications.

BRIEF DESCRIPTION OF FIGURES

[009] This invention is illustrated in the accompanying drawings, throughout which like reference letters indicate corresponding parts in the various figures. The embodiments herein will be better understood from the following description with reference to the drawings, in which:

[0010] FIG. 1 is a block diagram depicting administrator interaction with webhost, according to embodiments as disclosed herein;

[0011] FIG. 2 is a block diagram depicting retrieval of requested information from webhost, according to embodiments as disclosed herein;

[0012] FIG. 3 is a server, according to embodiments as disclosed herein; W

[0013] FIG. 4 is a flow diagram depicting the process of generating transformed webpage as per user defined version, according to embodiments as disclosed herein; and

[0014] FIG. 5 is a flow diagram depicting the process of delivering the modified webpage to a user, according to embodiments as disclosed herein.

DETAILED DESCRIPTION OF INVENTION

[0015] The embodiments herein and the various features and advantageous details thereof are explained more fully with reference to the non-limiting embodiments that are illustrated in the accompanying drawings and detailed in the following description. Descriptions of well-known components and processing techniques are omitted so as to not unnecessarily obscure the embodiments herein. The examples used herein are intended merely to facilitate an understanding of ways in which the embodiments herein may be practiced and to further enable those of skill in the art to practice the embodiments herein. Accordingly, the examples should not be construed as limiting the scope of the embodiments herein.

[0016] The embodiments herein achieve a technique for automatic conversion of existing websites for a mobile interface based on phone and/or browser by providing systems and methods thereof. Referring now to the drawings, and more particularly to FIGS. 1 through 4, where similar reference characters denote corresponding features consistently throughout the figures, there are shown preferred embodiments.

[0017] The present invention transforms the original website to a suitable format so that it may be displayed on mobile devices. It may keep few of the important original contents and images to present an optimum view to the user. Images may be reduced in size in size to fit that of a mobile device display. Original website is transformed to be displayed on a specific device based on the transformation rule for that specific device or that of the screen resolution and browser.

[0018] FIG. 1 is a block diagram depicting the interactions of the web administrator with the server, according to embodiments as disclosed herein. The diagram as depicted comprises of a web administrator 101, an intelligent server 102, a web server 103 and a memory 104. The web administrator 101 may access the intelligent server 102 using any communication enabled device like a computer, laptop, mobile phone, tablet etc. The intelligent server 102 may present a user interface to the web administrator 101, where the user interface may be a graphical user interface or a text based user interface. The web administrator 101 may also access the intelligent server 102 directly; i.e., the web administrator 101 is physically present at the same location as the intelligent server 102. The intelligent server 102 may authorize the web administrator 101 using a suitable means before permitting the web administrator 101 to access the intelligent server 102. If the web administrator 101 is accessing the server 102 for the first time, he may be asked to create an account using a suitable user name and password. Once the web administrator 101 has an account, the web administrator 101 may enter an identification means which will enable the server 102 to identify the website of the web administrator 101. The identification means may be the Uniform Resource locator (URL) of the website, DNS address of the website and so on. The web administrator 101 may also enter the authentication details which will enable the server 102 to fetch all the necessary files and content from the web server 103. Once the server 102 has fetched the information regarding the website from the web server 103, the server 102 extracts the relevant style sheets from the content. The style sheets may be a Cascading Style Sheet (CSS), Extensible Stylesheet Language (XSL), Javascript (JS) files or any other suitable format. The server 102 modifies the style sheets as per the specifications of the mobile device (Operating System (OS), Screen Resolution and so on), browser and so on. The server 102 may ask the web administrator 101 for the specific combinations of device and browsers for which he wants to convert the format his website. The server 102 considers the screen size of the target mobile device in terms of percentages. The server 102 moves all the content to one alignment. The content may be left aligned, right aligned or center aligned. The area of the screen covered by the content is measured in terms of the percentage of the total screen area covered by the content. The measured percentage is scaled in terms of the screen size of the mobile device and is added to the stylesheet. For example, if content on a page when displayed on a normal screen covers 60% of the screen, the server 102 scales the content so that the content will cover 60% of the screen, when the same content is displayed on a mobile device. Similarly, images present within the content are measured in terms of the total window area covered by the image in a browser and the image is scaled by the server 102 accordingly, so as to display on the mobile device. The server 102 may also convert the website to all the-available combinations by default. The required amendments which may be required to done to the style sheet may be stored in the memory 104. The amendments may be present for each of the probable combinations and also for each of the most commonly used types of style sheets. Once the style sheets have been created, the server 102 presents the modified web sites to the web administrator 101. The web administrator 101 may modify them using a UI directly on the website or may modify the style sheets directly using a suitable means like an editor and so on. The web administrator 101 may also approve the modified web sites without any modifications. Once the server 101 receives the approval of the web administrator 101, the server 102 may store the style sheets in the memory 104. The memory .104 may be present within the server 102 or present externally but connected to the server 102 with an appropriate means. The web administrator 101 further receives a detection module 105, which is placed by the web administrator 101 in the web server. [0019] FIG. 2 is a block diagram depicting retrieval of a web site, according to embodiments as disclosed herein. FIG. 2 comprises of a mobile device 201, the intelligent server 102, the web server 103 and the memory 104. A user may enter an address for a website using his mobile device 201. The mobile device 201 may be a mobile phone, a laptop, a PDA, a tablet and so on. The address for a website may be entered in the form of a URL, a DNS address and so on. The user may also request access to a website by clicking on a hyperlink or using some other suitable means. The web server 103, on receiving the request, checks if the user has made the request from a mobile device and if the combination of screen resolution, browser and OS are supported by the intelligent server 102.The web server 103 may check if the user has made the request from a mobile device and if the combination of screen resolution, browser and OS are supported by the intelligent server 102 using the detection module 105. If the web server 103 detects that the combination of screen resolution, browser and OS used by the mobile device is not supported by the intelligent server 102, then the web server 103 delivers the website, as present with the web server 103 to the mobile device 201. As per the style sheet, the server 102 scales the content in terms of the screen size of the mobile device. Similarly, images are scaled by the server 102 accordingly in terms of the total window area covered by the image in a browser. If the combination of screen resolution, browser and OS are supported by the intelligent server 102, then the web server 103 directs the request from the user to the intelligent server 102. The intelligent server 102 on receiving the request fetches the style sheet corresponding to the specifications of the mobile device (OS, screen resolution, browser and so on) from the memory 104. The specifications of the mobile device 201 may be detected by the intelligent server 102. The specifications of the mobile device may also be informed by the detection module 105 to the intelligent server 102. The intelligent server 102 modifies the website as per the style sheet and delivers the website to the user.

[0020] FIG. 3 depicts an intelligent server, according to embodiments as disclosed herein. The web administrator 101 may access the intelligent server 102 using a user interface 301, where the user interface may be a graphical user interface or a text based user interface. The controller module 304 may authorize the web administrator 101 using a suitable means before permitting the web administrator 101 to access the intelligent server 102. If the web administrator 101 is accessing the server 102 for the first time, the controller module 304 may ask the administrator 101 to create an account using a suitable user name and password via the user interface 301. Once the web administrator 101 has created an account, the web administrator 101 may enter an identification means in the user interface 301 which will enable the controller module 304 to identify the website of the web administrator 101. The controller module 304 may identify the website using a suitable identification like the Uniform Resource locator (URL) of the website, DNS address of the website and so on. The web administrator 101 may also enter the authentication details which will enable the controller module 304 to fetch all the necessary files and content from the web server 103. Once the controller module 304 has fetched the information regarding the website from the web server 103, the controller module 304 instructs the code generating engine 302 to extract the relevant style sheets from the content. The , style sheets may be a Cascading Style Sheet (CSS), Extensible Style Sheet Language (XSL), Javascript (JS) files or any other suitable format. The code generating engine 302 modifies the style sheets as per the specifications of the mobile device, browser and so on. On instructions from the code generating engine 302 the controller module 304 may ask the web administrator 101 for the specific combinations of device and browsers for which he wants to convert the format his website. On receiving the information from the web administrator 101, the controller module 304 may pass on the received information to the code generating engine 302. The code generating engine 302 may also convert the website to all the available combinations by default. The required amendments which may be required to done to the style sheet may be fetched from the memory 104. The amendments may be present for each of the probable combinations of mobile device type and browser and also for each of the most commonly used types of style sheets. Once the style sheets have been created, the code generating engine 302 may present the modified web sites to the web administrator 101 via the controller module 304. The modifications, if any, done by the web administrator 101 may be incorporated into the appropriate style sheets by the code generating engine 302. The code generating engine 302 then passes the style sheets onto the controller module 304 which stores the style sheets in the memory 104. In another embodiment herein, the intelligent server 102 may comprise of a memory where at least one of the required amendments and the style sheets may be stored. The code generating engine 302 also creates a detection module 105 and provides it to the web administrator 101. Once the controller module 304 stores the ' stylesheets/data, the stylesheets need to be published to the website with the help of the web administrator 101. In an embodiment herein, the web administrator 101 may be given tracking code or instructions on how to enable the detection on their current website and enable publication of the stylesheets onto the website. In another embodiment herein, a plugin is installed on the website, which enables the controller module 304 to publish the style sheets directly to the website without intervention from the web administrator 101. [0021] The intelligent server 102 receives a request in the form of web address from the user via the web server 103. The controller module 304 in conjunction with the identifier engine 303 identifies the combination of screen resolution, browser and OS used by the mobile device. On identifying the combination of screen resolution, browser and OS used by the mobile device , the controller module 304 fetches the style sheet corresponding to the specifications of the mobile device (OS, screen resolution, browser and so on) from the memory 104. In another embodiment herein, the controller module 304 receives the combination of screen resolution, browser and OS used by the mobile device along with the request from the web server 103. The controller module 304 modifies the website as per the style sheet and delivers the website to the user.

[0022] FIG. 4 is a flow chart depicting the process of generating transformed webpage as per user defined version, according to embodiments as disclosed herein. The web administrator 101 enters (401) the website details, including an identification means which will enable the server 102 to identify the website of the web administrator 101. The identification means may be the Uniform Resource locator (URL) of the website, DNS address of the website and so on. The website details may also include the authentication details which will enable the server 102 to fetch all the necessary files and content from the web server 103. The server 102 fetches (402) the information regarding the website from the web server 103 and creates (403) the relevant style sheets based on the content of the web site as per the instructions from the administrator, specifications of the mobile device, browser and so on. The style sheets may be a Cascading Style Sheet (CSS), Extensible Stylesheet Language (XSL), Javascript (JS) files or any other suitable format. The server 102 then presents (404) the modified web sites to the web administrator 101. If the web administrator 101 does not want (405) to modify the website, the server 101 stores (406) the style sheets in the memory 104. If the web administrator 101 wants (405) to modify the website, the web administrator 101 makes (407) modifications using a UI directly on the website or may modify the style sheets directly using a suitable means like a text editor and so on. The server 101 then stores (406) the style sheets in the memory 104. The various actions in method 400 may be performed in the order presented, in a different order or simultaneously. Further, in some embodiments, some actions listed in FIG. 4 may be omitted.

[0023] FIG. 5 is a flow diagram depicting the process of delivering transformed webpage based on device type, according to embodiments as disclosed herein. A user enters (501) an address for a website using his mobile device 201. The address for a website may be entered in the form of a URL, a DNS address and so on. The user may also request access to a website by clicking on a hyperlink or using some other suitable means. The web server 103, on receiving the request, checks (502) if the user has made the request from a mobile device and if the combination of screen resolution, browser and OS are supported by the intelligent server 102. If the web server 103 detects that the combination of screen resolution, browser and OS used by the mobile device is not supported by the intelligent server 102, then the web server 103 delivers (503) the website, as present with the web server 103 to the mobile device 201. If the combination of screen resolution, browser and OS are supported by the intelligent server 102, then the web server 103 forwards (504) the request from the user to the intelligent server 102. The intelligent server 102 on receiving the request, identifies (505) the combination of screen resolution, browser and OS used by the mobile device and fetches (506) the style sheet corresponding to the specifications of the mobile device (OS, screen resolution, browser and so on) from the memory 104. The intelligent server 102 modifies (507) the website as per the style sheet and delivers (508) the website to the user. The various actions in method 500 may be performed in the order presented, in a different order or simultaneously; Further, in some embodiments, some actions listed in FIG. 5 may be omitted.

[0024] The foregoing description of the specific embodiments will so fully - reveal the general nature of the embodiments herein that others can, by applying current knowledge, readily modify and/or adapt for various applications such specific embodiments without departing from the generic concept, and, therefore, such adaptations and modifications should and are intended to be comprehended within the meaning and range of equivalents of the disclosed embodiments. It is to be understood that the phraseology or terminology employed herein is for the purpose of description and not of limitation. Therefore, while the embodiments herein have been described in terms of preferred embodiments, those skilled in the art will recognize that the - embodiments herein can be practiced with modification within the spirit and scope of the embodiments as described herein.

Claims

STATEMENT OF CLAIMS

1. A method for converting a web page into a format suitable for viewing on a display device, said method comprising of

A server fetching information regarding a web page;

Said server creating style sheets for said web page, based on characteristics of said display device and browser used by said display device.

2. The method, as claimed in claim 1, wherein said server fetches information regarding said web page from a web server.

3. The method, as claimed in claim 1, wherein said style sheet is at least one of a Cascading Style Sheet (CSS);

an Extensible Stylesheet Language (XSL); and

a Javascript (JS) file.

4. The method, as claimed in claim 1, wherein characteristics of said display device is at least one of

Screen resolution of said display device; and

Operating system of said display device.

5. The method, as claimed in claim 1, wherein said method further comprises of ·

Said server displaying said web page modified using said style sheet to at least one administrator of said web page; and

Said server modifying said style sheet based on changes made by said at least one administrator to said web page.

6. The method, as claimed in claim 1, wherein said method further comprises of said server storing said style sheet in a database.

7. The method, as claimed in claim 1, wherein said method further comprises of

Said server receiving a request from a user for said web page;

Said server fetching said web page from said web server;

Said server fetching style sheet corresponding to display device of said user from said database; and

Said server modifying said web page based on said style sheet.

8. The method, as claimed in claim 7, wherein said server receives said request from said web server.

9. The method, as claimed in claim 7, wherein said server receives characteristics of display device of said user from said web server.

10. The method, as claimed in claim 7, wherein said server receives characteristics of display device of said user from display device of said user.

11. The method, as claimed in claim 7, wherein said server delivers said modified web page to said user.

12. A server comprising at least one means configured for

fetching information regarding a web page;

creating style sheets for said web page, based on characteristics of said display device and browser used by said display device.

13. The server, as claimed in claim 12, wherein said server is configured for fetching information regarding said web page from a web server.

14. The server, as claimed in claim 12, wherein said server is configured for creating said style sheet, where said style sheet is at least one of

a Cascading Style Sheet (CSS);

an Extensible Stylesheet Language (XSL); and a Javascript (JS) file.

15. The server, as claimed in claim 12, wherein said server further comprises at least one means configured for

displaying said web page modified using said style sheet to at least one administrator of said web page; and

modifying said style sheet based on changes made by said at least one administrator to said web page.

16. The server, as claimed in claim 12, wherein said server further comprises at least one means configured for storing said server storing in a database.

17. The server, as claimed in claim 12, wherein said server further comprises at least one means configured for

Receiving a request from a user for said web page;

Fetching said web page from said web server;

Fetching style sheet corresponding to display device of said user from said database; and

Modifying said web page based on said style sheet.

18. The server, as claimed in claim 17, wherein said server is configured for receiving said request from said web server.

19. The server, as claimed in claim 17, wherein said server is configured for receiving characteristics of display device of said user from said web server.

20. The server, as claimed in claim 17, wherein said server is configured for receiving characteristics of display device of said user from display device of said user.