When submitting an HTML template, itโs essential to follow specific guidelines to ensure your submission meets technical and presentation requirements. Below is a detailed guide on how to prepare and add an HTML template for platforms like Envato and other marketplaces.
1. File Preparation
a. File Structure
Ensure your file structure is clean, logical, and easy to understand. This will help the buyer navigate and understand your template easily.
- Root Folder: Place all the template files inside one main folder.
- CSS Folder: Include all the CSS files. Typically,
styles.css
should be the main CSS file. - JS Folder: Include all the JavaScript files (both custom and third-party).
- Images Folder: Store all the image assets here.
- Fonts Folder: Include custom fonts if used.
- HTML Files: All HTML files should be well-organized and labeled (e.g.,
index.html
,about.html
,contact.html
).
b. Image Requirements
Images must follow strict size and format guidelines for quality and performance.
- Product Featured Image Size:ย 826px width x 516px height.
- Image Formats: Use
.png
or.jpeg
formats for image files. - Image Quality: Ensure all images are optimized for the web without compromising quality.
- Placeholder Images: Replace original images with placeholder images if the original images are not part of the license.
c. Fonts
If you are using custom fonts, ensure they are licensed appropriately or use free fonts from reliable sources like Google Fonts.
- Font Format: Include web-friendly formats like
.woff
,.woff2
, and.ttf
. - Font Integration: Properly integrate fonts using the
@font-face
rule or link to Google Fonts in your HTML.
2. Code Standards
Ensure your HTML template meets industry standards for quality code:
a. HTML Code
- Use clean and semantic HTML5 code.
- Include proper doctype declaration (
<!DOCTYPE html>
). - Use proper meta tags for responsiveness (e.g.,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
).
b. CSS
- Follow CSS3 standards.
- Minify your CSS files to improve performance.
- Use appropriate naming conventions for classes and IDs (e.g., BEM methodology).
c. JavaScript
- Use clean and well-documented JavaScript.
- Ensure the JavaScript is non-obtrusive (not inline in the HTML).
- Minify your JavaScript files for better performance.
d. Responsiveness
Ensure that the template is fully responsive and functions well across all devices and screen sizes. Test using multiple devices and emulators to verify performance.
3. Browser Compatibility
Your HTML template must be compatible with all major browsers:
- Chrome (latest two versions)
- Firefox (latest two versions)
- Safari (latest two versions)
- Edge (latest two versions)
Test your template across browsers to avoid any compatibility issues.
4. Documentation
Include comprehensive documentation to guide users on how to install and use the template.
a. Installation Instructions
Provide a step-by-step guide on how to set up the HTML template.
b. Customization Guide
Give clear instructions on how to customize the template (e.g., changing colors, images, fonts).
c. File Descriptions
List all files and explain their purpose.
d. Browser & Device Support
Include information about browser compatibility and responsive design.
5. Zip Packaging
Before submitting, ensure all files are compressed into a ZIP folder.
- Do not include unnecessary files like PSD files unless they are part of the template.
- The zip file should contain only relevant files such as the HTML, CSS, JavaScript, images, and documentation.
6. Quality Control
Before submission, thoroughly review your template for any errors or issues:
- Test for broken links.
- Ensure all forms and interactive elements function properly.
- Check for spelling and grammatical mistakes.
- Ensure that your template meets all the platform-specific requirements.
7. Submission
Once the HTML template meets all technical and presentation requirements, you can submit it for review. Be sure to double-check platform-specific submission guidelines for HTML templates to avoid rejection.
By adhering to these guidelines, youโll enhance the chances of your HTML template being accepted and sold on Pixelo Template platforms.