WO2004031994A1

WO2004031994A1 - Methods for optimizing display and navigation of web contents on wireless devices

Info

Publication number: WO2004031994A1
Application number: PCT/US2003/031052
Authority: WO
Inventors: Guohong Ryan Xu
Original assignee: Embedded Internet Solutions, Inc.
Priority date: 2002-09-30
Filing date: 2003-09-30
Publication date: 2004-04-15
Also published as: AU2003275347A1

Abstract

In one of the many embodiments, a computer implemented method for optimizing layout and display of web data on a reduced screen-size device is provided. The method includes parsing data for a web page, and before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the reduced screen-size device. The method further includes displaying a portion of the data of the web page using the reduced width of the at least one inline element, wherein contents of the at least one inline element are wrapped once the width of the display screen is reached.

Description

METHODS FOR OPTIMIZING DISPLAY AND NAVIGATION OF WEB CONTENTS ON WIRELESS DEVICES

by Inventor Guohong (Ryan) Xu

BACKGROUND OF THE INVENTION

1. Field of the Invention

This invention relates generally to Internet access optimization, and, more particularly, to the dynamic processing and display of Internet web pages on portable web access devices.

2. Description of the Related Art

The growth in computer information technology has spurred the creation of numerous ways to connect with the Internet. The growth in modern day communication technology has given individuals as well as companies and their employees powerful communication tools. These communication tools range from modern telephone systems that provide sophisticated cellular telephones having Internet access capabilities, wireless Internet e-mail accounts by way of portable computers, text pagers, etc. In addition, advanced devices such as personal digital assistants (PDA's) or palm top computers can use wireless communications to connect with the Internet to provide mobile utilization of the Internet. Although these technologies have provided busy business users as well as ordinary persons with affordable avenues for always having access to information and data from around the world, these technologies also necessarily introduce a level of complication.

Although there are millions of WWW pages available on the Internet, the majority of this content and the WWW pages are designed for personal computer (PC) users with access to big screen resolution for easy viewing and convenient mouse and keyboard for navigation. Existing web browsers for devices with smaller screen resolutions such as PDAs and mobile phones are able to access WWW pages, but the navigation and the display of the WWW pages are often unsatisfactory and awkward due to the small display screen of the wireless communication devices. For instance, small devices such as PDA's and wireless phones typically do not have the resolution or screen size as is typically utilized by many PCs to display most Internet web pages. Therefore, problems such as usage of simplified versions of WWW pages often occur as a result attempting to display the WWW page by using typical rendering, layout, and display methods. In addition, because of the low processing speed of PDA's, compromises have been made regarding web browsing software for PDA's which allows faster access to web pages but does not enable full graphics and easy navigational abilities are typically seen on full-sized computer systems. Unfortunately, these problems are major drawbacks for most people who would like to use lightweight devices but still want rich Internet content with full versions of the web pages. Consequently, although access to the Internet and data transfer speeds may increase, unless the data may be processed and displayed in a manner enabling a user of the Internet to have a positive experience, users may just give up and wait to access the Internet on a PC with a large screen.

Figure 1 shows a system 10 illustrating Internet access by portable devices through use of a wireless connection. In this example, an Internet Service Provider (ISP) 12 can provide data from the Internet to a personal computer (PC) 14, a personal digital assistant (PDA) 16, and a wireless phone 18. When the PC 14 receives complex hypertext markup language (HTML) data, because it has a powerful processor and a large display screen, graphics associated with Internet web pages be displayed for a user as intended by the authors of the web pages. In addition, the PC 14 typically allows easy navigation on the web pages because the images and links are clearly visible on the large screen. In other circumstances, a user may attempt to access a Web page with the PDA 16 or the wireless phone 18 via the wireless connection with the ISP 12. Unfortunately, the PDA 16 and the wireless phone 18 typically have far smaller display screens than the the PC 14 and far less resolution. Because the PDA 16 and the phone 18 also typically do not have the navigational abilities along with display abilities to properly display and navigate through the web pages, the display and navigation process is extremely slow and difficult. Therefore, far too often, the display screens of the PDA 16 and the wireless phone 18 cannot properly show Internet web pages in its entirety. Such occurrences may frustrate users of such systems and relegate small display screen environments to usage of low graphics web pages or lead to avoidance of all web surfing. In view of the foregoing, there is a need for a method which can operate in a small display screen environment to intelligently and powerfully process Internet data to display Internet web pages in a user friendly manner.

SUMMARY OF THE INVENTION

Broadly speaking, the present invention fills these needs by providing methods for processing HTML data for display on portable small screen devices for easier user visibility and access. It should be appreciated that the present invention can be implemented in numerous ways, including as a process, an apparatus, a system, computer readable media, or a device. Several inventive embodiments of the present invention are described below.

In one embodiment, a computer implemented method for optimizing layout and display of web data on a reduced screen-size device is provided. The method includes parsing data for a web page, and before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the reduced screen-size device. The method further includes displaying a portion of the data of the web page using the reduced width of the at least one inline element, wherein contents of the at least one inline element are wrapped once the width of the display screen is reached.

In another embodiment, a computer implemented method for optimizing layout and display of web data on a wireless trans-receiving device is provided. The method includes parsing data for a web page, and before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the wireless trans-receiving device. The method further includes displaying at least a portion of the data of the web page using the reduced width of the at least one inline element, wherein a width and a height of the web page is reduced proportionally to fit an entire width of the web page on the display screen of the wireless trans-receiving device.

In yet another embodiment, a computer implemented method for optimizing layout and display of web data on a wireless trans-receiving device is provided. The method includes parsing data for a web page, and before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the wireless trans-receiving device. The method further includes displaying a portion of the data in a web page form where the portion of data is wrapped by content wrapping. The advantages of the present invention are numerous. Most notably, by enabling multiple types of display on a low processing speed device with small screens such as, for example, PDAs and wireless phones, etc., Internet web pages may be displayed in an dynamic and user friendly manner. In addition, by having the ability to intelligently display Internet web pages with full text and graphics content, a user may have access to the entire breadth and capabilities associated with surfing the Internet. Therefore, by use of powerful HTML data layout and display using fit-in-screen methodology and display methodologies using actual view, content wrapping and miniature view, the present invention can greatly enhance the Internet access experience for users of low speed processing devices.

Other aspects and advantages of the invention will become apparent from the following detailed description, taken in conjunction with the accompanying drawings, illustrating by way of example the principles of the invention.

BRIEF DESCRIPTION OF THE DRAWINGS

The present invention will be readily understood by the following detailed description in conjunction with the accompanying drawings, and like reference numerals designate like structural elements.

Figure 1 shows a system illustrating Internet access by portable devices through use of a wireless connection.

Figure 2A shows an Internet access system in accordance with one embodiment of the present invention. Figure 2B shows an internal layout of components within the PDA in accordance with one embodiment of the present invention.

Figure 3 shows a HTML document tree with nodes in accordance with one embodiment of the present invention.

Figure 4 shows a flowchart that defines the download, parsing, laying out, and displaying of an HTML based web page in accordance with one embodiment of the present invention.

Figure 5 shows a flowchart which defines laying out of elements from a parsing engine so inline elements are displayable within a display width of the wireless connection apparatus in accordance with one embodiment of the present invention. Figure 6 shows a flowchart defining the calculating the dimensions of inline elements so the widths of the inline elements are less than the display width in accordance with one embodiment of the present invention.

Figure 7 illustrates a flowchart defining displaying of the elements processed by the layout engine in accordance with one embodiment of the present invention.

Figure 8 illustrates a flowchart showing a methodology using content navigation in accordance with one embodiment of the present invention.

Figure 9A shows an exemplary web page shown using a fit-in-screen methodology in accordance with one embodiment of the present invention. Figure 9B shows a close up of the exemplary web page shown using the fit-in-screen methodology in accordance with one embodiment of the present invention.

Figure 9C shows the exemplary web page using the fit-in-screen methodology where a different portion of the web page is displayed after horizontal scrolling in accordance with one embodiment of the present invention. Figure 9D shows a close up view of the exemplary web page using fit-in-screen methodology where a different portion of the web page is displayed after horizontal scrolling in accordance with one embodiment of the present invention.

Figure 10A illustrates an exemplary web page shown using a content wrapping methodology in accordance with one embodiment of the present invention. Figure 10B illustrates a close up view an exemplary web page shown using a content wrapping methodology in accordance with one embodiment of the present invention.

Figure 11A shows a miniature screen view of the web page in accordance with one embodiment of the present invention.

Figure 1 IB shows a close up view of a miniature screen view of the web page in accordance with one embodiment of the present invention.

Figure 12A shows a change from a miniactual view to an actual view in accordance with one embodiment of the present invention.

Figure 12B shows a change from a current view to post scroll view in accordance with one embodiment of the present invention. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

An invention is described for a fast hypertext markup language (HTML) rendering which enables dynamic and speedy processing and display of HTML pages on portable Internet access devices. It will be obvious, however, to one skilled in the art, that the present invention may be practiced without some or all of these specific details. In other instances, well known process operations have not been described in detail in order not to unnecessarily obscure the present invention.

In order to solve the problems of the prior art, the present invention, an Internet graphics display solution, works with portable Internet access devices to effectively manage and handle display data to effectively display Internet web pages even in small display screen environments. In one embodiment, the method described herein serves to seamlessly interface with the Internet to receive data, parse the data, layout the data by adjusting the width of the inline elements, and display Internet pages on a portable graphics display device such as personal digital assistants (PDAs), cellular telephones, portable computing devices, etc.

Web pages are typically designed with assumptions of screen size, typically 800x600 pixels. Devices such as PDAs typically have screen sizes of 160x160, or 240x160 (the most advanced PDA screen commercially available today has a 320x320 screen). Mobile phones have even smaller sizes yet. By utilizing the methodology described herein, general web page content may be properly displayed on small screens and enable easy navigation through the web content.

The HTML rendering engine is one of the key pieces for HTML browsing, editing and conversion. HTML content general comes as a text stream. The HTML engine as described herein recognizes tags, parses the tags, lays out the elements on a given display context, and displays the elements. Algorithms for document rendering and layout calculations to achieve fit-in-screen, miniature view, and content wrapping display of data received over the Internet are described below.

Figure 2A shows an Internet access system 100 in accordance with one embodiment of the present invention. The system 100 includes an ISP 102 connected to a PC 104, a PDA 106, and a wireless phone 108. In this embodiment, the PDA 106 and the wireless phone 108 are trans-receiver devices that have much smaller display screens than the PC 104. It should be understood that any suitable type of device that has an Internet web browser and that may connect to the Internet can be utilized to implement the methodology described herein to optimally display Internet web pages and graphics.

In one embodiment, the PDA 106 is connected to the ISP 102 through a wireless connection. The user of the PDA 106 may desire to connect to the Internet and "surf" the World Wide Web (WWW). To do this, the user may desire to use a web browser on the PDA 106 so the user may receive and appreciate the full breadth of graphics and web page content available on the Internet. In contrast to the prior art, the methodology described herein enables the user of the PDA 106 to fully experience the graphics and the page content available to users of more powerful data processing devices with larger display screens such as the PC 104. This may occur through intelligent management, processing, and organization of HTML data so the PDA 106 can display of the web page in a manner enabling easy navigation and usability.

Figure 2B shows an internal layout of components within the PDA 106 in accordance with one embodiment of the present invention. The PDA 106 includes a bus 176 to which the internal data processing and communication components of the PDA 106 are connected. A display controller 164, a microprocessor 166 (e.g., central processing unit (CPU)), a random access memory (RAM) 168, an input output (I/O) 170, transmitter/receiver (Tx/Rx) 172, and a read only memory (ROM) 174 may be connected to the bus 176 in one embodiment. The Tx/Rx 172 may be connected to an RF device 162 to send and receive data through a wireless connection. It should be understood that the PDA 106 may contain any suitable type of components that would enable connection to the ISP 102, reception and transmission of data, processing of data from the ISP 102, and display of the data in a web page form. It should also be appreciated that a wireless phone or other types of wireless Internet connecting devices may have similar internal components to enable portable access to the Internet and may utilize the methods described herein to achieve an optimum Internet access experience.

In one embodiment, the display controller 164 may manage the display of text and graphics on the PDA 106. It should be understood that the display processor 164 may be any suitable type of logic that may receive and process data for displaying images on a screen of the PDA 106. The ROM 174 may contain compressed code that enables the processing of data from the ISP 102. In one embodiment, the compressed code contains the algorithm for fast rendering of HTML data. The ROM 174 may be any suitable type of memory that is capable of storing data such as, for example, EEPROM, flash memory, etc. In one embodiment, at bootup, the compressed code within the ROM 174 may be decompressed into the RAM 168 for use by the processor 166 so the data from the ISP 102 may be processed for transmission to the display controller 164 for display.

A connection for the RF device 162 is provided to an antenna so a wireless connection may be established with the Internet. The I/O 170 is connected to a user input device so data may be inputted into the PDA 106. It should be appreciated that any suitable type of data input device may be utilized for entering data into the PDA 106. In one embodiment, the user input device is a touch screen with some keys for entering data. In another embodiment, the user input device may be a keyboard. In yet another embodiment, a voice recognition system may be utilized to input data. The RF device 162 has a connection to the bus 176 so it can receive data to transmit. The RF device 162 is also connected to the Tx/Rx 172 which in one embodiment, may be an network interface card to manage the sending and receiving of data. In this way, MAC addresses can be used to send and receive data. In one embodiment, the input device may be utilized to input the uniform resource locator (URL) address to connect to selected web pages. If the Rx is active then the PDA 106 may receive data coming from an HTML stream during normal surfing of the Web. A link may be activated resulting in a transmission of a request for data due to an input such as a click or entering of data through any number of devices such as, for example, keyboard, voice recognition hardware, etc.

Figure 3 shows a HTML document tree with nodes in accordance with one embodiment of the present invention. In this embodiment, HTML contents are made up of elements. Each element is defined by an enclosure of <TAG>...</TAG>, or <TAG>, or just text. Any suitable type of HTML elements may be utilized with the methods described herein. After parsing the elements (as described in further detail in reference to Figure 4), the elements in the form of an HTML document tree, with each element converted into a document node. Each document node has a reference to its parent node, first child node, last child node, previous sibling node, and next sibling node. The hierarchical document tree is illustrated by diagram 180. In this embodiment, an exemplary HTML document tree that is produced from parsing of a stream of HTML data is shown. It should be appreciated that the HTML data may be received by display device in any suitable fashion such as, for example, by a wireless connection. In the HTML document tree, node-1 182 is a parent node of node-2 186. Node-2 186 may have any number of sibling nodes such as node-8 184 and node-7 188 depending on the data structure. Node-2 186 may have any suitable number of child nodes such as, for example, node-3 190, node-4 192, node- 5 194, node-6 196, etc. For example, the node-2 186 may be a table element. Therefore, the children nodes of node-2 186 may include children elements that assist in defining the structure and contents of the node-2 186. In this way, data may be organized in coherent manner so text and graphics of an HTML based web page may be displayed properly on a display panel.

Figure 4 shows a flowchart 230 that defines the download, parsing, laying out, and displaying of an HTML based web page in accordance with one embodiment of the present invention. Flowchart 230 begins with operation 240 which downloads HTML data to a wireless connection apparatus. Although some of the embodiments of the present invention are discussed using a wireless connection apparatus as an example, the methodologies described herein may be utilized with any suitable small screened device. It should be appreciated that operation 240 may receive data through any type of way such as for example, a wireless connection, a hardwire connection, an optical connection, etc. In one embodiment of this operation, the PDA may receive data from the ISP through a wireless connection received through a radio frequency signal received by the PDA. In one embodiment, the data received is a stream of HTML data for displaying an Internet web page. The data may be stored within the RAM of the PDA so the processor of the PDA can process the data at a given time.

After operation 240, the method moves to operation 280 which parses the HTML data. In one embodiment, an HTML data stream is received and the data stream is parsed to produce an HTML document tree. Operation 240 is conducted by a parsing engine that starts parsing after all of or a certain amount of data has been received. It should be appreciated that the term engine is used to describe running of an algorithm that is utilized to process data. The algorithm may be in any suitable form such as code sitting in, for example, the ROM or RAM.

It should be appreciated that the parsing operation may be done in any suitable manner as long as HTML data is parsed in preparation for a layout operation. In one embodiment, the parsing is done in a typical manner with regard to HTML data as known by those skilled in the art. In another embodiment, the parsing may be accomplished by the methodology described in U.S. Patent Application No. 10/198,822 entitled "METHODS FOR FAST HTML RENDERING". The aforementioned patent application is hereby incorporated by reference. Then the method advances to operation 320 which lays out elements from a parsing engine so inline elements are displayable within a display width of the wireless connection apparatus. The layout engine starts to work when the parsing engine has created some new elements and a certain amount of time has passed since the last layout. The layout engine is stopped when a specified period of time has passed and/or a minimum of some number of elements has been processed by the layout engine. It should be appreciated that the layout engine may be stopped after any suitable amount of time has passed and/or any suitable minimum number of elements has been processed. Therefore, operation 320 lays out the portion of data that has been downloaded. The layout engine starts to process the nodes of the HTML document tree as produced by the parsing process as shown in Figure 3. As the web page is being laid out, data indicating generation of a table may be received when data is extracted from a particular node. Operation 320 is described in further detail in reference to Figure 5 below.

After operation 320, the method advances to operation 360 which displays the elements processed by the layout engine. In one embodiment of this operation, the method displays the elements on a display surface of the Internet access device being utilized. In one embodiment, the display surface is an LCD screen of a PDA or a wireless phone. It should be understood that any suitable type of display surface may be utilized with the methods described herein. The displaying of the elements is conducted by a display engine. The display engine has the intelligence to understand that there are certain numbers of elements to be displayed from the layout engine. These elements will be displayed if they are visible on the screen. Elements such as images that will take a long time to display can be stored in a queue and displayed on the next entrance of the display engine. hen the method moves to operation 380 which processes user input and executes scripts that comes with HTML data. In this operation, a navigation engine may receive user input through the input interface so a user may navigate through the Internet.

After operation 380, the method moves operation 400 which determines if there has been user input. In this operation, a navigation engine may receive user input through the input interface so a user may navigate through the Internet. If user input exists such as, for example, entering another URL to access a different web page, the method ends and the process is started all over again. This occurs because if another URL is selected, new data from the new Internet web page will have to be parsed, laid out, and displayed. In this way, even if the old web page has not fully loaded, the old display data may be discarded and a new web page can start to be displayed. If another URL is entered, a new HTML rendering engine is started and the previous HTML rendering engine with the parsing engine, the layout engine, the display engine, and the navigation engine are discarded.

Figure 5 shows a flowchart 320 which defines laying out of elements from a parsing engine so inline elements are displayable within a display width of the wireless connection apparatus in accordance with one embodiment of the present invention. Flowchart 320 begins with operation 442 which determines width of a display screen of a small screen apparatus and a block width of a block element within a web page. In this operation, the method examines the display width of the display screen in the PDA 106. In addition, the method examines block elements of a block within the web page to ascertain what the maximum width of the block width can be for the block element to be displayed in its entirety on the display screen. After operation 442, the method proceeds to operation 444 which determines if the block width is larger than the display width. The block width is the width of a block element that was examined in operation 440. Therefore, the method compares the block width and the display width of the display screen to ascertain whether the block width is managed to fit within the display screen. If the block width is not larger than the display width, the method moves to operation

360 as discussed in reference to Figure 4 where the HTML data is displayed using the width of the block elements for the inline elements. In this circumstance, the block width of the block element being examined is not larger than the display screen which means that all elements within the block elements (such as, for example, an internal block element, inline elements, etc.). Therefore, the widths of the inline elements within the block element does not have to be changed and a typical layout of HTML data for a typical HTML web page as known by those skilled in the art may occur.

If the block width is larger than the display width, the method moves to operation 446 which calculates dimensions of inline elements so the widths of the inline elements are less than the display width. In this circumstance, the block element has a block width that is larger than the display width of the display screen. Therefore, the inline elements within the block element has a larger width than the display screen. Consequently, the width of the inline elements are changed so that width is less than or equal to the display width. In one embodiment, the widths of the inline elements may be changed to any suitable width depending on the display configuration desired as long as the inline width is less than or equal to the display width. In one embodiment, the inline widths for the inline elements are changed to a width equal to the display width. In another embodiment, the inline width is changed to a width less than the display width.

After operation 446, the method advances to operation 360 as described in reference to Figure 4 where the HTML data is displayed using the width of the block elements which are equal to the width of the inline elements.

Figure 6 shows a flowchart 446 defining the calculating the dimensions of inline elements so the widths of the inline elements are less than the display width in accordance with one embodiment of the present invention. The flowchart 446 begins with operation 450 which examines an inline element within a block element. In this operation, the method examines the inline width of the inline element.

After operation 450, the method moves to operation 452 which determines the type of the inline element examined in operation 450. In a typical HTML based WWW page, there are three major types of inline elements which are images, text, and list box.

If the inline element is an image, the method moves to operation 454 which downsizes the image to preserve the width to height ratio to fit within the display width. If the image corresponds to an image map, the corresponding map areas coordinates are scaled. If the inline element is text input field then the method moves to operation 456 where the width of the inline element is decreased to fit within width of the display screen. Therefore, in this embodiment the text input filed is limited by its width.

If the inline element is a list box then the method advances to operation 458 where the list box is fixed by width and height so the list box fits within the display width. After operations 454, 456, or 458, the method moves to operation 460 which determines if any more inline elements are to be fit to the display screen. If there are more inline elements, the method moves to operation 450 and repeats operation 450, 452 and one of operations 454, 456, and 458. Figure 7 illustrates a flowchart 360 defining displaying of the elements processed by the layout engine in accordance with one embodiment of the present invention. In this embodiment, the flowchart 360 starts with operation 500 which determines what display method is to be used. If the fit-in-screen method (also known as actual view method) is to be used, the method moves to operation 502 which uses the fit-in-screen methodology to display the web page. Therefore, once contents of the inline elements reach the width of the inline elements, the contents are wrapped onto a next line so the contents do not spill over beyond the width of the display screen. The fit-in-screen methodology shows a portion of a web page and enables seamless navigation through horizontal scrolling and vertical scrolling as described in reference to Figures 9A. If the content wrapping method is to be used, the method moves to operation 504 which displays the web page using content wrapping as described in further detail in reference to Figures 10A and 10B. In one embodiment, the contents of the inline elements may be wrapped by the width of the display screen. Besides wrapping the inline elements as described above, the content wrapping method also wraps all other content as well. If the width of a block element is larger than the width of the display screen then the contents are wrapped inside this block element. In addition, if the width of a particular block is smaller than the width of the display screen then the particular block element is placed to the right of the previous block element if that is where it belongs unless the right hand side of the particular block element exceeds the display screen width. Or if the block is to be placed from right to left, then the left hand side of the block element is checked to see if it goes beyond the width of the display screen. If the miniature view is to be used, the method moves to operation 506 which displays the web page using miniature view as further described in reference to Figures 6A and 6B. In one embodiment, the miniature view methodology includes displaying web page contents on the display screen with down-scaled coordinates. While viewing the web contents with the miniature view, a portion of the web content may be highlighted so the portion may be viewed by switching the application to actual size with the portion of the contents displayed on the screen.

After the display method has been completed, the flowchart 360 moves to operation 508 which determines whether the display method is to be changed. In this operation, the method ascertains if it has received instruction to change the display method.

Figure 8 illustrates a flowchart 520 showing a methodology using content navigation in accordance with one embodiment of the present invention. The Flowchart 520 begins with operation 522 where navigation is started. In one embodiment, this may occur when a user presses a button or touches a certain part of a touch screen of the PDA 106. After operation 522, the method moves to operation 524 which determines a current view. If the current view is an actual view 526 then the navigation around the web page may be accomplished by horizontal scrolling 532 or a vertical scrolling 534 and the actual view 526 displays a different portion of the web page in actual view size as a result of the scrolling. Actual view size is a size of the contents within the portion of the web page shown that can, in one embodiment, be substantially the same if the content was being displayed on a larger screen. It should be appreciated that the actual view size may be set to any suitable size depending on the viewing desires of the user. For example, the size of the text displayed with actual view size may be substantially the same as if the text were displayed on a monitor on a PC. In another embodiment, the size of the text displayed with actual view size may be larger than the text displayed on a typical monitor in a PC. If the current view is a content wrapping view 528 then the navigation around the web page may be accomplished by vertical scrolling 536 and the content wrapping view 528 displays a different portion of the web page as result of the scrolling. If the current view is a miniactual view then the navigation around the web page may be accomplished by tap navigation 538 or vertical scrolling. Tap navigation 538 is accomplished by tapping a portion of the web page to get an obtain an actual view 526 of the portion of the web that was tapped. If vertical scrolling 540 is done then the miniactual view displays a different portion of the web page as a result of the scrolling.

Figure 9A shows an exemplary web page shown using a fit-in-screen methodology in accordance with one embodiment of the present invention. It should be understood that the web page may be any suitable group of images and text that may be downloaded from a particular WWW address. It should also be appreciated that the methodologies described herein may be utilized to display any suitable text and images from non web pages as well. In this embodiment, a web page 602 is shown as how it would appear on a full sized screen using a web browser. The PDA 106 is shown with a display screen 604 that shows a portion 606 of the whole web page 602 using the fit-in-screen (also known as actual view) methodology as described above. It should be appreciated that although the exemplary embodiments described herein describe display of web pages on the PDA 106, the methodology described herein may be used on any suitable device with a smaller screen than typical PCs such as, for example, mobile phones, etc. As is well known by those skilled in the art, HTML based WWW pages are made up of block elements. The block elements may be made up of inline elements and/or internal block elements which in turn may have further block elements and/or inline elements. Block elements typically start a new line and can close an unterminated paragraph. For example, one particular block element may be a paragraph element. Inline elements are typically text or images within a block element.

The fit-in-screen methodology intelligently manages the widths of inline elements within block elements to layout the web page. Specifically, during layout of the HTML data for a particular web page, the widths of the inline elements within the block elements may be adjusted so that all of the inline elements have widths that are equal to or less than the width of the display screen 604 of the PDA 106. Consequently, the portion 606 of the web page 602 that is shown can be displayed at a size that is easily readable by a user. If the inline elements originally had a larger width than the display screen 604, the inline elements can be wrapped to a next line. Therefore, even when a particular web page as displayed on a typical computer system is too large for a small screen apparatus such as, for example, the PDA 106, mobile phones, etc., the portion 606 of the whole web page 602 may be displayed on the portable web display device in a manner that preserves the usability and the richness of the original web page.

Figure 9B shows a close up of the exemplary web page shown using the fit-in-screen methodology in accordance with one embodiment of the present invention. In this embodiment, the portion 606 of the web page 602 is shown on the PDA 106 in such a way that a user may seamlessly view the WWW page 602 part by part while still preserving the original graphics, text, and links. Therefore, even though the WWW page 602 is displayed on a small screen, a user may have the full experience of surfing the web nearly identical to that of using a high powered large screened computing device. In one embodiment, the by using a horizontal scroll bar 608 and a vertical scroll bar 610, a user may scroll up and down to any part of the web page 602 in a seamless manner. Because the portion 606 of the WWW page 602 is displayed in accordance with the size of the display screen 604, the size of the text and images of the web page 602 that is displayed on the PDA 106 in such an embodiment can be made substantially the same as would be displayed on a larger screen. Figure 9C shows the exemplary web page using the fit-in-screen methodology where a different portion of the web page 602 is displayed after horizontal scrolling in accordance with one embodiment of the present invention. In this embodiment, input such as, for example, usage of the horizontal scroll bar has been received, and a portion 608 of the web page 602 is now shown after horizontal movement along the web page 602. It should be understood that the input received may be any suitable input such as for, example, a detection of a button being pressed, detection of scroll bar being pressed, etc. Therefore, the portion 608 is the part of the web page 602 that is horizontally shifted from the portion 606 as discussed in reference to Figures 9A and 9B. It should also be appreciated that in a similar manner, vertical scrolling may accomplished to make all portions of the web page 602 accessible.

Figure 9D shows a close up view of the exemplary web page using fit-in-screen methodology where a different portion of the web page 602 is displayed after horizontal scrolling in accordance with one embodiment of the present invention. In this embodiment, the portion 608 can be seen more clearly to show that the images and the text are highly readable therefore making the web browsing experience more gratifying and useful. Figure 10A illustrates an exemplary web page shown using a content wrapping methodology in accordance with one embodiment of the present invention. The contents from a standard web page such as, for example the web page 602 as discussed in reference to Figure 9A through 4D can be much wider than the display screen width. Therefore, for better viewing experience, a user may prefer to view the contents of the web page without horizontal scrolling. Therefore, the entire contents of the web page may be wrapped by the screen width. In this embodiment, the contents of the web page 602 are wrapped in a smaller width than is normally used on a typical web page to produce a web page 602'. In one embodiment, each of the inline width is adjusted so that it is as small or smaller than the size of the PDA 106 as described above in reference to Figures 9A through 9D. In addition, all of the block elements are wrapped meaning that if one block may be displayed on the PDA 106 using the display screen width but another block would run over the display screen width then that block is "wrapped" to a located directly below the displayed block. Therefore, when displayed on the PDA 106, a user only need to scroll vertically and not horizontally because all of the block elements are located in a vertical line from a top block element. In this embodiment a portion 611 of the web page 602' are shown on the display 604 of the PDA 106. By scrolling vertically, a user may see all parts of the web page 602' in a powerful and intelligent manner.

Figure 10B illustrates a close up view an exemplary web page shown using a content wrapping methodology in accordance with one embodiment of the present invention. In this embodiment, the PDA 106 uses the content wrapping methodology to display the portion 611 of the web page 602'. The display screen width of the PDA 106 is at least the width of the web page 602' after the content wrapping methodology has managed the positioning of the block elements so the block elements are aligned vertically. In this manner, the display screen has only the vertical scroll bar 610 so a user can easily and effectively navigate throughout the web page 602' by just scrolling up and down. This virtually eliminates user confusion as to the position of the viewed portion of the web page 602'.

Figure 11A shows a miniature screen view of the web page 602 in accordance with one embodiment of the present invention. In this embodiment, the miniature screen methodology that is described in further detail in reference to Figure 7 is utilized to scale down the entire web page 602 so it will fit within the display screen of the PDA 106. In one embodiment, if the display width and the display height of the display screen is smaller than the web page 602 to be displayed, an entirety of the web page 602 is reduced in size proportionally to the size of the width of the display screen as compared with the web page 602 as shown on a typical large display. In one embodiment, if the miniaturized web page has links within a certain region, the links is preserved so if a user clicks on a region of the web page where the links typically exist, the links may be shown, for example, as a pull down menu so the functionality of the web page is still preserved even through the web page is miniaturized and all of the text and images may be not be seen clearly by a user. Therefore, for example, if a user knows that a particular link exists in a particular region of the web page then the user can just click on that region even if the user cannot clearly see the text or image in that region. Therefore, the user can peruse the entire web page on the display screen of the PDA 106 and quickly navigate to a particular web page where the user wants to be see. In one embodiment, the modes of display such as the fit-in-screen, content wrapping, and miniaturized view can be activated by a touch of a button or a touch of the display screen or any other type of input such as, for example, voice recognition. In such an embodiment, for example, a user may use the miniature view to navigate through to the page that the user is looking for. Once the desired web page is reached, the user can switch to either the fit-in- screen or the content wrapping mode to more easily view text and experience the full breadth of images on the desired web page.

Figure 1 IB shows a close up view of a miniature screen view of the web page 602 in accordance with one embodiment of the present invention. In this embodiment, the web page 602 is more clearly seen as been located within the entirety of the display screen 604. Therefore, by input to the PDA 106, a user can quickly and easily navigate to any suitable portion of the web page 602. For example, as shown by the dark area 216, if that area is clicked or selected by a user, the method can then switch to either a content wrapping or a fit- in-screen display methodology to show the contents within the dark area 216 on the entirety of the display screen 604. Therefore, a user is given the ability to peruse the entire web page and to navigate directly to a part of the web page 602 that is of interest. Consequently, the web browsing experience can be made much less time consuming and more powerful at the same time. Figure 12A shows a change from a miniactual view 760 to an actual view 762 in accordance with one embodiment of the present invention. In this embodiment, the miniactual view 760 (also known as the miniature view discussed above), may be changed to the actual view 762 (also known as the fit-in-screen view discussed above) by tapping part of the display screen that is to be displayed in the actual view 762. In one embodiment, a portion 760 of the web page may be tapped and the portion is displayed as the actual view 762 which has web content that enables full usability of the web with full graphics and text.

In one embodiment the miniature view 782 is shown where the whole web page is displayed. In this circumstance, as discussed in reference to Figure 8, vertical scrolling or tap navigation may be done. If desired, a user could tap into certain region of the web page, and move the tap around to choose the region of contents to be displayed. Then tap may be released to select that region of contents to be displayed. Upon release, the selected region of contents may be displayed on the screen in actual size, and actual view.

In this embodiment, the miniactual view 760 (also known as the miniature view discussed above), may be changed to the actual view 762 (also known as the fit-in-screen view discussed above) by tapping and releasing a part of the display screen that is to be displayed in the actual view 762. In one embodiment, a portion 760 of the web page may be tapped and released. In this way the portion 760 of the web page is displayed as the actual view 762 which has web content that enables full usability of the web with full graphics and text.

Figure 12B shows a change from a current view 782 to post scroll view 784 in accordance with one embodiment of the present invention. When viewing the contents, buttons may be utilized from user input to navigate through contents block by tapping the buttons. In one embodiment, there can be four navigation buttons: "Left", "Right", "Up", and "Down", which can correspond to "Scroll to left", "scroll-to-right", "scroll-up", "scroll- down" actions. It should be appreciated that any suitable numbers of buttons may be utilized. It should also be understood that the scroll actions may be assigned to different buttons depending on the configuration desired. In the case of "scroll-left", and "scroll-right", a button triggers the user to scroll to the block of contents, rather than scrolling to next screen of contents. If the content is a full screen, then the next block of contents could be the next screen of contents. This navigation is very useful in "Actual View". The invention may employ various computer-implemented operations involving data stored in computer systems. These operations are those requiring physical manipulation of physical quantities. Usually, though not necessarily, these quantities take the form of electrical or magnetic signals capable of being stored, transferred, combined, compared, and otherwise manipulated. Further, the manipulations performed are often referred to in terms, such as producing, identifying, determining, or comparing. Any of the operations described herein that form part of the invention are useful machine operations. The invention also relates to a device or an apparatus for performing these operations. The apparatus may be specially constructed for the required purposes, or it may be a general purpose computer selectively activated or configured by a computer program stored in the computer. In particular, various general purpose machines may be used with computer programs written in accordance with the teachings herein, or it may be more convenient to construct a more specialized apparatus to perform the required operations.

The invention can also be embodied as computer readable code on a computer readable medium. The computer readable medium is any data storage device that can store data which can be thereafter be read by a computer system. Examples of the computer readable medium include read-only memory, random-access memory, CD-ROMs, CD-Rs, CD-RWs, magnetic tapes, and other optical data storage devices. The computer readable medium can also be distributed over a network coupled computer systems so that the computer readable code is stored and executed in a distributed fashion.

Although the foregoing invention has been described in some detail for purposes of clarity of understanding, it will be apparent that certain changes and modifications may be practiced within the scope of the appended claims. Accordingly, the present embodiments are to be considered as illustrative and not restrictive, and the invention is not to be limited to the details given herein, but may be modified within the scope and equivalents of the appended claims. What is claimed is:

Claims

1. A computer implemented method for optimizing layout and display of web data on a reduced screen-size device, comprising: parsing data for a web page; before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the reduced screen-size device; and displaying a portion of the data of the web page using the reduced width of the at least one inline element, wherein contents of the at least one inline element are wrapped once the width of the display screen is reached.

2. A computer implemented method as recited in claim 1, wherein the reduced screen-size device is one of a personal digital assistant and a wireless telephone.

3. A computer implemented method as recited in claim 1, wherein the inline elements are one of a image, a text input, and a list box.

4. A computer implemented method as recited in claim 1, wherein the laying out of data for display includes: reducing the width of the at least one inline element to less than that of the width of the at least one inline element when the width of the at least one inline element is greater than the width of the display screen.

5. A computer implemented method as recited in claim 1, further comprising: receiving input to scroll to a different portion of the web page; and displaying the different portion of the web page.

6. A method for optimizing display of data received as recited in claim 1, wherein the laying out of data for display includes, downsizing an image to preserve a width to height ration to fit within the width of the display screen when the at least one inline element is an image; decreasing the width of a text input element to fit within the width of the display screen when the at least one inline element is the text input element; fixing a width of a list box so the list box fits within the width of the display screen when the at least one inline element is the list box.

7. A computer implemented method as recited in claim 5, wherein vertical scrolling is used to move up and down the web page and horizontal scrolling is used to move left and right on the web page.

8. A computer implemented method for optimizing layout and display of web data on a wireless trans-receiving device, comprising: parsing data for a web page; before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the wireless trans-receiving device; and displaying at least a portion of the data of the web page using the reduced width of the at least one inline element, wherein a width and a height of the web page is reduced proportionally to fit an entire width of the web page on the display screen of the wireless trans-receiving device.

9. A computer implemented method as recited in claim 8, wherein the wireless trans-receiving device is one of a personal digital assistant and a wireless telephone.

10. A computer implemented method as recited in claim 8, wherein the inline elements are one of a image, a text input, and a list box.

11. A computer implemented method as recited in claim 8, wherein the laying out of data for display includes: reducing the width of the at least one inline element to less than that of the width of the at least one inline element if the width of the at least one inline element is greater than the width of the display screen.

12 A computer implemented method as recited in claim 8, further comprising: receiving input to view to a portion of the web page; displaying the portion of the web page.

13. A computer implemented method as recited in claim 8, wherein the laying out of data for display includes, downsizing an image to preserve a width to height ration to fit within the width of the display screen when the at least one inline element is an image; decreasing the width of a text input element to fit within the width of the display screen when the at least one inline element is the text input element; fixing a width of a list box so the list box fits within the width of the display screen when the at least one inline element is the list box.

15. A computer implemented method as recited in claim 8, further comprising: receiving input to display a portion of the web page in an actual view; and displaying the portion of the web page.

16. A computer implemented method as recited in claim 8, further comprising: receiving input to scroll down to a different portion of the web page; displaying the different portion of the web page.

17. A computer implemented method as recited in claim 16, wherein vertical scrolling is used to move up and down the web page.

18. A computer implemented method for optimizing layout and display of web data on a wireless trans-receiving device, comprising: parsing data for a web page; before displaying, laying out the data for display where a width of at least one inline element is reduced to at most a width of a display screen of the wireless trans-receiving device; and displaying a portion of the data in a web page form where the portion of data is wrapped by content wrapping.

19. A computer implemented method as recited in claim 18, wherein content wrapping includes: wrapping elements within a block element when a width of the block elements are larger than the width of the display screen, and placing the block element horizontally to a previous block element when the block element belongs next to the previous block element and when the block element being next to the previous block element is within the width of the display screen.

20. A computer implemented method as recited in claim 18, wherein the data is received by one of a personal digital assistant and a wireless telephone.

21. A computer implemented method as recited in claim 18, wherein the inline elements are one of an image, a text input, and a list box.

22. A computer implemented method as recited in claim 18, wherein the laying out of data for display includes, reducing the width of the at least one inline element to less than that of the width of the at least one inline element if the width of the at least one inline element is greater than the width of the display screen.

23. A computer implemented method as recited in claim 18, further comprising: receiving input to view to a portion of the web page; displaying the portion of the web page.

24. A method for optimizing display of data received as recited in claim 18, wherein the laying out of data for display further includes, downsizing an image to preserve a width to height ration to fit within the width of the display screen when the at least one inline element is an image; decreasing the width of a text input element to fit within the width of the display screen when the at least one inline element is the text input element; fixing a width of a list box so the list box fits within the width of the display screen when the at least one inline element is the list box.

25. A computer implemented method as recited in claim 18, wherein vertical scrolling is used to move up and down the web page.