Client-Side Rendering for Mobile UI Adaptation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing mobile-specific user interfaces for collaboration platforms like SharePoint are not optimized for touch screens, featuring small UI elements that are difficult to manipulate, and rely on server-based rendering, leading to increased data transfer and static page UI.
Innovation Solution
A template-based client-rendering platform using JavaScript, HTML5, and CSS for dynamic, touch-friendly UI generation, where the client browser generates HTML and fetches user data via REST endpoints, supporting touch-specific gestures and reducing server load.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If server-based rendering is used to generate HTML for mobile devices, then the UI can be centrally controlled and consistent, but data transfer volume increases and page UI becomes static
Solution Approach 1:
The patent extracts the HTML generation functionality from the server and places it on the client device. The server only provides raw data, while the client browser generates the HTML locally using embedded templates and JavaScript, thereby reducing data transfer and enabling dynamic UI updates without additional server communication.
2Device complexity
If server-based rendering is used for mobile pages, then page generation is centralized, but the UI becomes static and less responsive
Solution Approach 1:
The patent implements dynamic UI generation on the client side using JavaScript and embedded templates. The generated HTML can respond to user interactions, device orientation changes, and data updates in real-time, making the UI dynamic and responsive rather than static.
3Adaptability or versatility
If traditional mobile-specific UI is created for collaboration platforms, then the interface is tailored for mobile devices, but UI elements become small and difficult to manipulate on touch screens
Solution Approach 1:
The patent applies local quality by making UI element sizes adaptive rather than uniform. The client-side rendering allows different parts of the interface to have appropriately sized elements based on their function and the device context, with touch targets being sufficiently large for easy manipulation while maintaining overall mobile optimization.
4Adaptability or versatility
If separate mobile and desktop versions of pages are maintained, then each device type gets optimized content, but the amount of data to be stored and managed increases
Solution Approach 1:
The patent implements a universal template system that serves both mobile and desktop devices. The same HTML templates and JavaScript code are used across device types, with the client-side rendering adapting the output based on device characteristics. This eliminates the need to maintain separate codebases for different devices, reducing data storage and management requirements.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
A collaboration service is disclosed that hosts various collaboration sites. Each of the sites includes desktop pages and mobile pages. A routing service redirects mobile requests for the desktop pages to the mobile pages in accordance with a desktop-to-mobile mapping that defines an unbalanced correspondence between the desktop pages and the mobile pages. The routing service also redirects desktop requests for the mobile pages to the desktop pages in accordance with a mobile-to-desktop mapping that defines a balanced correspondence between them desktop pages and the mobile pages.