Environment for responsive graphical designs

• US 8,621,422 B1
• Filed: 08/15/2013
• Issued: 12/31/2013
• 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): Chen, Qing
• Application Number:
  US13/968,401
• Time in Patent Office: 138 Days
• Field of Search: 717/104, 717/105, 715/760
• US Class Current: 717/105
• 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
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 8/34 Graphical or visual programming

Abstract

Embodiments of the present invention provide tools and methods for the development and specification of a responsive graphical design. A graphical user interface allows a user to specify a design. The graphical user interface has a area for displaying a rendering of the design according to a first dimension specification. The system also has a dimension specification interface that allows the user to set a second dimension specification. The system also has a widget interface that allows the user to (i) add a widget to said design, (ii) specify a first state for the widget when the design is rendered according to the first dimension specification, and (iii) specify a second state for the widget when the design is rendered according to the second dimension specification.

Claims

1. A system comprising:

a graphical user interface that allows a user to specify a design, wherein said graphical user interface includes an area for displaying a rendering of said design according to a first dimension specification;

a dimension specification interface that allows said user to set a second dimension specification;

a widget interface that allows said user to (i) add a widget to said design, (ii) add an event handler to said widget, (iii) specify a first state for said widget when said design is rendered according to said first dimension specification, and (iv) specify a second state for said widget when said design is rendered according to said second dimension specification; and

a memory storing (i) said widget, (ii) a first set of values for properties of said widget in said first state, and (iii) a second set of values for said properties of said widget in said second state;

wherein a particular value for a particular property of said widget in said first state does not change in said second state; and

wherein said particular value for said particular property of said widget is stored at a single location in said memory.

2. The system of claim 1, wherein:

said area (i) displays a first rendering of said design when said user selects a display mode associated with said first dimension specification and (ii) displays a second rendering of said design when said user selects a display mode associated with said second dimension specification; and

said widget is in said first state in said first rendering and is in said second state in said second rendering.

3. The system of claim 1, wherein said event handler is different in said first state and said second state.

4. The system of claim 1, wherein:

said first dimension specification is a default dimension specification;

said second dimension specification is a threshold dimension specification;

said area is an adjustable area that (i) displays a first rendering of said design when said adjustable area is set to a dimension that is offset in magnitude from said threshold dimension specification in a first direction, and (ii) displays a second rendering of said design when said adjustable area is set to a dimension that is offset in magnitude from said threshold dimension specification in a second direction;

said first direction is opposite of said second direction; and

said widget is in said first state in said first rendering and is in said second state in said second rendering.

5. The system of claim 1, said widget interface further comprising:

an absolute positioning specification interface having an x-input and a y-input;

wherein said x-input and said y-input are used to specify a location of said widget in said design.

6. The system of claim 1, wherein a first specification for a text content of said widget in said first state is different from a second specification for said text content of said widget in said second state.

7. The system of claim 1, wherein said design is a prototype of a web site.

8. The system of claim 7, further comprising:

an export interface that allows a user to export said prototype of said web site from a tool to produce an exported prototype of said web site;

wherein said exported prototype of said web site (i) can be viewed in an external player, and (ii) provides a viewer with an option to switch between viewing a rendering of said design at said first dimension specification and viewing a rendering of said design at said second dimension specification without altering any dimension of said external player.

9. The system of claim 7, further comprising:

an export interface that allows a user to export said prototype of said web site from a tool to produce an exported prototype of said web site;

wherein different event handlers are performed in said exported prototype of said web site based on a rendering space dimension of an external player used to render said exported prototype of said web site.

10. The system of claim 9, wherein said first dimension specification and said second dimension specification both map to possible heights and widths of an external player used to render said design.

11. The system of claim 10, wherein a text content of said widget is altered from said first state to said second state.

12. The system of claim 1, wherein said first dimension specification and said second dimension specification map to possible widths of an external player used to render said design.

13. A method of allowing a user to specify a design comprising:

providing a graphical user interface to display a page of said design;

providing a widget characterization interface that allows said user to add an event handler to a widget, and add said widget to said page of said design in a first dimension version, wherein said first dimension version is a default dimension version;

accepting a first characterization from said user, via a routing system, (i) to be associated with said widget in said default dimension version and (ii) to characterize a first state for said widget;

providing a dimension specification interface for said user to allow said user to specify a second dimension version;

accepting a second characterization from said user, via said routing system, (i) to be associated with said widget in said second dimension version and (ii) to characterize a second state for said widget; and

storing, in a memory, (i) said widget, (ii) a first set of values for properties of said widget in said first state, and (iii) a second set of values for said properties of said widget in said second state;

wherein a particular value for a particular property of said widget in said first state does not change in said second state;

wherein said particular value for said particular property of said widget is stored at a single location in said memory; and

wherein said widget characterization interface allows said user to specify said event handler differently for said first characterization and said second characterization.

14. The method of claim 13, wherein said widget characterization interface allows said user to specify an absolute position of said widget on said page of said design differently for said first characterization and said second characterization.

15. The method of claim 13, further comprising:

storing said first characterization and said second characterization in said memory; and

storing common characterizations in a same location in said memory, wherein said common characterizations are for said widget and are identical in said default dimension version and said second dimension version.

16. The method of claim 13, further comprising:

accepting a resize instruction from said user via said routing system; and

providing a resized version of said page of said design for display to said user in response to accepting said resize instruction from said user;

wherein said widget is rendered according to said first characterization if said resize instruction resized said page of said design to a dimension associated with said default dimension version; and

wherein said widget is rendered according to said second characterization if said resize instruction resized said page of said design to a dimension associated with said second dimension version.

17. A method of allowing a user to specify a responsive web page design comprising:

receiving a dimension specification for said responsive web page design from said user, wherein said dimension specification is a threshold dimension specification;

receiving a first specification for a first widget state for an interactive widget from said user, wherein said interactive widget includes a set of properties;

receiving a second specification for a second widget state for said interactive widget from said user, wherein said second specification alters a subset of said set of properties of said interactive widget;

providing a first rendering of said responsive web page design that is specified for browser windows that are larger than said threshold dimension specification;

rendering said interactive widget in said first rendering according to said first specification;

providing a second rendering of said responsive web page design that is specified for browser windows that are smaller than said threshold dimension specification;

rendering said interactive widget in said second rendering according to said second specification; and

storing, in a memory, (i) said interactive widget, (ii) a first set of values for said set of properties of said interactive widget in said first widget state, and (iii) a second set of values for said set of properties of said interactive widget in said second widget state;

wherein a particular value for a particular property of said interactive widget in said first widget state does not change in said second widget state;

wherein said particular value for said particular property of said interactive widget is stored at a single location in said memory; and

wherein said set of properties of said interactive widget includes an interactive property of said interactive widget.

18. The method of claim 17, wherein said subset of said set of properties of said interactive widget includes an absolute position of said interactive widget in said responsive web page design.

19. The method of claim 17, further comprising:

exporting said responsive web page design to produce an exported responsive web page design;

wherein said exported responsive web page design includes an encoding that uses a markup language; and

wherein said exported responsive web page design utilizes media queries to determine if a first style sheet code module associated with said first specification or a second style sheet code module associated with said second specification should be used to render said responsive web page design.

20. The method of claim 17, further comprising:

exporting said responsive web page design to produce an exported responsive web page design;

wherein said exported responsive web page design includes an encoding that uses a markup language; and

wherein said exported responsive web page design includes a viewer selectable field to allow said viewer to determine if a first markup language code module associated with said first specification or a second markup language code module associated with said second specification should be used to render said responsive web page design.