Single Column Web Layout for Mobile Readability
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Mobile devices face challenges in presenting web content on small screens due to the need for two-dimensional scrolling, which confuses users and makes it difficult to read content with wide lines of text.
Innovation Solution
A system and method that rearranges web page content into a single vertical column, eliminating horizontal scrolling by converting HTML content to CSS, rendering table cells as block elements, wrapping text, removing unnecessary images, and resizing images to fit the screen, allowing users to view content vertically.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If web content is displayed on a small screen using conventional layout, then the content can be presented, but horizontal scrolling is required which confuses users and makes it difficult to read content
Solution Approach 1:
The patent transforms the conventional two-dimensional grid layout into a single-column vertical layout, changing the dimensional arrangement of content from horizontal-multiple-columns to vertical-single-column. This eliminates horizontal scrolling and allows users to navigate content using only vertical scrolling, simplifying the interaction model and improving readability on small screens.
Solution Approach 2:
The patent segments the web page content into discrete blocks (paragraphs, headings, images) that are arranged vertically in sequence. Each block is independently rendered and positioned, creating a segmented vertical flow that eliminates the need for horizontal scrolling while maintaining content structure and readability.
2Ease of operation
If table cells are rendered as block elements, then one cell appears per line eliminating horizontal scrolling, but the layout structure changes from conventional grid
Solution Approach 1:
The patent applies CSS block-level styling to table cells, transforming them from inline grid elements to block elements that stack vertically. This dimensional change in rendering mode converts the horizontal grid arrangement into a vertical column arrangement, enabling single-column layout while maintaining the semantic structure of the table through CSS-based block rendering.
3Ease of operation
If text content is wrapped to fit screen width, then lines of text are readable, but the text wrapping mechanism adds complexity to the rendering process
Solution Approach 1:
The patent modifies the rendering parameters of text elements by applying CSS width constraints and wrapping properties. The text is wrapped to fit within the screen width, creating readable line lengths. This parameter change in text rendering transforms the content into vertically-aligned, wrap-friendly text blocks that are easy to read on small displays without requiring complex manual wrapping logic.
4Quantity of substance
If spacer images and decorative images are removed, then unnecessary content is eliminated, but the layout may be affected
Solution Approach 1:
The patent extracts and removes spacer images and decorative images from the web page content. These unnecessary elements are identified and eliminated, reducing the overall content volume while maintaining the essential structural layout. The removal of non-functional images simplifies the content without compromising the vertical column layout structure.
Solution Approach 2:
The patent discards unnecessary decorative and spacer images that do not contribute to the functional content or layout structure. By removing these redundant elements, the patent reduces clutter and maintains a clean vertical layout, while the essential content structure is preserved through the block-level rendering of remaining elements.
Data Source
AI summary
A system and method for small computing devices that present a single column of content such as a web page such that a user need only scroll vertically to see the content. A parser converts HTML to CSS as necessary, and a single column style sheet modifies content for a more-optimized viewing experience. To this end, tables and tables cells are rendered as blocks, with no padding/border/margins and any explicit widths and heights changed to automatic. Other table elements are rendered as block level elements, and horizontal margins are eliminated or re-enabled on some elements in a reduced manner. Spacer images are removed, as well as cell background images and small images. Content such as text is wrapped, and images are resized as necessary based on the screen display width. The result is a single content column that facilitates viewing and scrolling in only one direction.