Responsive user interface system

• US 10,558,742 B2
• Filed: 03/09/2015
• Issued: 02/11/2020
• Est. Priority Date: 03/09/2015
• Status: Active Grant

• Current Assignee: Jitterbit, Inc.
• Original Assignee: Vinyl Development LLC (Jitterbit, Inc.)
• Inventors: Kennedy, Jr., Thomas R.
• Primary Examiner(s): Cortes, Howard
• Application Number:
  US14/641,674
• Publication Number:
  US 20160266749A1
• Time in Patent Office: 1,800 Days
• Field of Search: 715234, 715238, 715240, 715243, 715251
• CPC Class Codes: G06F 2203/04803 Split screen, i.e. subdividing the display area or the window area into separate subareas
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/177 of tables; using ruled lines
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

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 for a user device, the page including a panels. The method includes receiving a layout for the page, the layout defining a visual relationship between the panels. The method includes generating, by a computer system, a slide including a subset of panels to display on the user device, the subset of panels selected based on characteristics of the user device and the layout. The method includes sending the slide to the user device.

Claims

1. A computer-implemented method, the method comprising:

receiving a page for a user device, the page including panels;

receiving layout data for the page, the layout data defining;

a location of each of the panels in a plurality of slides, the location specifying a constraint for positioning each of the panels in the plurality of slides with respect to one another; and

a priority for displaying each of the panels, the priority specifying an order in which each of the panels is allocated to a given slide of the plurality of slides for displaying the page, the priority being based on the constraint for positioning each of the panels;

receiving user device data specifying display characteristics of the user device, the display characteristics comprising a display resolution;

generating, by a computer system, a slide by allocating at least one panel of the panels to the generated slide, the at least one panel of the generated slide being allocated based on the display resolution of the user device data, the priority in the layout data associated with the at least one panel, and the location defined by the layout data associated with the at least one panel; and

sending, to the user device, a set of slides including the generated slide, each slide including at least one panel, to cause operations comprising;

displaying a first slide of the slides on the user device, the first slide including the generated slide; and

displaying a second slide of the slides on the user device in response to receiving a navigation action, the second slide including at least one other panel of the panels, the at least one other panel being allocated to the second slide based on an orientation of the user device, the priority in the layout data associated with the at least one other panel, and the location defined by the layout data associated with the at least one other panel.

2. The method of claim 1, wherein generating the slide comprises:

calculating a first number, the first number being a number of panels that can be displayed horizontally, and a second number, the second number being a number of panels vertically on the user device.

3. The method of claim 2, wherein calculating the first number includes calculating a number of characters that can be displayed horizontally on the user device and dividing the first number by a number of characters displayed horizontally in each panel.

4. The method of claim 2, wherein calculating the second number includes calculating a number of characters that can be displayed vertically on the user device and dividing the first number by a number of characters displayed vertically in each panel.

5. The method of claim 4, wherein the number of characters that can be displayed vertically on the user device is determined based on a preferred font for the user device.

6. The method of claim 1, wherein the layout data define a first group that defines a visual relationship between a first panel and a second panel and the layout data define a visual relationship between the first group and a third panel.

7. The method of claim 1, wherein generating the slide includes selecting a subset of panels based on a visual relationship between the panels.

8. The method of claim 1, further comprising generating the set of slides, such that each panel on the page is included in one 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 layout data for the page, the layout data defining;

a location of each of the panels in a plurality of slides, the location specifying a constraint for positioning each of the panels in the plurality of slides with respect to one another; and

a priority for displaying each of the panels, the priority specifying an order in which each of the panels is allocated to a given slide of the plurality of slides for displaying the page, the priority being based on the constraint for positioning each of the panels;

receiving user device data specifying display characteristics of the user device, the display characteristics comprising a display resolution;

generating, by a computer system, a slide by allocating at least one panel of the panels to the slide, the at least one panel of the slide being allocated based on the display resolution of the user device data, the priority in the layout data associated with the at least one panel, and the location defined by the layout data associated with the at least one panel; and

sending, to the user device, a set of slides including the slide, each slide including at least one panel, to cause operations comprising;

displaying a first slide of the slides on the user device, the first slide including the generated slide; and

displaying a second slide of the slides on the user device in response to receiving a navigation action, the second slide including at least one other panel of the panels, the at least one other panel being allocated to the second slide based on an orientation of the user device, the priority in the layout data associated with the at least one other panel, and the location defined by the layout data associated with the at least one other panel.

10. The non-transitory computer storage medium of claim 9, wherein generating the slide comprises:

calculating a first number, the first number being a number of panels that can be displayed horizontally, and a second number, the second number being a number of panels vertically on the user device.

11. The non-transitory computer storage medium of claim 10, wherein calculating the first number includes calculating a number of characters that can be displayed horizontally on the user device and dividing the first number by a number of characters displayed horizontally in each panel.

12. The non-transitory computer storage medium of claim 10, wherein calculating the second number includes calculating a number of characters that can be displayed vertically on the user device and dividing the first number by a number of characters displayed vertically in each panel.

13. The non-transitory computer storage medium of claim 12, wherein the number of characters that can be displayed vertically on the user device is determined based on a preferred font for the user device.

14. The non-transitory computer storage medium of claim 9, wherein the layout data define a first group that defines a visual relationship between a first panel and a second panel and the layout data define a visual relationship between the first group and a third panel.

15. The non-transitory computer storage medium of claim 9, wherein generating the slide includes selecting a subset of panels based on a visual relationship between the panels.

16. The non-transitory computer storage medium of claim 9, further comprising generating the set of slides, such that each panel on the page is included in one slide.

17. 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 layout data for the page, the layout data defining;

a location of each of the panels in a plurality of slides, the location specifying a constraint for positioning each of the panels in the plurality of slides with respect to one another; and

a priority for displaying each of the panels, the priority specifying an order in which each of the panels is allocated to a given slide of the plurality of slides for displaying the page, the priority being based on the constraint for positioning each of the panels;

receiving user device data specifying display characteristics of the user device, the display characteristics comprising a display resolution;

generating, by a computer system, a slide by allocating at least one panel of the panels to the generated slide, the at least one panel of the generated slide being allocated based on the display resolution of the user device data, the priority in the layout data associated with the at least one panel, and the location defined by the layout data associated with the at least one panel; and

sending, to the user device, a set of slides including the generated slide, each slide including at least one panel, for causing operations comprising;

displaying a first slide of the slides on the user device, the first slide including the generated slide; and

displaying a second slide of the slides on the user device in response to receiving a navigation action, the second slide including at least one other panel of the panels, the at least one other panel being allocated to the second slide based on an orientation of the user device, the priority in the layout data associated with the at least one other panel, and the location defined by the layout data associated with the at least one other panel.

18. The system of claim 17, wherein generating the slide comprises:

calculating a first number, the first number being a number of panels that can be displayed horizontally, and a second number, the second number being a number of panels vertically on the user device.

19. The system of claim 18, wherein calculating the first number includes calculating a number of characters that can be displayed horizontally on the user device and dividing the first number by a number of characters displayed horizontally in each panel.

20. The system of claim 18, wherein calculating the second number includes calculating a number of characters that can be displayed vertically on the user device and dividing the first number by a number of characters displayed vertically in each panel.

21. The system of claim 20, wherein the number of characters that can be displayed vertically on the user device is determined based on a preferred font for the user device.

22. The system of claim 17, wherein the layout data define a first group that defines a visual relationship between a first panel and a second panel and the layout data define a visual relationship between the first group and a third panel.

23. The system of claim 17, wherein generating the slide includes selecting a subset of panels based on a visual relationship between the panels.

24. The system of claim 17, further comprising generating the set of slides, such that each panel on the page is included in one slide.