JavaScript HTML Layout Builder for Search Engine Optimization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Small business owners face difficulties in creating search-friendly websites due to server-side programming technologies that hinder website crawlers from indexing their sites, and the process of updating CSS files is time-consuming and applies to the entire webpage, not just specific sections.
Innovation Solution
A system and method for generating JavaScript-based HTML website layouts using a website builder application, where frontend and backend devices collaborate to dynamically move and re-write HTML content blocks with unique IDs, allowing for real-time design changes and improved search engine optimization without requiring server responses.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If server-side programming technology is used to create website templates, then website customization is simplified for non-programmers, but website crawlers cannot effectively index the site for search-engine purposes
Solution Approach 1:
The patent introduces an intermediary mechanism that translates between server-side template language and search-engine-friendly HTML. The system generates intermediate HTML files from server-side templates that preserve both the customized design intent and the plain text content structure that search engine crawlers can read and index effectively.
Solution Approach 2:
The patent creates a copy of the server-side template content in a search-engine-optimized format. By generating parallel representations - the original server-side template for customization and a copied HTML version for search engine indexing - the system preserves both the ease of customization and the indexing capability.
2Productivity
If CSS files are updated to reflect design changes, then webpage appearance is improved, but the process is time-consuming and requires re-writing entire CSS files
Solution Approach 1:
The patent segments the monolithic CSS file into modular, reusable style components organized by design element type. This allows developers to update only specific style segments rather than re-writing entire CSS files, significantly reducing the time required for design changes while maintaining overall webpage appearance quality.
Solution Approach 2:
The patent implements dynamic CSS generation where style definitions are created on-demand based on the specific design elements present in the webpage. This dynamic approach eliminates the need for static, comprehensive CSS files that require full re-writes, allowing rapid updates by generating only the necessary style segments for current design changes.
3Stability of the object's composition
If CSS changes are applied to the entire webpage, then consistent styling is achieved, but it cannot target certain sections alone and creates large files
Solution Approach 1:
The patent applies local quality by creating targeted CSS rules that specifically affect only the intended sections of the webpage rather than applying styles globally. This allows different parts of the page to have different styling characteristics as needed, while maintaining consistency within each local section, and avoids the file size growth associated with comprehensive global styling rules.
Solution Approach 2:
The patent segments CSS styling into discrete, section-specific style blocks rather than monolithic global stylesheets. Each segment targets a specific webpage section with localized styling rules, maintaining consistency within that section while keeping the overall CSS file size manageable and avoiding the complexity of managing large comprehensive style files.
Data Source
AI summary
The disclosure describes exemplary methods and systems for building search-friendly websites from templates on a browser based or web-enabled stand-alone website builder application. The website builder application is an HTML page with JavaScript function calls and HTML content blocks enclosed with JavaScript functions. Each HTML content block includes HTML content and HTML IDs. The HTML page includes style scripts that update to reflect retailer implemented template property changes. When the user chooses a different layout for the website template, inputs to a JavaScript moving function in the form of HTML IDs of the origin HTML content and a destination HTML content block cause the JavaScript moving function to re-write the HTML content of the origin HTML content block to the destination HTML content block. The JavaScript moving function removes the origin HTML content block. The CSS styling from the destination HTML content block automatically applies to the static HTML content.