The biggest problem with site builders is the code they generate is usually garbage. As I’ve recently discovered, this isn’t the case with

網站建設者最大的問題是他們生成的代碼通常是垃圾。 正如我最近發現的，情況并非如此

Webflow, and although it's marketed as a development tool for designers that can’t code, I (a developer that can code) have started using it on my client's sites, and even for my own Webflow ，盡管它是為無法編寫代碼的設計人員開發的一種開發工具，但我(可以編寫代碼的開發人員)已經開始在我的客戶的站點，甚至我自己的agency site.代理站點上使用它。

那么，為什么大多數網站建設者都那么爛？ (So why do most site builders suck?)

It’s a result of the interface being very different from the way that webpages actually work.

這是界面與網頁實際工作方式大不相同的結果。

An example is Wix, where you can just drag an element around to position it anywhere on the page. Anyone who codes knows this means it’s using absolute positioning everywhere, which is hard to adjust on different sized devices, and if you adjust on every size, you are producing a huge amount of garbage CSS.

Wix是一個示例，您可以在其中拖動元素以將其放置在頁面上的任何位置。 任何編碼的人都知道，這意味著它在所有地方都使用絕對定位，這很難在不同大小的設備上進行調整，并且如果在每種大小上進行調整，都會產生大量的垃圾CSS。

Other site builders just abstract far too much away from the realities of HTML and CSS. They try to make things so easy, that you have no idea what is actually going to be produced.

其他網站建設者只是抽象得與HTML和CSS的現實相距太遠。 他們試圖使事情變得如此簡單，以至于您不知道實際要生產什么。

You also have no visibility of which class names are going to be created. And when you create and then delete something, you don’t know if there is something left over — unused CSS classes or empty HTML tags.

您也看不到要創建哪些類名。 而且，當您創建然后刪除某些內容時，您將不知道是否還有剩余的內容-未使用CSS類或空HTML標記。

Webflow如何解決此問題 (How Webflow fixes this)

Webflow keeps its interface very close to how the web actually works. There is no dragging to position like in Wix. You need to understand and use the box model, flexbox, CSS grids and other front-end development concepts.

Webflow使它的界面非常接近于Web實際的工作方式。 不會像Wix一樣拖到位置。 您需要了解和使用盒子模型，flexbox，CSS網格和其他前端開發概念。

In fact, it’s almost like writing code, but by clicking buttons and moving sliders instead of writing out the lines.

實際上，這幾乎就像編寫代碼一樣，但是通過單擊按鈕和移動滑塊而不是寫出行。

You can give elements names with actual meanings (AKA semantic classes). This one is ‘banner’, this one is ‘newsletter-form’. Unlike other builders where you constantly deal with lots of randomly named divs.

您可以給元素名稱指定實際含義(AKA語義類)。 這是“橫幅”，這是“通訊形式”。 與其他構建器不同，在該構建器中，您經常處理大量隨機命名的div。

This means you have a lot of control over the code that is eventually generated and you can choose the best strategy to achieve a certain layout.

這意味著您對最終生成的代碼有很多控制權，并且可以選擇最佳策略來實現特定的布局。

對于非開發人員來說這可能很難 (This might be difficult for non-developers)

This level of control and closeness to actual code makes Webflow more difficult to use for the average person, than other builders like Wix.

這種控制水平和對實際代碼的接近程度使得Webflow對于普通人來說比Wix等其他構建器更難使用。

If you build a website for a client in Webflow, they will mostly just use the Editor panel — which is a simple interface for adding content to the Webflow CMS.

如果您在Webflow中為客戶端構建網站，則它們通常只會使用“編輯器”面板-這是用于向Webflow CMS添加內容的簡單界面。

However if they entered the designer panel, they will most likely be overwhelmed and mess something up, unless they are very tech-savvy.

但是，如果他們進入設計師面板，除非他們非常精通技術，否則他們很可能會不知所措并弄亂了東西。

A professional designer will fare better, but to get the most out of Webflow and to be able to build a clean and bug-free site, they must understand at least the basics of HTML and CSS.

專業的設計師會做得更好，但是要充分利用Webflow并構建一個干凈且無錯誤的網站，他們必須至少了解HTML和CSS的基礎知識。

Things like the box model, types of positioning, maybe a basic understanding of flexbox, as well as theoretical knowledge like why it’s best to build mobile-first, and how to keep a site loading quickly.

諸如盒子模型，定位類型，對flexbox的基本了解以及諸如為什么最好以移動優先構建，如何保持網站快速加載之類的理論知識等。

非常適合團隊和小型機構 (Great for teams and small agencies)

I run a web design & development agency together with my girlfriend Kristina — she’s a UX/UI designer.

我與女友克里斯蒂娜(Kristina)共同經營一家網頁設計和開發代理公司-她是UX / UI設計師 。

We have a small portfolio site for the company, and previously, it’s always been a pain to make updates. We’ve always used a static site generator (first Jekyll then Hugo).

我們為公司提供了一個小型投資組合站點 ，以前，進行更新始終是一件痛苦的事情。 我們一直使用靜態站點生成器(首先是Jekyll，然后是Hugo)。

Whenever Kristina wanted to freshen up the design, she would update her mockup in Figma, and then it’s up to me to write the code. Meanwhile I’m often swamped with client work and it would be several weeks until I have time to work on our site.

每當Kristina想要更新設計時，她都會在Figma中更新其模型，然后由我來編寫代碼。 同時，我經常被客戶的工作所淹沒，要等上幾個星期才能有時間在我們的網站上工作。

We’ve recently rebuilt our portfolio site in Webflow, and Kristina was able to build almost all of it herself. This is pretty crazy if you think about it. Building highly performant websites and totally custom website was previously a skill that takes years to learn.

我們最近在Webflow中重建了我們的投資組合站點，而Kristina能夠自己構建幾乎所有站點。 如果您考慮一下，這真是太瘋狂了。 建立高性能網站和完全自定義的網站以前是一項需要數年學習的技能。

In future she will be able to make updates to the site while I can sit back and relax…ahem… I mean… continue working hard on client projects!

將來她可以在網站上進行更新，而我可以坐下來放松一下……哎呀……我的意思是……繼續努力開發客戶項目！

The most important win for us is that we will be able to create new landing pages for our services very quickly. I’ve actually seen large companies using Webflow as a ‘landing page machine’, allowing more customizability than leadpages or similar.

對我們而言，最重要的勝利是我們將能夠很快為我們的服務創建新的登錄頁面。 我實際上已經看到大型公司將Webflow用作“著陸頁機器”，它提供的可定制性比引導頁面或類似頁面更大。

We’ve also had ideas for certain blog posts — tutorials and guides — that would need unique layouts. And while this would be annoying for me to rewrite in code, it becomes much easier in Webflow.

對于某些需要獨特布局的博客帖子(教程和指南)，我們也有一些想法。 盡管這對我來說用代碼重寫很煩人，但在Webflow中變得更加容易。

對于設計師而言，這是一個不錯的工具，在開發人員手中是一種武器。 (A nice tool for a designer, a weapon in the hands of a developer.)

Knowing how it all works underneath means developers can be power users of Webflow. We can take it’s capabilities to the absolute limit.

知道其所有工作原理意味著開發人員可以成為Webflow的高級用戶。 我們可以將其功能發揮到極致。

I know it’s still not as fast or as flexible as writing your own code. But there are situations where you need a CMS or a simple page builder that produces acceptable code.

我知道它仍然不如編寫自己的代碼快或靈活。 但是在某些情況下，您需要生成可接受代碼的CMS或簡單頁面構建器。

You might have a client that wants to make design changes later on, or you might be handing off to a designer, or it might just be a site that needs plenty of small changes regularly.

您可能有一個客戶想要稍后進行設計更改，或者您可能要移交給設計師，或者它可能只是一個需要定期進行大量小更改的站點。

In these situations, Webflow is my go-to tool right now.

在這些情況下，Webflow現在是我的首選工具。

What other options are there? I’d love to hear your thoughts. Please leave a comment below!

還有什么其他選擇？ 我很想聽聽您的想法。 請在下面發表評論！