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

in #art5 years ago


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.


Posted from my blog with SteemPress : https://fr3eze.vornix.blog/webflow-great-tips-on-making-a-modern-website-by-template-checklist/

Sort:  

Hi @fr3eze!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 4.060 which ranks you at #3405 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 226 contributions, your post is ranked at #154.

Evaluation of your UA score:
  • Some people are already following you, keep going!
  • The readers like your work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

Hello @fr3eze, thank you for sharing this creative work! We just stopped by to say that you've been upvoted by the @creativecrypto magazine. The Creative Crypto is all about art on the blockchain and learning from creatives like you. Looking forward to crossing paths again soon. Steem on!

You got a 100% upvote from @dzentral courtesy of @sanchezpuukko! Earn a solid 0% earning payout by delegating SP to @dzentral.

Visit https://bit.ly/2EbxBUr for details or take a nap like there´s no tomorrow.

You can make your post more visible with using our resteem service.
Send 100 SBD/STEEM Get Instant Resteem by @dzentral to 8+ Followers and Get Instant 2+ Upvotes.
Automatically NO Refund for Invalid Transactions.
Don't join us on discord, better send 100 STEEM/SBD to @null while making the dzentral war cry: For mother anarchy!

Coin Marketplace

STEEM 0.37
TRX 0.12
JST 0.040
BTC 70162.45
ETH 3540.43
USDT 1.00
SBD 4.79