Responsive Website Layout Editing With Hierarchical Breakpoints

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Existing website building systems lack the ability to provide full control over breakpoints and handle responsive editing at the component level, leading to suboptimal design and adaptability across various viewports and devices.

Innovation Solution

A website building system that allows users to define their own breakpoint ranges and incorporates machine learning and artificial intelligence to adapt layouts dynamically, ensuring responsive editing at the component level, including fluid components that adjust to viewport changes and user intent.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Productivity

If existing website building systems use fixed template-based layouts, then website creation is simplified and faster, but control over breakpoints and responsive behavior at component level is lost

Engineering Contradiction:

Improvewebsite creation speedVSAvoidbreakpoint control flexibility

Core Design Contradiction:

ProductivityVSAdaptability or versatility

Solution Approach 1:

The patent segments the website layout into hierarchical components (pages, containers, components) where each can independently define breakpoint ranges. This allows granular control over responsive behavior at different levels of the layout hierarchy, resolving the contradiction by enabling both rapid template-based creation and fine-grained breakpoint control.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The system implements dynamic breakpoint ranges that can be adjusted at component level rather than being fixed globally. Components can have different breakpoint definitions, allowing the layout to adapt dynamically to various viewport sizes while maintaining the simplicity of template-based design.

Inventive Principle:

Principle #15Dynamics

2Stability of the object's composition

If website building systems provide multiple pre-defined templates, then design consistency is improved, but adaptability to different viewport sizes and devices is limited

Engineering Contradiction:

Improvedesign consistencyVSAvoidviewport adaptation capability

Core Design Contradiction:

Stability of the object's compositionVSAdaptability or versatility

Solution Approach 1:

The patent applies local quality by allowing different breakpoint range definitions at different component levels. Each container and component can have customized breakpoint ranges tailored to its specific responsive requirements, while still maintaining overall design consistency through the template structure.

Inventive Principle:

Principle #3Local quality

Solution Approach 2:

The system makes templates universal by enabling them to function across multiple breakpoint ranges. Templates are not fixed to single viewport sizes but can adapt to various devices through hierarchical breakpoint definitions, making them multi-functional across different screen sizes.

Inventive Principle:

Principle #6Universality (Multi-functionality)

3Device complexity

If responsive editing is implemented at the page level only, then system complexity is reduced, but component-level layout control is insufficient

Engineering Contradiction:

Improvesystem complexityVSAvoidcomponent layout precision

Core Design Contradiction:

Device complexityVSManufacturing precision

Solution Approach 1:

The patent segments responsive editing capability across hierarchical levels (page, container, component). Each level can define its own breakpoint ranges, enabling precise component-level layout control while distributing system complexity across manageable segments rather than concentrating it at one level.

Inventive Principle:

Principle #1Segmentation

4Ease of operation

If fixed breakpoint ranges are used across the entire website, then layout management is simplified, but responsiveness to different devices is compromised

Engineering Contradiction:

Improvelayout management simplicityVSAvoiddevice responsiveness

Core Design Contradiction:

Ease of operationVSAdaptability or versatility

Solution Approach 1:

The system implements dynamic breakpoint ranges that can vary at different hierarchical levels. While the overall structure maintains simplicity through template-based design, individual containers and components can have customized breakpoint definitions that adapt to specific device requirements, resolving the contradiction between simplicity and adaptability.

Inventive Principle:

Principle #15Dynamics

Data Source

PatentEP3973419B1System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout

Publication Date: 2026.04.22 WIX COM

Figure 1
Figure 2
Figure 3

AI summary

A website building system includes a processor; at least one database storing website pages and layouts comprising fluid components, breakpoint ranges for multiple viewport sizes, dynamic layout rules and responsive editing rules for editing said fluid components according to breakpoint ranges and a responsive editing module running on the processor, the module includes a rule engine to provide layout decisions for a page of a website built by the WBS according to the dynamic layout rules and the responsive editing rules associated with at least one incoming trigger; a responsive editor to receive the at least one incoming trigger and dimensions of a current viewport, and to generate an updated fluid responsive design layout for said current viewport according to the layout decision and a CSS (cascading style sheet) generator to map the features of the updated fluid responsive design layout design into a smart CSS for the current viewport.