Absolute Positioning Web Design Interface with Real-Time HTML Feedback

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Current webpage design interfaces, either flow-based or absolute-positioning, are inadequate as flow-based interfaces restrict designers' ability to place objects at desired absolute locations, while absolute-positioning interfaces often produce inaccurate estimates requiring additional processing, leading to unsatisfactory design experiences.

Innovation Solution

Techniques enable absolute positioning with publishable HTML code, allowing designers to place objects at precise locations within a design interface, which accurately represents how the webpage will look, using real-time feedback and determining publishable HTML code to maintain other objects' positions, thereby eliminating the need for post-processing.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If flow-based design interface is used to place objects, then objects are automatically positioned relative to other objects, but designers cannot place objects at desired absolute locations

Engineering Contradiction:

Improveautomatic object positioningVSAvoidabsolute location placement capability

Core Design Contradiction:

Ease of operationVSAdaptability or versatility

Solution Approach 1:

The system dynamically switches between flow-based and absolute positioning modes. The design interface allows designers to choose between relative positioning (flow-based) and absolute positioning modes, with the system adapting its behavior based on the selected mode and designer preferences, making the interface versatile for different design needs

Inventive Principle:

Principle #15Dynamics

2Adaptability or versatility

If absolute-positioning design interface is used to place objects at absolute locations, then designers can move objects anywhere, but the estimated webpage appearance is often wrong and requires additional processing

Engineering Contradiction:

Improveabsolute location placement capabilityVSAvoidwebpage appearance accuracy

Core Design Contradiction:

Adaptability or versatilityVSManufacturing precision

Solution Approach 1:

The system provides real-time feedback by generating and displaying a preview of the actual publishable HTML code as designers place objects. This feedback loop allows designers to see the estimated webpage appearance and make adjustments before final publication, ensuring accuracy without requiring multiple post-processing iterations

Inventive Principle:

Principle #23Feedback

Solution Approach 2:

The system performs preliminary processing to generate accurate publishable HTML code during the design phase itself. By calculating and preparing the final HTML structure, positioning, and styling in advance, the system eliminates the need for additional post-processing steps while maintaining precise webpage appearance

Inventive Principle:

Principle #10Preliminary action

3Adaptability or versatility

If absolute-positioning design interface is used, then designers can place objects at desired locations, but additional processing is required to create publishable HTML code

Engineering Contradiction:

Improveabsolute location placement capabilityVSAvoidpost-processing time

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The system performs all necessary HTML code generation, positioning calculations, and styling preparations during the design phase. By completing these tasks preliminarily while the designer is actively placing objects, the system eliminates the need for time-consuming post-processing steps after design completion

Inventive Principle:

Principle #10Preliminary action

4Ease of operation

If flow-based design interface moves objects relative to other objects, then other objects are accommodated automatically, but designers cannot maintain positions of unmoved objects

Engineering Contradiction:

Improveautomatic object accommodationVSAvoidobject position control

Core Design Contradiction:

Ease of operationVSMeasurement precision

Solution Approach 1:

The system dynamically adjusts its positioning behavior based on designer selection. When absolute positioning mode is active, the system maintains precise control over individual object positions independently, allowing designers to place objects at exact locations while keeping other objects stationary, rather than forcing relative repositioning

Inventive Principle:

Principle #15Dynamics

Data Source

PatentUS9892097B2Enabling absolute positioning with publishable HTML code

Publication Date: 2018.02.13 ADOBE INC

AI summary

This document describes techniques and apparatuses that enable absolute positioning with publishable HTML code. These techniques permit a designer to place objects at absolute positions in a design interface and see how a webpage will actually look in response to that placement. A designer need not publish the design before seeing how it will actually look because the design interface determines and then uses publishable HTML code to present the design, even in real time. Furthermore, in some embodiments, the techniques provide real-time feedback showing parameters of the publishable HTML code, thereby permitting the designer to quickly and easily change the publishable HTML code by altering the shown parameters.