Exporting responsive designs from a graphical design tool

• US 9,946,806 B2
• Filed: 05/07/2013
• Issued: 04/17/2018
• Est. Priority Date: 05/07/2013
• Status: Active Grant

• Current Assignee: Axure Software Solutions Incorporated
• Original Assignee: Axure Software Solutions Incorporated
• Inventors: Hsu, Victor, Smith, Martin, Gardner, Ian, Fraser, Ben
• Primary Examiner(s): Mazumder, Tapas
• Application Number:
  US13/889,331
• Publication Number:
  US 20140337706A1
• Time in Patent Office: 1,806 Days
• CPC Class Codes: G06F 16/54 Browsing; Visualisation therefor
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Abstract

Embodiments of the present invention provide tools and methods for the development and specification of a responsive graphical design. A graphical design environment allows a user to specify a design. The graphical design environment has a window for displaying a rendering of the design. A dimension specification interface allows the user to specify a dimension specification. A widget interface allows a user to add a widget to the design and specify a first state and a second state for the widget. An export interface allows a user to export the design from the tool to produce an exported design. The exported design utilizes an object model event to adjust a state of the widget from a first state to a second state.

Claims

1. A system comprising:

a memory storing instructions; and

a processing system comprising at least one processor and configured to execute the instructions, wherein the instructions, when executed by the processing system, cause the processing system to provide an interactive design, the design comprising;

an instantiation of said design for rendering in a rendering space, said instantiation using an encoding, said encoding including markup language code and a script;

a widget forming a portion of said design and being encoded in said encoding; and

a set of predefined states associated with the widget, each of the set of predefined states corresponding to a respective display dimension and being defined at least in part by properties of the widget as rendered at the corresponding display dimension, wherein said set of predefined states defines a set of at least two different absolute positions for said widget within said design;

wherein the processing system generates said encoding from a specification of said design; and

wherein an object model event is utilized to (i) sense a change in a rendering space dimension and (ii) change said widget to a selected one of the set of predefined states in response to said change.

2. The system of claim 1, wherein the design further comprises:

a web page being encoded in said encoding, said web page serving as a container for said widget to be visually instantiated in, and said widget being visually instantiated when said processor renders said instantiation of said design in said rendering space;

wherein said selected one of the set of predefined states is selected using a process with an output that varies solely with said rendering space dimension.

3. The system of claim 2, wherein said object model event is an on-resize event.

4. The system of claim 3, wherein an object for said on-resize event is said web page.

5. The system of claim 1, wherein:

said encoding includes a set of trigger points, each one of said trigger points being associated with a different one of the set of predefined states;

said trigger points define a set of rendering space dimensions;

said object model event is an on-resize event; and

said widget is configured to be modified in response to said on-resize event between two of said set of predefined states based solely on said trigger points and said rendering space dimension.

6. The system of claim 5, wherein said trigger points include both a width value and a height value.

7. The system of claim 5, wherein:

said script of said encoding is executed upon said on-resize event; and

said script enables said widget to respond to said change in said rendering space dimension.

8. The system of claim 7, wherein said widget has a user-added event handler.

9. A method comprising:

rendering a graphical design to allow for a display of said graphical design in a window having an adjustable dimension, said graphical design including a widget and being encoded in an encoding;

rendering said widget in said graphical design in a first one of a set of predefined states, wherein each of the set of predefined states corresponds to a respective display dimension and is defined at least in part by properties of the widget as rendered at the corresponding display dimension, and wherein said set of predefined states defines a set of at least two different absolute positions for said widget within said graphical design;

detecting an adjustment to said adjustable dimension from a first dimension to a second dimension using an object model event;

executing, upon detecting said adjustment, an event handler function, using a processor; and

rendering said widget in said graphical design in a second one of the set of predefined states in response to said executing step;

wherein said second one of the set of predefined states is selected by said processor based on a comparison of said second dimension and a set of preset dimension specifications; and

wherein said event handler function is encoded in said encoding.

10. The method of claim 9, wherein:

said graphical design is a web page; and

said widget is an interactive widget.

11. The method of claim 10, wherein said object model event is an on-resize event.

12. The method of claim 11, further comprising:

comparing said second dimension to a preset dimension specification in said set of preset dimension specifications in response to said executing step;

wherein said preset dimension specification consists of a width value and a height value.

13. The method of claim 12, wherein an interactivity of said widget when said widget is rendered in said first one of the set of predefined states differs from said interactivity of said widget when said widget is rendered in said second one of the set of predefined states.

14. A non-transitory computer readable medium having stored thereon instructions configured to cause a processor to execute the method of claim 9.

15. A system comprising:

a memory storing instructions; and

a processing system comprising at least one processor and configured to execute the instructions, wherein the instructions, when executed by the processing system, cause the processing system to provide a tool for designing a web page prototype, the tool comprising;

a graphical design environment allowing a user to specify said web page prototype, said graphical design environment having a window for displaying a rendering of said web page prototype;

a dimension specification interface allowing said user to specify a dimension specification;

a widget interface allowing said user to (i) add a widget to said web page prototype, and (ii) specify a first state and a second state for said widget, wherein the first state and the second state each correspond to a respective display dimension and are defined at least in part by properties of the widget as rendered at the corresponding display dimension, and wherein the first state and the second state define different absolute positions for said widget within said web page prototype; and

an export interface to allow a user to export said web page prototype from said tool to produce an exported web page prototype;

wherein said exported web page prototype utilizes an object model event to adjust a state of said widget from said first state to said second state.

16. The system of claim 15, wherein said object model event is an on-resize event.

17. The system of claim 15, wherein said exported web page prototype adjusts said state of said widget based on said dimension specification, device parameters defining characteristics of a device used to render said exported web page prototype, and a dimension of a browser window, said browser being used to render said exported web page prototype.

18. The system of claim 17, wherein said exported web page prototype adjusts said state of said widget based solely on said dimension specification and said dimension of said browser window.

19. The system of claim 15, wherein the tool further comprises:

a design view window configured to allow said user to view said web page prototype as it is being designed by rendering said web page prototype from an in-tool encoding; and

a responsive design emulator for altering said state of said widget between said first state and said second state in response to said dimension specification being selected from a list of defined dimension specifications.

20. The system of claim 19, wherein said dimension specification interface allows a user to specify a height value and a width value for said dimension specification.