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, each panel having an equivalent predetermined size;
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 based on characteristics of the user device and the panel groups;
determining a scaled size for each panel in the selected panels based on a relative weighting of the panel groups;
resizing at least one panel in the selected panels based on the scaled size;
generating, by a computer system, the slide using the selected panels including at least one resized panel; and
sending the slide to the user device.
2. The method of claim 1 , wherein the scaled size of each panel is determined at least in part based on the size of a parent group and a relative weighting between each panel in the parent group.
3. The method of claim 2 , wherein the scaled size of each panel is further determined based on a relative weighting between the parent group and other panel groups having the same parent as the parent 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. 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, each panel having an equivalent predetermined size;
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 based on characteristics of the user device and the panel groups;
determining a scaled size for each panel in the selected panels based on a relative weighting of the panel groups;
resizing at least one panel in the selected panels based on the scaled size;
generating, by a computer system, the slide using the selected panels including at least one resized panel; and
sending the slide to the user device.
8. The non-transitory computer storage medium of claim 7 , wherein the scaled size of each panel is determined at least in part based on the size of a parent group and a relative weighting between each panel in the parent group.
9. The non-transitory computer storage medium of claim 8 , wherein the scaled size of each panel is further determined based on a relative weighting between the parent group and other panel groups having the same parent as the parent group.
10. The non-transitory computer storage medium of claim 7 , 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.
11. The non-transitory computer storage medium of claim 7 , wherein the operations further comprise generating slides, such that each panel on the page is included in one slide.
12. The non-transitory computer storage medium of claim 7 , 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.
13. 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, each panel having an equivalent predetermined size;
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 based on characteristics of the user device and the panel groups;
determining a scaled size for each panel in the selected panels based on a relative weighting of the panel groups;
resizing at least one panel in the selected panels based on the scaled size;
generating, by a computer system, the slide using the selected panels including at least one resized panel; and
sending the slide to the user device.
14. The system of claim 13 , wherein the scaled size of each panel is determined at least in part based on the size of a parent group and a relative weighting between each panel in the parent group.
15. The system of claim 14 , wherein the scaled size of each panel is further determined based on a relative weighting between the parent group and other panel groups having the same parent as the parent group.
16. The system of claim 13 , 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.
17. The system of claim 13 , wherein the operations further comprise generating slides, such that each panel on the page is included in one slide.
18. The system of claim 13 , 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.