Webpage View Segmentation for Mobile Adaptation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing webpages are not effectively optimized for mobile devices, leading to suboptimal user experiences due to lack of adaptive rendering and navigation.
Innovation Solution
The solution involves creating an abstraction layer that partitions HTML webpage visual presentation elements into separate views, allowing only one view to be visible at a time, with automatic navigation between views facilitated by buttons, and utilizing a view map to manage these views independently of the original webpage.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If existing webpages are used without modification on mobile devices, then device compatibility is maintained, but user experience deteriorates due to lack of adaptive rendering
Solution Approach 1:
The webpage content is segmented into multiple discrete views that can be independently rendered and navigated. Each view represents a portion of the original webpage content that is optimized for mobile display, allowing the system to present appropriate content segments based on device characteristics without modifying the original webpage structure.
Solution Approach 2:
A view map serves as an intermediary layer between the original webpage and the mobile device display. This view map contains metadata that describes how to render and navigate between different views of the webpage content, enabling adaptive presentation without direct modification of the source webpage while maintaining compatibility.
2Loss of information
If the entire webpage is displayed at once, then information completeness is maintained, but mobile usability deteriorates due to overwhelming content
Solution Approach 1:
The webpage content is divided into multiple manageable views that are presented sequentially or on-demand. This segmentation allows mobile users to navigate through content in smaller, more digestible portions while the view map ensures that all original information remains accessible and complete across the different views.
Solution Approach 2:
The system dynamically determines which views to display based on user interaction, device characteristics, and content importance. Views can be loaded, displayed, and navigated between dynamically, allowing the interface to adapt to user needs while maintaining access to the complete information set.
3Ease of operation
If multiple views are created from a single webpage, then mobile navigation is improved, but system complexity increases due to view management
Solution Approach 1:
The view map acts as a centralized intermediary that manages all view definitions, navigation paths, and rendering instructions. This single metadata structure coordinates the complexity of multiple views and their relationships, providing a simplified interface for navigation while handling the underlying complexity of view management internally.
Solution Approach 2:
The view map serves multiple functions simultaneously: it defines view boundaries, stores navigation logic, provides rendering instructions, and manages state information. This multi-functionality consolidates what would otherwise be separate complex systems into a single manageable component that handles all aspects of view coordination.
Data Source
AI summary
Mechanisms are provided for mobile enablement of webpages (e.g., HTML webpages). In one example, mechanisms are provided for refactoring Java Server Pages “JSP” of a web application into an abstraction layer that partitions the visual presentation elements of HTML pages of the web application into a set of views and a Javascript home page. Further, mechanisms are provided for enabling access to the HTML pages over a mobile device by stacking views one atop another (in one specific example, the views may be rendered only one view at a time as needed; in another specific example any number of views (e.g., all of the views) may be rendered at once). Further, mechanisms are provided for enabling navigation between the views for the HTML pages by providing buttons along with each view.