Patent Application
20120159314
Today's online environment presents users with a tremendous variety of available content. For example, a user can utilize a device to navigate the web and discover content such as web pages, videos, images, and so on. The format of some content, however, may be such that the content may not be visually appealing when the content is displayed on a particular device. For example, when a mobile device displays a web page that is designed for a large display area, the web page may be awkwardly resized and/or reformatted to fit the smaller display area of the mobile device. This can reduce a user's enjoyment of online content and cause users to avoid certain content, such as a particular web page that does not display properly on the user's device.
This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
Various embodiments provide techniques for adaptive content layout. In at least some embodiments, templates are provided that can be utilized to adapt content for a particular device and/or display configuration. A template can be embodied in a variety of different ways, such as XML code (or other markup code), script code, a component object model (COM) object, and so on. Examples of content that can be adapted using a template include video content, images, web pages, and so on. According to some embodiments, each template can include one or multiple elements that can be populated with content. An element can have a particular size layout, such as a width and height (e.g., in pixels) and content can be reformatted and/or resized based on attributes (e.g., size and/or shape) of the element.
The same numbers are used throughout the drawings to reference like features.
Overview
Various embodiments provide techniques for adaptive content layout. In at least some embodiments, templates are provided that can be utilized to adapt content for a particular device and/or display configuration. A template can be embodied in a variety of different ways, such as XML code (or other markup code), script code, a component object model (COM) object, and so on. Examples of content that can be adapted using a template include video content, images, web pages, and so on. According to some embodiments, each template can include one or multiple elements that can be populated with content. An element can have a particular size layout, such as a width and height (e.g., in pixels) and content can be reformatted and/or resized based on attributes (e.g., size and/or shape) of the element.
In at least some embodiments, a device can be associated with a variety of different templates. The templates can be formatted for a display size (e.g., screen size) of the device and can be stored locally on the device and/or at a remote resource, such as a server. When the device receives content, the templates can be sorted to determine which of the templates is to be used to lay out the content for display on the device.
Consider the following example implementation scenario in accordance with some embodiments. A user of a mobile device uses a web browser running on the mobile device to navigate to a web page. The mobile device receives the web page content, such as markup and/or other code that defines the features of the web page. Features of the web page can include images, text boxes, navigation features, hyperlinks, and so on. The web browser or other application inspects the web page content for attributes such as the height, width, and nested depth of the features of the web page. The device then sorts a set of templates based on the attributes and selects a template that is a “best fit” for displaying the web page. For example, a score can be calculated for each of the templates based on a variety of factors, such as a correspondence between template element sizes and web site feature sizes, a comparison of a number of template elements with a number of web site features, a template element's ability to display a particular web site feature with minimal resizing, and so on. A template with the highest score can then be used to lay out the web page for display. In at least some embodiments, the selected template can be passed to a rendering engine to be used to render the web page for display on the device.
In the discussion that follows, a section entitled “Operating Environment” is provided and describes one environment in which one or more embodiments can be employed. Following this, a section entitled “Example Content Layout Scenario” describes an example content layout scenario in accordance with one or more embodiments. Next, a section entitled “Example Methods” describes example methods in accordance with one or more embodiments. Following this, a section entitled “Example Template” describes an example template and an example implementation of the template in accordance with one or more embodiments. Last, a section entitled “Example System” describes an example system that can be utilized to implement one or more embodiments.
Operating Environment
In addition, computing device 102 includes an application in the form of a web browser 108 that can be utilized via the computing device to access content such as a web page. The computing device 102 also includes a layout engine 110 that includes and/or makes use of one or more templates 112. In at least some embodiments, a template includes data that defines grid-based elements of a display, such as a display screen of a device. For example, a template can be associated with particular screen coordinates and can define a particular section or sections of a display. Also in some embodiments, each of the templates 112 can include a unique set of constraint data that can be used to determine particular aspects of the template, such as relationships between the elements of a template. For example, the constraint data can be used (e.g., by the web browser 108) to determine aspects of a template for display, such as a size, shape, and/or display position of the template and/or elements of the template. In at least some embodiments, the constraint data can also define how a particular template element is to be visually oriented with respect to other template elements. According to some embodiments, functionalities of the layout engine 110 can be controlled and/or implemented by the web browser 108. Thus, in some alternate embodiments, techniques discussed herein can be implemented by the web browser 108 without requiring a separate layout engine.
In at least some embodiments, the layout engine 110 is configured to inspect content and select one of the templates 112 to be used to lay out the content. Example ways of selecting a template for laying out content are discussed above and below.
In addition, environment 100 includes a network 114, such as the Internet, and one or more remote resources 116 with which the computing device 102 can communicate. Examples of the remote resources 116 include a remote web server, a cloud computing resource, and so on. In some example embodiments, the computing device 102 can retrieve content and/or templates from the remote resources 116.
Computing device 102 can be embodied as any suitable computing device such as, by way of example and not limitation, a desktop computer, a portable computer, a handheld computer such as a personal digital assistant (PDA), cell phone, and the like.
Having described an example operating environment, consider now a discussion of an example content layout scenario utilizing the techniques and tools discussed herein.
Example Content Layout Scenario
As part of the content layout scenario 200, the device 202 receives content 210 that includes a content feature 212 and a content feature 214. In at least some embodiments, the content 210 can include a web page and the content feature 212 and/or the content feature 214 can include web page features such as images, video, text, navigation features, and so on. According to some embodiments, the content 210 can be received by the device 202 responsive to a navigation to the content via a web browser, e.g., the web browser 108.
According to at least some embodiments, the device 202 is associated with the templates 112 discussed above with respect to operating environment 100. When the device 202 receives the content 210, the templates 112 can be sorted to determine a template that can be used to render the content 210 on the device. For example, the layout engine 110 (discussed above with respect to operating environment 100) can ascertain various attributes of the content feature 212 and/or the content feature 214 and select one of the templates 112 to be used to lay out the content features. Example techniques for selecting templates to be used to lay out and/or render content are discussed above and below.
Further to the content layout scenario 200, a template 216 of the templates 112 is selected to be used to render the content 210. In at least some embodiments, the template 216 and the content features 212 and 214 are processed (e.g., by a rendering engine associated with the device 202) to render all or part of the content 210 on the device 202. For example, the content features 212 and 214 and the template 216 can be rendered to generate markup (e.g., HTML) and a style sheet (e.g., according to cascading style sheet language (CSS)) to be used to display the content 210. The content 210 can then be displayed by the device 202 (e.g., via the web browser 108) using the markup and the style sheet.
Having described an example content layout scenario, consider now some example methods in accordance with one or more embodiments.
Example Methods
Step 300 receives content. For example, a computing device (e.g., the computing device 102) can receive content associated with a web page in response to a navigation to the web page via the web browser 108. Step 302 ascertains attributes of the content. Examples of attributes of content can include aspects such as height, width, display resolution, nested depth of content features, the type of content, and so on.
Step 304 selects templates that meet all of a set of preconditions. One example method for selecting templates based on preconditions is discussed below in accordance with one or more embodiments. In at least some embodiments, the selected templates are converted to Java script object notation (JSON) such that the templates can be interpreted and/or processed by a browser, e.g., the web browser 108. Step 306 generates a score for each of the templates based on the attributes of the content. In at least some embodiments, a score for a template can be generated by solving a system of constraints to evaluate a layout for the content. According to one or more embodiments, when the templates are converted to JSON, the system of constraints can be solved by a JavaScript® constraint solver. For example, a score for a particular template can consider correspondence between a size of a content feature and a size of an element of the template. A template with a higher correspondence can be given a higher score than a template with a lower correspondence. As another example, if a first template can fit content within a single viewable page whereas a second template cannot, the first template can be given a higher score than the second template.
A template can also be scored based on a correspondence between a number of content features and a number of template elements. For example, if the content has three features (e.g., an image and two text boxes), a template with three elements can be scored higher than a template with two elements. A score for a template can also consider the template's ability to fit particular content within an element of the template. For example, if text from the content can fit within an element for a first template with less visual crowding (e.g., greater readability) than an element for a second template, the first template can be scored higher than the second template. Other attributes of content and/or templates can be considered in generating a score for a template without departing from the spirit and scope of the claimed embodiments.
Step 308 selects a template with the highest score. Step 310 renders the content using the template with the highest score. In at least some embodiments, the content and the template with the highest score can be processed by a rendering engine and displayed according to a layout associated with the template.
Step 402 applies local preconditions to the templates based on elements of the templates. In at least some embodiments, applying global preconditions can include applying constraints associated with a template and/or a template element on a per-element basis such that individual elements of a template can be accepted or rejected. For example, a size of an element within a template (e.g., width and/or height) can be compared with a size of a content feature to determine if there is an approximate correspondence between the two. Additional examples of applying local preconditions include comparing a number of elements within a template to a number of content features, comparing a number of nested elements within a template to a number of nested elements associated with an instance of content, and so on. Templates that meet and/or correspond with the global and local preconditions can then be selected.
Having described methods in accordance with one more embodiments, consider now an example template that can be utilized to implement one or more embodiments.
Example Template
The following is an example of a template that can be used to implement various techniques discussed herein in accordance with one or more embodiments. According to some embodiments, this example template can be used to reformat content to fill a page (e.g., all or part of a display area) and to use advertisements to fill remaining space in the page.
Having described an example template in accordance with one more embodiments, consider now an example system that can be utilized to implement one or more embodiments.
Example System
Computing device 600 includes one or more processors or processing units 602, one or more memory and/or storage components 604, one or more input/output (I/O) devices 606, and a bus 608 that allows the various components and devices to communicate with one another. Bus 608 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. Bus 608 can include wired and/or wireless buses.
Memory/storage component 604 represents one or more computer storage media. Component 604 can include volatile media (such as random access memory (RAM)) and/or nonvolatile media (such as read only memory (ROM), Flash memory, optical disks, magnetic disks, and so forth). Component 604 can include fixed media (e.g., RAM, ROM, a fixed hard drive, etc.) as well as removable media (e.g., a Flash memory drive, a removable hard drive, an optical disk, and so forth).
One or more input/output devices 606 allow a user to enter commands and information to computing device 600, and also allow information to be presented to the user and/or other components or devices. Examples of input devices include a keyboard, a cursor control device (e.g., a mouse), a microphone, a scanner, and so forth. Examples of output devices include a display device (e.g., a monitor or projector), speakers, a printer, a network card, and so forth.
Various techniques may be described herein in the general context of software or program modules. Generally, software includes routines, programs, objects, components, data structures, and so forth that perform particular tasks or implement particular abstract data types. An implementation of these modules and techniques may be stored on or transmitted across some form of computer readable media. Computer readable media can be any available medium or media that can be accessed by a computing device. By way of example, and not limitation, computer readable media may comprise “computer-readable storage media”.
“Computer-readable storage media” include volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules, or other data. Computer-readable storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can be accessed by a computer.
Various embodiments provide techniques for adaptive content layout. In at least some embodiments, templates are provided that can be utilized to adapt content for a particular device and/or display configuration. A template can be embodied in a variety of different ways, such as XML code (or other markup code), script code, a component object model (COM) object, and so on. Examples of content that can be adapted using a template include video content, images, web pages, and so on. According to some embodiments, each template can include one or multiple elements that can be populated with content. An element can have a particular size layout, such as a width and height (e.g., in pixels) and content can be reformatted and/or resized based on attributes (e.g., size and/or shape) of the element.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.
