Hi @y-nara
You’re on the right path with your approach! Using static HTML and CSS in HubSpot’s Design Manager is a great way to build landing pages, especially if you plan to enhance them with custom modules later. Here are some key things to keep in mind:
Best Practices for Static HTML/CSS Landing Pages in HubSpot
Organized File Structure: Keep your files well-structured in Design Manager. Use clear naming conventions and folders for CSS, images, and scripts to make future updates easier.
landing-page-name/
├── css/
│ └── style.css
├── images/
│ └── hero-image.jpg
├── js/
│ └── script.js
└── index.html
Responsive Design: Ensure your page adapts well across different devices using media queries. If you’re not using HubSpot’s built-in responsive framework, make sure to handle responsiveness manually.
HubSpot COS Compatibility: Since HubSpot doesn’t support server-side code like PHP, stick to front-end technologies (HTML, CSS, JavaScript).
Use Relative URLs: For images, CSS, and JavaScript, use relative URLs to prevent broken links if files are moved within Design Manager.
Thorough Testing: Test your page across different browsers (Chrome, Firefox, Safari, Edge) and devices to ensure consistency.
SEO Optimization: Add proper meta tags (title, description, keywords) in the <head> section for better search engine visibility.
Form Integration: Use HubSpot’s embedded form code instead of creating custom form handlers to ensure seamless CRM integration.
Tracking & Analytics: Verify that HubSpot’s tracking code is correctly implemented to collect visitor data.
Gradual Module Integration: As you transition to custom modules, you can either:
Convert sections of your static HTML into editable modules.
Rebuild sections entirely with custom modules for better long-term flexibility.
Maintainability: Document your code clearly to make future updates and team collaboration easier.
Version Control (Optional): If comfortable, use Git or another version control system to track changes before uploading to HubSpot