Webflow: Great tips on making a modern website by template checklist

Making web design template and put it on the marketplace for another passive sounds like a great idea. Since I’m indulged in Webflow, they have an active exclusive website template page that offers free and premium templates for a wide range. Could serve as a great source of inpiration nonetheless.

I ended up in the [Submission Guidelines page] that users should know before submit a template to the marketplace. Obviously the official authority have to filter everything before putting them up for sale in the public. Good practice to keep the marketplace clean and up to the standard.

The page also compiled a long list of template checklist that must be met for a successful template submission. And I found that while many of those requirements are Webflow-specific, there are many general, good tips of making a great web design.

• Sections should have a min-height instead of a height so that it can grow when there’s more content added. This problem is usually found in hero sections.


• Website should not have any horizontal scrolling.


• For the sake of responsive behavior, layouts should be fluid and percentage based for the most part.


• Components (tabs, sliders, etc) should not be nested. Ex: slider inside of a slider.


• Links and buttons need hover states to show that they are clickable.


• Elements that aren’t clickable/interactive should not have hover states.


• Maps should not have scroll to zoom enabled


• Class names should describe the element. Bad: “column2”, “text1” or “section-6”. Good: “Social Icon” or “Author Title” or “Testimonial Section.”


• Classes should be Title Case and not abbreviated. Do not use dashes or other traditional css conventions (e.g. camelCase). Class names should follow correct spelling.


• Interactions should follow Sentence case and be descriptive e.g. use “Slide nav down on scroll” instead of “Show nav”


• Large background images should be less than 300kb and small assets should be less than 20kb.


• Only Google fonts can be used - no Typekit or custom fonts.

This list sums up pretty well a general good practice on how to make a modern and attractive website. Furthermore, this would helps a lot for a Webflower during the design process. Practical and great find indeed.

This page is synchronized from the post: ‘Webflow: Great tips on making a modern website by template checklist’