Web Page Layout Adaptation for Mobile Viewing Bottlenecks
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Viewing and interacting with web portal content that includes multiple web browser frames on mobile devices is difficult and time-consuming due to the need for scrolling, as the layout is not optimized for smaller screens.
Innovation Solution
A method that determines the characteristics of a mobile device, such as screen resolution and location, to select a suitable web page layout variant using CSS media queries and rules, rearranging elements for easier viewing on mobile devices by prioritizing important content visibility.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If a web portal includes multiple web browser frames to display information from different sources, then the information completeness is improved, but the ease of viewing on mobile devices deteriorates due to scrolling requirements
Solution Approach 1:
The web portal content is segmented into multiple layout variants (e.g., first layout variant with first set of elements, second layout variant with second set of elements). Each variant is optimized for different device types, allowing the mobile device to receive a simplified version while the non-mobile device receives the full multi-frame version, thus preserving information completeness while improving mobile viewing ease.
2Adaptability or versatility
If a web portal is designed for non-mobile devices with multiple frames, then the content display capability is improved, but the time consumption for mobile users increases due to scrolling
Solution Approach 1:
The system dynamically selects and applies different layout variants based on device characteristics. The web server determines whether the requesting device is mobile or non-mobile and serves the appropriate layout variant, making the content display capability adaptable while reducing time consumption for mobile users by eliminating the need to scroll through multiple frames.
3Ease of operation
If separate web pages are created for each device type, then the optimization for specific devices is improved, but the device complexity and maintenance burden increases
Solution Approach 1:
A single web portal page is designed to serve multiple device types by incorporating multiple layout variants within the same page structure. The page includes a first set of elements and a second set of elements that can be selectively displayed based on device type, achieving device optimization without creating separate pages, thus reducing maintenance complexity.
Data Source
AI summary
According to some embodiments, a method and apparatus are provided to receive a request to view a web page from a mobile device, determine characteristics associated with the user, select a web page layout based on the determined characteristics, and provide the web page based on the selected web page layout to the mobile device.