Weighted panels and panel group for responsive design system
Methods, systems, and apparatus, including computer programs encoded on computer storage media, for a responsive user interface. One of the methods includes receiving a page, the page including panels, each panel having an equivalent predetermined size. The method includes receiving a layout for the page, the layout defining a predefined hierarchy of panel groups that defines a visual relationship between the panel groups. The method includes selecting panels to include in a slide based on characteristics of the user device and the panel groups. The method includes determining a scaled size for each panel in the selected panels based on a relative weighting of the panel groups. The method includes resizing a panel in the set of panels based on the scaled size. The method includes generating the slide using the set of panels including the resized panel. The method includes sending the slide to the user device.
1. A computer-implemented method, the method comprising:
receiving a page for a user device, the page including panels;
receiving a layout for the page, the layout defining a predefined hierarchy of panel groups that defines a visual relationship between the panel groups;
selecting panels to include in a slide, wherein selecting the panels includes:
identifying, from the panels, a first panel and a second panel in the hierarchy of panel groups, wherein the first panel and the second panel are related in the hierarchy of panel groups;
determining a size ratio of the first panel to the second panel for presentation of the first panel and the second panel in the slide in accordance with the layout;
determining a scaled size for at least the first panel based on the size ratio;
resizing at least the first panel based on the scaled size; and
identifying a location of the first panel for presentation in the slide relative to the second panel based on the layout for the page;
generating the slide using the first panel and the second panel; and
sending the data representing the slide to the user device.
2. The method of claim 1 , wherein the first panel and the second panel being related by a common parent panel group in the hierarchy of panel groups, and wherein the scaled size of the first panel is determined at least in part based on the size of the common parent panel group and a relative weighting between each panel in the common parent panel group.
3. The method of claim 2 , wherein the scaled size of the first panel is further determined based on a relative weighting between the common parent panel group and other panel groups having the same parent as the common parent panel group.
4. The method of claim 1 , wherein generating the slide comprises:
calculating a first number representing panels that can be displayed horizontally, and a second number representing panels displayed vertically on the user device.
5. The method of claim 1 , further comprising generating slides, such that each panel on the page is included in one slide.
6. The method of claim 1 , further comprising:
receiving, by the user device, one or more slides including the slide, each slide including at least one panel;
displaying a first slide of the slides on the user device; and
displaying a different slide of the slides on the user device in response to receiving a navigation action.
7. The method of claim 1 , wherein the slide specifies a relative height or a relative width and relative locations of the panels in the slide based on the layout for the page, the panels of the slide configured for including content present on the user device.
8. The method of claim 7 , wherein sending the data representing the slide to the user device enables the user device to present the content on the user device in one or both of to populate the first panel and the second panel of the slide.
9. A non-transitory computer storage medium encoded with computer program instructions that when executed by one or more computers cause the one or more computers to perform operations comprising:
receiving a page for a user device, the page including panels;
receiving a layout for the page, the layout defining a predefined hierarchy of panel groups that defines a visual relationship between the panel groups;
selecting panels to include in a slide, wherein selecting the panels includes:
identifying, from the panels, a first panel and a second panel in the hierarchy of panel groups, wherein the first panel and the second panel are related in the hierarchy of panel groups;
determining a size ratio of the first panel to the second panel for presentation of the first panel and the second panel in the slide in accordance with the layout;
determining a scaled size for at least the first panel based on the size ratio;
resizing at least the first panel based on the scaled size; and
identifying a location of the first panel for presentation in the slide relative to the second panel based on the layout for the page;
generating the slide using the first panel and the second panel; and
sending the data representing the slide to the user device.
10. The non-transitory computer storage medium of claim 9 , wherein the first panel and the second panel being related by a common parent panel group in the hierarchy of panel groups, and wherein the scaled size of the first panel is determined at least in part based on the size of the common parent panel group and a relative weighting between each panel in the common parent panel group.
11. The non-transitory computer storage medium of claim 10 , wherein the scaled size of the first panel is further determined based on a relative weighting between the common parent panel group and other panel groups having the same parent as the common parent panel group.
12. The non-transitory computer storage medium of claim 9 , wherein generating the slide comprises:
calculating a first number representing panels that can be displayed horizontally, and a second number representing panels displayed vertically on the user device.
13. The non-transitory computer storage medium of claim 9 , wherein the operations further comprise generating slides, such that each panel on the page is included in one slide.
14. The non-transitory computer storage medium of claim 9 , wherein the operations further comprise:
receiving, by the user device, one or more slides including the slide, each slide including at least one panel;
displaying a first slide of the slides on the user device; and
displaying a different slide of the slides on the user device in response to receiving a navigation action.
15. A system comprising:
one or more computers and one or more storage devices storing instructions that are operable, when executed by the one or more computers, to cause the one or more computers to perform operations comprising:
receiving a page for a user device, the page including panels;
receiving a layout for the page, the layout defining a predefined hierarchy of panel groups that defines a visual relationship between the panel groups;
selecting panels to include in a slide, wherein selecting the panels includes:
identifying, from the panels, a first panel and a second panel in the hierarchy of panel groups, wherein the first panel and the second panel are related in the hierarchy of panel groups;
determining a size ratio of the first panel to the second panel for presentation of the first panel and the second panel in the slide in accordance with the layout;
determining a scaled size for at least the first panel based on the size ratio;
resizing at least the first panel based on the scaled size; and
identifying a location of the first panel for presentation in the slide relative to the second panel based on the layout for the page;
generating the slide using the first panel and the second panel; and
sending the data representing the slide to the user device.
16. The system of claim 15 , wherein the first panel and the second panel being related by a common parent panel group in the hierarchy of panel groups, and wherein the scaled size of the first panel is determined at least in part based on the size of the common parent panel group and a relative weighting between each panel in the common parent panel group.
17. The system of claim 16 , wherein the scaled size of the first panel is further determined based on a relative weighting between the common parent panel group and other panel groups having the same parent as the common parent panel group.
18. The system of claim 15 , wherein generating the slide comprises:
calculating a first number representing panels that can be displayed horizontally, and a second number representing panels displayed vertically on the user device.
19. The system of claim 15 , wherein the operations further comprise generating slides, such that each panel on the page is included in one slide.
20. The system of claim 15 , wherein the operations further comprise:
receiving, by the user device, one or more slides including the slide, each slide including at least one panel;
displaying a first slide of the slides on the user device; and
displaying a different slide of the slides on the user device in response to receiving a navigation action.