Web Page Content Conversion for Mobile Devices
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current website design methods require manual duplication of formatting and styling for different devices with varying display parameters, leading to inefficiencies and susceptibility to changes in device display conditions, particularly when using absolute positioning.
Innovation Solution
A system and method that converts web pages intended for devices with substantial resources into formats suitable for devices with constrained resources by identifying, grouping, and rearranging design elements, using a web server to render the web page in a single column format, prioritizing left-to-right reading directions, and accommodating touch-screen navigation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If manual duplication of formatting and styling is used for different devices, then customization for each device can be achieved, but design work is excessively duplicated and maintenance becomes complex
Solution Approach 1:
The patent implements a single source HTML template that can be automatically adapted to multiple device types (desktop, tablet, mobile) through server-side processing. The system detects device characteristics and dynamically generates appropriate formatting without requiring separate manual designs for each device category, thus achieving universality across different platforms.
Solution Approach 2:
The system performs preliminary device detection and parameter analysis before rendering the final webpage. By pre-identifying device characteristics (screen size, orientation, capabilities) and preparing appropriate formatting rules in advance, the system avoids the need for manual post-processing and reduces maintenance complexity.
2Manufacturing precision
If absolute positioning is used for design elements, then precise element placement can be achieved, but the layout becomes susceptible to changes in device display parameters
Solution Approach 1:
The patent replaces static absolute positioning with dynamic relative positioning that adapts to device characteristics. Elements are positioned relative to parent containers and other elements, allowing the layout to automatically adjust when device parameters change. The server dynamically calculates positioning values based on detected device properties, maintaining precision while achieving adaptability.
Solution Approach 2:
The system changes positioning parameters from fixed absolute values to relative values that scale with device dimensions. By detecting device parameters and adjusting positioning calculations accordingly, the system maintains precise element placement while adapting to different screen sizes and resolutions.
3Adaptability or versatility
If separate web pages are created for different display parameters, then optimal display for each device type can be achieved, but design work is excessively duplicated
Solution Approach 1:
The patent segments the formatting and styling logic from the content structure. The HTML template contains semantic content while CSS rules and formatting parameters are separated and stored as configurable data. This segmentation allows a single content template to serve multiple device types while maintaining optimal display characteristics for each, eliminating the need to duplicate entire page designs.
Solution Approach 2:
The system creates dynamic copies of the base HTML template tailored to specific device types through server-side processing. Rather than manually creating separate pages, the server automatically generates device-specific versions by applying appropriate formatting rules to the master template, significantly reducing design work while maintaining optimization for each device category.
4Stability of the object's composition
If hard-coded formatting is used for each device type, then consistent display can be achieved, but the system is susceptible to changes in device display parameters
Solution Approach 1:
The system performs preliminary device detection and parameter analysis before rendering the webpage. By pre-identifying device characteristics and selecting appropriate formatting rules in advance, the system ensures consistent display behavior while maintaining the ability to adapt to parameter changes. The formatting is determined beforehand based on device class, providing stability without hard-coding.
Solution Approach 2:
The patent implements parameter-based formatting where display characteristics are determined by device parameters detected at runtime. Rather than hard-coding formatting for specific devices, the system changes formatting parameters dynamically based on detected device properties, ensuring consistency within device categories while maintaining flexibility across different parameters.
Data Source
AI summary
A system and method for converting website content is presented. Design elements in a graphical representation of a web page are identified. The design elements are ordered according to a position of each of the design elements with respect to a top of the graphical representation of the web page. One or more of the ordered design elements are grouped into one or more groups of design elements, and the design elements are stacked by rearranging each group of design elements into a single column. The single column of the groups of design elements are rendered into a converted web page for display on a device. In one implementation, the device is a mobile device.