Dynamic Browser Layout Adaptation for Viewport and Data Relevancy
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional websites often present articles in a layout that is not responsive to viewport size or data relevancy, leading to a poor user experience, especially on devices with varying screen sizes.
Innovation Solution
A method and system for dynamically positioning related data in a browser based on viewport size, where relevant data is positioned near the main data at smaller viewports and ancillary data is positioned below, optimizing the layout across multiple browser viewports and screen sizes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If a fixed multi-column layout is used for articles, then the structure is simple and easy to implement, but the layout does not adapt to different viewport sizes and data relevancy
Solution Approach 1:
The patent implements dynamic layout adaptation by detecting viewport size and automatically repositioning related data columns. The system transitions from a static multi-column layout to a dynamic single-column layout when viewport width falls below a threshold, and vice versa. This dynamic behavior allows the layout to adapt to different viewing conditions while maintaining a relatively simple implementation structure.
Solution Approach 2:
The patent changes the layout parameter (column arrangement) based on the viewport width parameter. When the viewport width is below a threshold value, the system switches from a multi-column layout to a single-column layout, and when above the threshold, it switches back to multi-column layout. This parameter-based adaptation resolves the contradiction between layout simplicity and adaptability.
2Ease of operation
If related data is always displayed in a fixed column position, then the implementation is straightforward, but the user experience deteriorates on mobile devices with limited screen width
Solution Approach 1:
The system dynamically adjusts the position of related data columns based on viewport detection. On mobile devices with narrow viewports, the related data is repositioned to appear above or below the main content rather than in a side column, improving readability and user experience. This dynamic repositioning maintains ease of operation while managing layout control complexity through automated detection and rendering.
3Adaptability or versatility
If the layout is adapted dynamically based on viewport size, then the user experience improves across devices, but the rendering complexity increases
Solution Approach 1:
The system performs preliminary action by detecting the viewport size before rendering the article content. Based on the detected viewport width, the system pre-determines the appropriate layout configuration (single-column or multi-column) and renders the related data in the predetermined position. This preliminary detection and preparation simplifies the rendering process compared to post-rendering adjustments.
Solution Approach 2:
The patent creates different visual copies of the same content based on viewport conditions. The underlying data structure remains the same, but the rendered presentation is copied differently - either as a single-column layout with related data above/below, or as a multi-column layout with related data in the side column. This copying approach allows adaptive rendering without increasing structural complexity.
Data Source
AI summary
Systems and methods are disclosed regarding the positioning related data in a browser on a client device received from a server. The browser on the client device is capable of being resized in a number of potential sizes—e.g., desktop browser viewport, laptop browser viewport, tablet browser viewport and mobile browser viewport. Related data may comprise main data, relevant data and ancillary data. Depending on the browser viewport and the relevancy of the data to be displayed, one embodiment may dynamically position the relevant data to be near the top of the main data. Alternatively, ancillary data may be dynamically positioned to be near the bottom of the main data.