GB2533800A

GB2533800A - Adaptive method for device independent web page presentation

Info

Publication number: GB2533800A
Application number: GB1423367.0A
Authority: GB
Inventors: Kondert Klaus
Original assignee: 1 & 1 INTERNET A G
Current assignee: 1 & 1 INTERNET A G
Priority date: 2014-12-30
Filing date: 2014-12-30
Publication date: 2016-07-06
Also published as: GB201423367D0; WO2016107871A1

Abstract

Communication device communicatively coupled with a server hosting at least a part of a web page, the communication device being adapted to, upon instruction by a user of the communication device, download and display a web page by contacting the server hosting at least a part of said web page and downloading multiple layout formats and web page contents; selecting one of the downloaded layout formats either automatically by the web browser based on device properties and/or on user interaction; applying said selected layout format to the web page content; rendering and displaying the webpage optimally based on the web page content and the applied selected layout.

Description

Adaptive method for device independent web page presentation

Description

Not long time ago, accessing a website on the Internet involved a stationary computer or a laptop running one of a few available web browsers. From a website provider's viewpoint it was therefore sufficient to provide a website that was adapted to a typical screen size of for example 1024x768 pixels. If the user happened to use a computer with a screen smaller than this average, he had to scroll and if the screen was bigger and thereby coming along with a higher resolution, the webpage was displayed centered on the screen with some padding left and right.

With the advent of portable phones, typically a second version of the website needed to be designed -a so called mobile website that accommodates the much smaller screens and less computational power available on the early portable phones. Nowadays with smartphones and tablet computers becoming an all-day companion and the computational power equaling to some energy efficient stationary computers, the expectation of an average user is, that a website is usable the same way independent of the device. However, today's devices use a multitude of browsers and screen sizes. Hence the approach of providing a fixed set of layouts (e.g. one for fixed device use and one for mobile device use) is not viable any more.

It is therefore the object of the present invention to enable communication devices to adapt a scalable layout retrieved for displaying a given website responsive to both fixed and variable device properties.

This object is solved by the subject matter of the independent claim. Preferred embodiments are described in the dependent claims.

In particular, this invention claims a communication device that is communicatively coupled with a server hosting at least a part of a website. Said communication device is adapted to, upon instruction by the user, download and display a website, by contacting the server hosting at least a part of said website and downloading multiple layout formats and web page contents. The communication device is further adapted to select one of the downloaded layout formats either automatically by the web browser or based on device properties or on user interaction. Further, the communication device is adapted to apply said selected layout to the web page content and to render and display the webpage optimally based on the web page content and the applied selected layout.

According to an embodiment of the invention, the communication device is adapted to, upon detecting a change of the device or web browser or web page properties, change an applied layout or select a different downloaded layout format, applying said layout change or different layout format to the web page content and re-rendering and re-displaying the web page based on the web page content and the applied changed or different layout.

According to an embodiment of the invention, the device properties comprise one of physical or virtual screen resolution information, device orientation information, web browser window size information or status of a split screen display.

Detailed description of the invention

The present invention relates to a communication device used for displaying rich media content received from a local network, the Internet or pre-stored locally on the communication device. Typical communication devices include personal computers, laptops, tablets and smart phones. The communication device comprises at least one central processing unit that is adapted to execute instructions stored on a local storage medium. Further, the communication device provides for input and output means controlled by an operating system. These input and output means allow for user interactions. Typical user interactions comprise operating a keyboard and mouse or controlling a touch sensitive display by means of gestures. Further, a web browser is installed within the operating system or running as an application program within an environment provided by the operating system. The web browser is a software component used for displaying rich media content on an output means and receiving information about user interactions perceived by the operating system. Prior to displaying content on the device's screen, the web browser downloads data from a source, the source typically being specified by a Unified Resource Locator, URL either pointing towards a source accessible on the local network, the Internet or stored on a local storage medium.

The data received by the web browser is typically encoded according to Internet Standards, such as Hyper Text Mark-up Language (HTML), Cascading Stylesheets (CSS) and JavaScript (JS). The web browser decodes the received data, executes instructions identified in the decoded data and renders a webpage on the output means of the communication device. A web page is a subset of a website and may relate to a single page of a website or a sub-page or a component within a website.

According to an embodiment of the present invention, the web browser, upon instructed by the user or other programmatically instructed to retrieve a first part of a website identified by an URL, contacts the resource specified by the URL. This resource is typically accessible through the Internet, i.e. on a server connected to the Internet. However, the resource may be otherwise available, i.e. on the local area network or even stored on a local file system accessible by the communication device. Also, the communication device might not directly contact the resources but used one or more intermediate proxies that contact the resource or provide a cached copy of the resource.

The first part of the website contains preferably HTML encoded data which, upon decoded by the web browser causes the web browser to download subsequent parts of the website. According to an aspect of the invention, the first or subsequent parts comprise of multiple layout formats and web page contents. Preferably, the multiple layout formats comprise of a basic layout format suitable for general purpose communication devices and one or more specific layout formats suitable for specific communication devices such as tablets or smartphones.

According to an aspect of the invention, the browser automatically selects one of the downloaded layout formats to be used for rendering the web page. This automatic selection is based on device properties, such as virtual screen resolution information, device orientation (portrait, landscape), web browser window size information or the status of a split-screen display. It should be noted that either one specific device property is used for the selection of a particular layout or a combination of more than one device properties. If more than one device property is used, a weighting scheme might be employed to select the most suitable layout, i.e. the layout that has received the highest weight.

According to an aspect of the invention, the layout format may also be selected by the user instead, or in combination with an automatic selection by the web browser. This might be beneficial in case of a high number of selectable layouts, e.g. the browser may pre-select or narrow down the choices for the user to select.

The present invention is now described in detail in light of the following figures: Fig. 1 shows the devices and the communication flow used for implementing the invention Fig. 2 shows a sample layout on a desktop computer Fig. 3 shows a sample layout on a tablet PC Fig. 4 shows another sample layout on a smartphone According to the invention a website is hosted at one or more servers (100) and accessed using a communication device as shown in Fig.1. The communication device might be a stationary computer (101), a portable computer (102), a smartphone or tablet PC (103), mobile phone (104) or any other device suitable for displaying HTML encoded information. The communication device is communicatively coupled with the server, for example by means of a connection to the Internet.

According to the invention, the communication device detects an instruction by a user to download and display a website, e.g. by receiving an URL to identify a particular web page. The communication device then contacts the server to retrieve at least a part of the web page and also more than one layout formats. These layout formats may be stored in a single Cascading Style Sheet (CSS) file or may be segmented in to several individual files. These files may also be retrieved from different servers if specified by the URLs pointing towards the CSS files. Concerning the layouts, there may be a basic or common layout format stored in a CSS file that serves as a basis for the other layout formats in that the other layout formats only consist of incremental changes towards the basic or common layout.

The communication device also downloads web page content, typically stored inside HTML files.

Next, the communication device selects one of the just downloaded layout formats based on device properties and/or user interaction. These device properties comprise of one or more of physical or virtual screen resolution information, device orientation information, web browser window size information and the status of a split-screen display.

Next, the communication device applies the selected layout to the web page content and renders and displays the result on a screen of the communication device.

According to an embodiment of the invention, the communication device detects changes of device properties automatically. Alternatively, the communication device notices a change of a web browser property such a resizing the browser window by the user. Yet alternatively, the communication device detects a change in the web page properties, such as a changed font size, e.g. as a result of the user select font larger/smaller buttons on the web pages. In any case, the communication device detects a change and selects a different layout format from the previously downloaded formats. Subsequently the different layout format is applied to the web page content again and the result is displayed on the communication device.

It should be noted that if the user changes the font size, e.g. enlarges the font size, the communication devices scales the current layout as far as possible, e.g. as long full visibility of all elements or at least the important elements is given. Important elements may be marked so by special classes in the layout description or the page content.

If the user enlarges the font size even further, the communication devices may select another of the previously downloaded layout formats. Likewise, if the user changes the font size to be smaller, the communication devices scales the current layout down until a predetermined threshold is reached and then selects another of the previously downloaded layout formats. This threshold may be defined by a specific font size that is considered to be the lowest size that produces a still readable font size. Alternatively, the threshold may be determined by the actual size, typically specified in pixels of an element to be displayed. One should note that this selection is implemented fully on the communication device itself, i.e. no further communication with the server is necessary. This is especially advantageous in an environment where the user is not always connected to the Internet.

Fig. 2 shows a sample layout typically used for a desktop computer. Due to the typically large screen size of desktop computers the web page can be displayed in full detail. For example, in case of an image gallery, the layout includes a list of directories and a thumbnail size image preview of images stored in a selected directory.

On a tablet PC the layout may look as shown in Fig. 3. Note that they layout may also be used on desktop computer, e.g. when the user has scaled down the browser window or has enlarged the font size to a level which does not allow for full visibility of text elements. In the example depicted in Fig. 3, the layout still shows thumbnail sized images but the navigation is minimized.

If the user scales down the web browser' s window even further or uses a communication device with small screen size, such as a smartphone a further layout may get used as depicted in Fig. 4. In this layout the displayed elements are even further reduced or moved to different a different navigation pane that is only visible after selecting a menu button or similar. ***

Claims

Claims 1. Communication device (101, 102,103,104) communicatively coupled with a server (100) hosting at least a part of a web page (200), the communication device being adapted to, upon instruction by a user of the communication device, download and display a web page by contacting the server hosting at least a part of said web page and downloading multiple layout formats and web page contents; selecting one of the downloaded layout formats either automatically by the web browser based on device properties and/or on user interaction; applying said selected layout format to the web page content; rendering and displaying the webpage optimally based on the web page content and the applied selected layout.
2. Communication device of claim 1 further being adapted to detecting a change of the device or web browser or web page properties; changing an applied layout or selecting a different downloaded layout format; applying said layout change or different format to the web page content; re-rendering and re-displaying the web page based on the web page content and the applied changed or different layout.
3. Communication device of one of claims 1 or 2, wherein the device properties comprise one of physical or virtual screen resolution information, device orientation information, web browser window size information or status of split-screen display.
4. Communication device of one of the preceding claims, wherein the layout formats comprise of fluid grids and/or flexible images and/or media queries.
5. Communication device of one of the preceding claims, wherein the user interaction consists of changing the font size and wherein rendering and displaying the webpage optimally based on the web page content and the applied selected layout comprises scaling the applied selected layout based on the font size.
6. Communication device of claim 5, wherein the web page content comprises of scalable vector graphics that are scaled according to the font size.
7. Communication device of claim 6, wherein the web page content comprises of pixel sprites which are scaled according to the font size and displayed on browsers that do not provide sufficient support for displaying scalable vector graphics.