Opportunity to sell your templates to no-code and developer audience at the same time
Improve your Versoly and web design skills
Learn and share best practices
Template Checklist
Design & Layout
Strong graphic design principles such as contrast, typography, layout, balance, hierarchies, and proportion
Follows current web design trends
Visually appealing layouts and composition
Logical layer structure and naming, following Versoly UI when possible
Where possible use responsive font sizes and connect them to h1-h6
Looks great on all devices and breakpoints
Has accessible color contrast where possible
Avoid use of excessive Lorem Ipsum and other filler content
Pages should have unique layouts, avoid page designs with little differences
The amount of breakpoint required to make the website scale across devices are as little as possible
The template should be tailored to a particular use case and include features that enhance its usefulness for that use case.
Effects & Animations
Maintain consistency in effects and animations. For instance, ensure that appear effects have comparable animation curves and timing to establish a uniform browsing experience
Only apply effects and animations to elements that enhance functionality or improve the browsing experience. For example, avoid adding hover or pressed effects to elements that lack links or do not provide additional information when hovered over
Template Projects
Template is published to a free custom versoly.page URL
All links in the template work and point to a valid URL
Pages listed in the navigation or footer of the template need to link to the corresponding pages
Only uses default or Google fonts included with Versoly
Has clearly structured HTML tags on elements
Images have alt tags where needed
Template has a custom title and description added in the site settings
Template does not use copyrighted content such as images, videos or custom fonts
The project does not contain any unused components or assets
Components should be used for navigation, footers and repeating sections.
Use descriptive and meaningful names for components that reflect their functionality, rather than generic names like “Component1” or “Widget2”. Examples include “User Profile Card”, “Product Carousel”, or “Checkout Form”
All external Components in the template are up to date
SEO
Use H1 heading elements once on the page for the most important heading. It has the highest ranking.
Use H2-H6 subheading elements in a correct hierarchy on the page. These subheading elements rank in importance according to the number in their name, so assign correct subheadings for importance of content.
SEO settings need to match the template name on the home page settings. SEO Title should read "{Template Name} - Versoly HTML website template" for Static and CMS templates
CMS
Where possible use Versoly smart CMS structures such as blog and careers
Name your CMS fields in a way that clearly correlates to the item they are linked to
Collection slugs should be singular. Ex: website.com/article/page
Collection fields should be in a logical order with well-written help text on how to use them
Collections should have at least 3 items and a maximum of 7 items per a collection. These items should have dummy content that makes sense for that category of a website.
Dynamic lists that are grids should be tested with long item names to make sure the layout doesn't break.
While building think about how easy it is to maintain along with optimising for conversions and SEO by including titles, descriptions and pagination
Forms
Form fields should have correct settings. Ex: email fields should not be text fields
Success messages should be customized to fit website design
Input focus states should be customized to fit website design
Input fields text and placeholders should be legible
Give appropriate names to the Forms and Field elements (in form settings). These names will appear in form email notifications and form reports.
Naming Conventions
Page names should be Title Case and should be consistent with navigation link names for those pages.
Component names should be formatted in kebab-case
Collection names should be Title Case and should have the Singular and Plural versions defined correctly. This sentence should sound natural: “This is a collection of {{plural-version}}” and “Create a new {{singular-version}}”
Classes and Styles
When possible don't create new classes and styles when you could re-use or cascade styles from another class to create the same design.
Extend existing classes such as btn, btn-primary, btn-lg and accordion
Unused styles should be cleared.
Licensed Assets
The use of premium or trademarked graphics assets are not allowed. Use only free assets that are allowed for resale and free redistribution or CC0-licensed graphics from sources like:- Stock Up- Pexels - Unsplash
Create a page called Licenses at the slug /licenses
Include the following text at the top: "All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below".
Display graphic sources on this page (images, icons, fonts, illustrations) with a link for each, pointing to the page where the license is defined (see example).
Add the following code to the page’s custom head code:<meta name="robots" content="noindex">
Include a "Licensing" link in the footer and link to License page.
Recommended Practices
Create a page called “Template Changelog” with slug "template-changelog" to track template versions and updates. Add the following code to the Changelog page's custom head code: <meta name="robots" content="noindex">
Test every link/component/interaction on every page and on every device so that there are no design or layout bugs.
Template Name
Give your template a unique single-word name, this will help you distinguish yourself from other templates.
Avoid common words like Basic or Clean
Search the Versoly template page and make sure the name isn't already in use
Custom Code
External libraries that are required for core functionality or visuals of your template are not allowed
If the library is extremely popular, open source (MIT license) and not too complex Versoly can look to create a plugin similar to the Versoly Swiper plugin
Customer Support
Ability and availability to provide template support to your template customers
Versoly bugs and features should be directed to Versoly support.
To reduce long term customer support, upgrading templates to fix bugs using versioning will be required